'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import {
  Clock, Shield, FileText, Factory, Sparkles, ArrowRight, ExternalLink,
  GraduationCap, Ticket, Cake, Database, Palette, ScrollText, MessageSquare
} from 'lucide-react';

interface DemoApp {
  slug: string;
  name: string;
  hook: string;
  description: string;
  domain: string;
  domainColor: string;
  icon: React.ReactNode;
  status: 'live' | 'coming-soon';
  features: string[];
}

const DEMOS: DemoApp[] = [
  {
    slug: 'cronarchy',
    name: 'CRONarchy',
    hook: 'Stop Googling cron syntax. Build it visually in 5 seconds.',
    description: 'CRONarchy replaces the most annoying ritual in DevOps: deciphering cron expressions. Instead of memorizing five-field syntax or pasting into Stack Overflow, you pick your schedule from a visual time picker. The tool translates your selection into a valid cron expression in real time, shows you the next five execution timestamps so you can verify it\'s right, and lets you copy the result with one click. It\'s a small tool that removes a constant, low-grade friction from every developer\'s week.',
    domain: 'Productivity',
    domainColor: 'text-emerald-400',
    icon: <Clock className="w-6 h-6" />,
    status: 'live',
    features: [
      'Visual time picker — click, don\u2019t type',
      'Human-readable translation in real time',
      'Next 5 run preview with exact timestamps',
      'One-click copy to clipboard',
    ],
  },
  {
    slug: 'sentinel-scan',
    name: 'SentinelScan',
    hook: 'Paste your code. Get an instant OWASP vulnerability report from AI.',
    description: 'SentinelScan is a live demonstration of the Sentinel agent — the security layer inside every The Hearth build. Paste any code snippet and the AI scans it against the OWASP Top 10 vulnerability categories, returning a severity-scored report with line-level findings and concrete remediation steps. It supports JavaScript, Python, SQL, and more. This is the same analysis that runs automatically on every piece of code The Hearth generates before it reaches a human reviewer.',
    domain: 'Security × AI',
    domainColor: 'text-red-400',
    icon: <Shield className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI-powered OWASP Top 10 detection',
      'Severity scoring with line-level findings',
      'Concrete remediation suggestions',
      'Supports JS, Python, SQL, and more',
    ],
  },
  {
    slug: 'invoice-forge',
    name: 'InvoiceForge',
    hook: 'Generate beautiful, professional invoices and download as PDF in one click.',
    description: 'InvoiceForge demonstrates that The Hearth doesn\'t just build dashboards — it builds complete business workflows. Fill in your company details, add line items, set tax rates and discounts, and download a clean, professional PDF invoice instantly. The PDF is rendered server-side using our Playwright-based pipeline, which means it looks identical every time regardless of browser. It\'s a working tool that small businesses can use today, and a proof point that AI-generated software handles real financial documents.',
    domain: 'Business / SaaS',
    domainColor: 'text-blue-400',
    icon: <FileText className="w-6 h-6" />,
    status: 'live',
    features: [
      'Clean, modern invoice template',
      'Add line items with auto-calculation',
      'Tax rate and discount support',
      'Instant PDF download via server-side rendering',
    ],
  },
  {
    slug: 'dissertation-ready',
    name: 'DissertationReady',
    hook: 'Paste your abstract. Get an 8-dimension academic peer review in seconds.',
    description: 'DissertationReady showcases structured AI analysis applied to academic writing. Paste a dissertation abstract and the AI evaluates it across eight dimensions — clarity, originality, methodology, literature grounding, scope, contribution, feasibility, and writing quality. Each dimension gets a score and specific improvement suggestions, culminating in a pass/revise/fail verdict with a confidence rating. It demonstrates how the same structured evaluation framework The Hearth uses for code quality can be applied to any domain where expert judgment matters.',
    domain: 'Education × AI',
    domainColor: 'text-amber-400',
    icon: <GraduationCap className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI peer review across 8 academic dimensions',
      'Pass/revise/fail verdict with confidence score',
      'Section-by-section improvement suggestions',
      'Sample abstracts for instant testing',
    ],
  },
  {
    slug: 'ticket-ghost',
    name: 'TicketGhost',
    hook: 'Experience the chaos of concert ticket drops — without the heartbreak.',
    description: 'TicketGhost is a pure frontend simulation that recreates the high-pressure experience of buying concert tickets during a live drop. You\'ll wait in a virtual queue, scan for available seats on an interactive venue map, watch prices surge in real time, and race against other "buyers" to secure your tickets. It\'s entirely client-side with no API calls — a showcase of how The Hearth builds rich, interactive UIs with complex state management, animations, and realistic user flows from a single prompt.',
    domain: 'Entertainment',
    domainColor: 'text-pink-400',
    icon: <Ticket className="w-6 h-6" />,
    status: 'live',
    features: [
      'Realistic queue + scanning simulation',
      'Dynamic ticket discovery with seat maps',
      'Price surge and availability drama',
      'Pure client-side — no API needed',
    ],
  },
  {
    slug: 'birthday-brief',
    name: 'BirthdayBrief',
    hook: 'Enter your birthday. Get your zodiac brief and 12 real freebies you can claim.',
    description: 'BirthdayBrief combines AI-generated content with curated real-world data. Enter your birth date and you\'ll receive a personalized zodiac personality snapshot, a daily AI-generated horoscope briefing, and — the practical part — a list of 12 verified birthday freebies from real brands (restaurants, retailers, apps) with redemption instructions. It demonstrates The Hearth\'s ability to blend generative AI with structured data retrieval into a polished consumer experience.',
    domain: 'Lifestyle × AI',
    domainColor: 'text-violet-400',
    icon: <Cake className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI-powered daily zodiac briefing',
      '12 real birthday freebies with redemption tips',
      'Zodiac personality snapshot',
      'Beautiful animated card design',
    ],
  },
  {
    slug: 'scope-harvester',
    name: 'ScopeHarvester',
    hook: 'Describe your business. Get a complete private LLM data collection blueprint.',
    description: 'ScopeHarvester solves the first question every company asks when they want a private AI model: "What data do we actually have, and how do we collect it?" Describe your business in plain English and the AI generates a complete data collection blueprint — including a prioritized inventory of internal data sources, a quality assessment checklist, an ingestion pipeline plan with specific tooling recommendations, a risk assessment with mitigations, and a budget estimate for collection and training. It turns a months-long consulting engagement into a 30-second starting point.',
    domain: 'Data Engineering × AI',
    domainColor: 'text-emerald-400',
    icon: <Database className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI-generated data source inventory',
      'Quality checklist and pipeline steps',
      'Risk assessment with mitigations',
      'Budget estimation for collection + training',
    ],
  },
  {
    slug: 'palette-forge',
    name: 'PaletteForge',
    hook: 'Describe a vibe. Get a 10-color design system with CSS, Tailwind, and WCAG scores.',
    description: 'PaletteForge turns a vibe description into a production-ready design system. Type something like "clean fintech with warmth" or "brutalist streetwear" and the AI generates a cohesive 10-color palette with primary, secondary, accent, background, surface, and semantic colors. You get a live UI preview showing your palette applied to real components, exportable CSS custom properties, a Tailwind config snippet, and WCAG contrast scores for every foreground/background pair. Designers use it for rapid exploration; developers use it to skip the "pick colors" phase entirely.',
    domain: 'Design × AI',
    domainColor: 'text-orange-400',
    icon: <Palette className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI-generated 10-color brand systems',
      'Live UI preview with your palette',
      'CSS variables and Tailwind config export',
      'WCAG contrast pair validation',
    ],
  },
  {
    slug: 'contract-craft',
    name: 'ContractCraft',
    hook: 'Paste a contract. Get key terms, obligations, deadlines, and risk flags in seconds.',
    description: 'ContractCraft is your AI legal analyst. Paste any contract, agreement, or legal document and the AI extracts every party, deadline, financial term, obligation, and termination condition. It flags risky clauses with severity ratings and specific recommendations. Whether you\'re reviewing an NDA, service agreement, or lease, ContractCraft gives you the structured breakdown that would take a paralegal hours — in under 30 seconds.',
    domain: 'Legal × AI',
    domainColor: 'text-sky-400',
    icon: <ScrollText className="w-6 h-6" />,
    status: 'live',
    features: [
      'Party and role identification',
      'Deadline and date extraction with urgency',
      'Financial term breakdown',
      'Risk flag analysis with recommendations',
    ],
  },
  {
    slug: 'meeting-mind',
    name: 'MeetingMind',
    hook: 'Paste meeting notes. Get structured minutes with action items and follow-ups.',
    description: 'MeetingMind transforms raw meeting notes or transcripts into professional, structured minutes. It identifies decisions, extracts action items with owners and deadlines, highlights key discussion points, captures open questions, and suggests next steps. Copy the output as Markdown and drop it straight into your project management tool. Never lose a decision or action item to bad note-taking again.',
    domain: 'Productivity × AI',
    domainColor: 'text-orange-400',
    icon: <MessageSquare className="w-6 h-6" />,
    status: 'live',
    features: [
      'AI-extracted decisions and action items',
      'Owner and deadline assignment',
      'Open question tracking',
      'One-click Markdown export',
    ],
  },
];

export default function DemosHub() {
  const liveCount = DEMOS.filter(d => d.status === 'live').length;

  return (
    <main className="min-h-screen bg-[#0C1222]">
      <Header />
      <div className="pt-24 pb-20 px-6">
        <div className="max-w-5xl mx-auto">
          {/* Hero */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-16"
          >
            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-sky-500/10 border border-sky-500/20 mb-6">
              <Factory className="w-4 h-4 text-sky-400" />
              <span className="text-sm text-sky-400">{liveCount} Live Demos</span>
            </div>
            <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">
              The Hearth
              <span className="bg-gradient-to-r from-sky-400 to-orange-400 bg-clip-text text-transparent"> Showcase</span>
            </h1>
            <p className="text-gray-400 text-lg max-w-2xl mx-auto">
              Fully functional micro-applications — each designed, built, and quality-controlled
              by the The Hearth pipeline. No placeholders. No mockups. Real tools you can use right now.
            </p>
          </motion.div>

          {/* Demo Grid */}
          <div className="grid gap-6">
            {DEMOS.map((demo, idx) => (
              <motion.div
                key={demo.slug}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: idx * 0.1 }}
              >
                <Link
                  href={demo.status === 'live' ? `/demos/${demo.slug}` : '#'}
                  className={`group block rounded-2xl border transition-all duration-300 ${
                    demo.status === 'live'
                      ? 'bg-white/[0.02] border-slate-800/50 hover:bg-white/[0.05] hover:border-sky-500/30 hover:shadow-lg hover:shadow-sky-500/5'
                      : 'bg-white/[0.01] border-slate-800/30 opacity-50 cursor-not-allowed'
                  }`}
                >
                  <div className="p-6 md:p-8">
                    <div className="flex items-start gap-6">
                      {/* Icon */}
                      <div className="shrink-0 w-14 h-14 rounded-xl bg-gradient-to-br from-sky-500/10 to-orange-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400 group-hover:border-sky-400/40 transition-colors">
                        {demo.icon}
                      </div>

                      {/* Content */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-3 mb-2">
                          <h2 className="text-xl font-bold text-white group-hover:text-sky-400 transition-colors">
                            {demo.name}
                          </h2>
                          <span className={`text-xs px-2 py-0.5 rounded-full border ${
                            demo.status === 'live'
                              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400'
                              : 'bg-gray-500/10 border-gray-500/20 text-gray-500'
                          }`}>
                            {demo.status === 'live' ? '● Live' : 'Coming Soon'}
                          </span>
                          <span className={`text-xs ${demo.domainColor}`}>{demo.domain}</span>
                        </div>

                        <p className="text-sky-300/90 text-sm font-medium mb-3" style={{ color: '#7DD3FC' }}>{demo.hook}</p>

                        <p className="text-gray-400 text-sm leading-relaxed mb-4" style={{ color: '#9ca3af' }}>{demo.description}</p>

                        <div className="flex flex-wrap gap-x-6 gap-y-1">
                          {demo.features.map((f, i) => (
                            <div key={i} className="flex items-center gap-2 text-xs text-gray-500">
                              <Sparkles className="w-3 h-3 text-sky-500/50" />
                              {f}
                            </div>
                          ))}
                        </div>
                      </div>

                      {/* Arrow */}
                      {demo.status === 'live' && (
                        <div className="shrink-0 hidden md:flex items-center text-gray-600 group-hover:text-sky-400 transition-colors">
                          <ArrowRight className="w-5 h-5" />
                        </div>
                      )}
                    </div>
                  </div>
                </Link>
              </motion.div>
            ))}
          </div>

          {/* Factory Attribution */}
          <div className="text-center mt-16 pt-8 border-t border-slate-800/50">
            <p className="text-gray-600 text-sm">
              Each demo was architected, built, and QA\u2019d by the The Hearth pipeline —
              the same system that builds production software for clients.
            </p>
            <Link href="/dark-factory" className="inline-flex items-center gap-2 text-sky-500 hover:text-sky-400 text-sm mt-2 transition-colors">
              Learn about The Hearth <ExternalLink className="w-3 h-3" />
            </Link>
          </div>
        </div>
      </div>
      <Footer />
    </main>
  );
}
