'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import Image from 'next/image';
import {
  Factory, Zap, Code, Shield, Sparkles, ArrowRight,
  CheckCircle, Play, Terminal, Layers, GitBranch,
  Cpu, Database, Layout, TestTube, Rocket, Bot,
  ChevronRight, Star, Users, Clock, TrendingUp, GraduationCap
} from 'lucide-react';
import { BRAND, VOCAB } from '@/lib/white-label/constants';

export default function DarkFactoryLanding() {
  const [activeDemo, setActiveDemo] = useState(0);
  const [typedText, setTypedText] = useState('');
  
  const demoPrompts = [
    'Create a REST API for managing customer orders with status tracking',
    'Build a real-time analytics dashboard with user activity charts',
    'Generate an authentication system with email verification',
  ];
  
  // Typing animation
  useEffect(() => {
    const prompt = demoPrompts[activeDemo];
    let index = 0;
    setTypedText('');
    
    const interval = setInterval(() => {
      if (index < prompt.length) {
        setTypedText(prompt.substring(0, index + 1));
        index++;
      } else {
        clearInterval(interval);
        // Move to next demo after pause
        setTimeout(() => {
          setActiveDemo((prev) => (prev + 1) % demoPrompts.length);
        }, 3000);
      }
    }, 50);
    
    return () => clearInterval(interval);
  }, [activeDemo]);

  return (
    <div className="min-h-screen bg-brand-bg">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/90 backdrop-blur-lg border-b border-white/5">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <Link href="/dark-factory" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                <Factory className="w-6 h-6 text-white" />
              </div>
              <span className="text-xl font-bold text-white">{VOCAB.factory}</span>
            </Link>
            
            <nav className="hidden md:flex items-center gap-8">
              <Link href="/" className="text-brand-primary hover:text-white transition-colors flex items-center gap-1">
                <ArrowRight className="w-4 h-4 rotate-180" />
                {BRAND.companyName}
              </Link>
              <Link href="/dark-factory/academy" className="text-sky-400 hover:text-white transition-colors font-medium flex items-center gap-1">
                <GraduationCap className="w-4 h-4" />
                Academy
              </Link>
              <Link href="/dark-factory/docs" className="text-gray-400 hover:text-white transition-colors">
                Docs
              </Link>
              <Link href="/dark-factory/pricing" className="text-gray-400 hover:text-white transition-colors">
                Pricing
              </Link>
              <Link href="/dark-factory#features" className="text-gray-400 hover:text-white transition-colors">
                Features
              </Link>
            </nav>
            
            <div className="flex items-center gap-4">
              <Link
                href="/dark-factory/login"
                className="text-gray-300 hover:text-white transition-colors"
              >
                Sign In
              </Link>
              <Link
                href="/dark-factory/signup"
                className="px-5 py-2 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-lg text-white font-medium hover:opacity-90 transition-opacity"
              >
                Get Started Free
              </Link>
            </div>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="pt-32 pb-20 px-6 relative overflow-hidden">
        {/* Background Effects */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none">
          <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-brand-deep/10 rounded-full blur-3xl" />
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-brand-secondary/10 rounded-full blur-3xl" />
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-brand-deep/5 to-transparent rounded-full" />
        </div>
        
        <div className="max-w-7xl mx-auto relative z-10">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Left: Copy */}
            <motion.div
              initial={{ opacity: 1, x: 0 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6 }}
            >
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 mb-6">
                <Sparkles className="w-4 h-4 text-brand" />
                <span className="text-sm" style={{ color: '#d1d5db' }}>The AI Factory That Builds Itself</span>
              </div>
              
              <h1 className="text-5xl lg:text-6xl font-bold mb-6">
                <span style={{ color: '#ffffff' }}>From </span>
                <span className="bg-gradient-to-r from-brand to-brand-secondary-light bg-clip-text text-transparent">Prompt</span>
                <br />
                <span style={{ color: '#ffffff' }}>to </span>
                <span className="bg-gradient-to-r from-brand-secondary-light to-brand bg-clip-text text-transparent">Production</span>
              </h1>
              
              <p className="text-xl text-gray-400 mb-8 leading-relaxed">
                Generate production-ready APIs, UIs, databases, and tests from natural language.{' '}
                {VOCAB.factory} learns your patterns and ships code that looks like your team wrote it.
              </p>
              
              <div className="flex flex-wrap gap-4 mb-10">
                <Link
                  href="/dark-factory/signup"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-lg text-white font-semibold hover:opacity-90 transition-opacity"
                >
                  Start Generating Free
                  <ArrowRight className="w-5 h-5" />
                </Link>
                <Link
                  href="/dark-factory/docs"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-white/5 border border-white/10 rounded-lg text-white font-medium hover:bg-white/10 transition-colors"
                >
                  <Terminal className="w-5 h-5" />
                  View API Docs
                </Link>
                <Link
                  href="/sales"
                  className="inline-flex items-center gap-2 px-6 py-3 bg-white/5 border border-brand-deep/30 rounded-lg font-medium hover:bg-white/10 transition-colors"
                  style={{ color: '#ffffff' }}
                >
                  <Play className="w-5 h-5 text-brand" />
                  How It Works
                </Link>
              </div>
              
              {/* Trust Badges */}
              <div className="flex flex-wrap items-center gap-6 text-sm">
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-4 h-4" style={{ color: '#22c55e' }} />
                  <span style={{ color: '#9ca3af' }}>50 free generations/mo</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-4 h-4" style={{ color: '#22c55e' }} />
                  <span style={{ color: '#9ca3af' }}>No credit card required</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle className="w-4 h-4" style={{ color: '#22c55e' }} />
                  <span style={{ color: '#9ca3af' }}>Deploy in seconds</span>
                </div>
              </div>
            </motion.div>
            
            {/* Right: Interactive Demo */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="relative"
            >
              <div className="glass-card rounded-2xl overflow-hidden border border-white/10">
                {/* Terminal Header */}
                <div className="flex items-center gap-2 px-4 py-3 bg-black/30 border-b border-white/5">
                  <div className="w-3 h-3 rounded-full bg-red-500" />
                  <div className="w-3 h-3 rounded-full bg-yellow-500" />
                  <div className="w-3 h-3 rounded-full bg-green-500" />
                  <span className="ml-4 text-sm text-gray-400">dark-factory generate</span>
                </div>
                
                {/* Terminal Body */}
                <div className="p-6 font-mono text-sm">
                  <div className="flex items-start gap-2 mb-4">
                    <span className="text-brand">$</span>
                    <span className="text-white">{typedText}</span>
                    <span className="w-2 h-5 bg-brand animate-pulse" />
                  </div>
                  
                  {/* Output Preview */}
                  <motion.div
                    key={activeDemo}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: 2.5 }}
                    className="mt-6 space-y-3"
                  >
                    <div className="flex items-center gap-2 text-green-400">
                      <CheckCircle className="w-4 h-4" />
                      <span>Generated API routes (4 files)</span>
                    </div>
                    <div className="flex items-center gap-2 text-green-400">
                      <CheckCircle className="w-4 h-4" />
                      <span>Generated database models</span>
                    </div>
                    <div className="flex items-center gap-2 text-green-400">
                      <CheckCircle className="w-4 h-4" />
                      <span>Generated TypeScript types</span>
                    </div>
                    <div className="flex items-center gap-2 text-green-400">
                      <CheckCircle className="w-4 h-4" />
                      <span>Generated test suite (12 tests)</span>
                    </div>
                    <div className="flex items-center gap-2 text-brand-secondary-light mt-4">
                      <Rocket className="w-4 h-4" />
                      <span>Ready to deploy →</span>
                    </div>
                  </motion.div>
                </div>
              </div>
              
              {/* Floating badges */}
              <div className="absolute -top-4 -right-4 px-3 py-1.5 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-full text-white text-xs font-medium">
                Live Demo
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 px-6 border-y border-white/5">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
            {[
              { value: '10x', label: 'Faster Development', icon: Zap },
              { value: '85%', label: 'Success Rate', icon: CheckCircle },
              { value: '30s', label: 'Avg. Generation Time', icon: Clock },
              { value: '1000+', label: 'Developers', icon: Users },
            ].map((stat, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="text-center"
              >
                <stat.icon className="w-8 h-8 text-brand mx-auto mb-3" />
                <div className="text-3xl font-bold text-white mb-1">{stat.value}</div>
                <div className="text-gray-400 text-sm">{stat.label}</div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Academy Banner */}
      <section className="py-12 px-6">
        <div className="max-w-5xl mx-auto">
          <Link href="/dark-factory/academy" className="block group">
            <div className="relative overflow-hidden rounded-2xl border border-sky-500/30 bg-gradient-to-r from-sky-500/10 via-orange-500/10 to-sky-500/10 p-8 hover:border-sky-400/50 transition-all duration-300">
              <div className="absolute top-0 right-0 w-64 h-64 bg-sky-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
              <div className="relative flex items-center justify-between gap-6 flex-wrap">
                <div className="flex items-center gap-5">
                  <div className="w-16 h-16 rounded-2xl bg-sky-500/20 flex items-center justify-center shrink-0">
                    <GraduationCap className="w-8 h-8 text-sky-400" />
                  </div>
                  <div>
                    <h3 className="text-2xl font-bold text-white group-hover:text-sky-400 transition-colors">
                      The Hearth Academy
                    </h3>
                    <p className="text-gray-400 mt-1">
                      10 video lectures by Professor Tesa — from intake pipelines to capstone projects.
                      Learn autonomous code generation from the AI who built it.
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-2 px-6 py-3 bg-sky-500/20 rounded-xl text-sky-400 font-medium group-hover:bg-sky-500/30 transition-colors shrink-0">
                  <Play className="w-5 h-5" /> Start Learning
                  <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </div>
              </div>
            </div>
          </Link>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-6">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl font-bold text-white mb-4">Full-Stack in One Prompt</h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              {VOCAB.factory} doesn&apos;t just autocomplete—it generates complete, working features
            </p>
          </motion.div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: Code,
                title: 'API Routes',
                description: 'RESTful endpoints with validation, error handling, and documentation',
                color: 'from-brand-deep to-blue-500',
              },
              {
                icon: Database,
                title: 'Database Models',
                description: 'Prisma schemas with relations, indexes, and migrations ready',
                color: 'from-brand-secondary to-pink-500',
              },
              {
                icon: Layout,
                title: 'React Components',
                description: 'TypeScript components with Tailwind styling and state management',
                color: 'from-brand-deep to-green-500',
              },
              {
                icon: TestTube,
                title: 'Test Suites',
                description: 'Unit and integration tests with edge case coverage',
                color: 'from-orange-500 to-red-500',
              },
              {
                icon: GitBranch,
                title: 'Type Definitions',
                description: 'Complete TypeScript types for all generated code',
                color: 'from-blue-500 to-indigo-500',
              },
              {
                icon: Rocket,
                title: 'One-Click Deploy',
                description: 'Deploy to preview or production directly from the interface',
                color: 'from-green-500 to-brand-deep',
              },
            ].map((feature, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1 }}
                className="glass-card p-6 rounded-xl border border-white/5 hover:border-white/10 transition-colors group"
              >
                <div className={`w-12 h-12 rounded-lg bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform`}>
                  <feature.icon className="w-6 h-6 text-white" />
                </div>
                <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
                <p className="text-gray-400 text-sm leading-relaxed">{feature.description}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 px-6 bg-gradient-to-b from-transparent via-brand-deep/5 to-transparent">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-4xl font-bold text-white mb-4">How It Works</h2>
            <p className="text-xl text-gray-400 max-w-2xl mx-auto">
              From idea to deployed code in three simple steps
            </p>
          </motion.div>
          
          <div className="grid md:grid-cols-3 gap-8">
            {[
              {
                step: '01',
                title: 'Describe',
                description: `Tell ${VOCAB.factory} what you need in plain English. Be as detailed or as vague as you want.`,
                icon: Terminal,
              },
              {
                step: '02',
                title: 'Generate',
                description: `Watch as ${VOCAB.factory} generates APIs, models, components, and tests—all validated automatically.`,
                icon: Cpu,
              },
              {
                step: '03',
                title: 'Deploy',
                description: 'Review the code, tweak if needed, and deploy with one click. Done.',
                icon: Rocket,
              },
            ].map((step, i) => (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.2 }}
                className="relative"
              >
                <div className="glass-card p-8 rounded-2xl border border-white/5 h-full">
                  <div className="text-6xl font-bold text-white/5 absolute top-4 right-6">
                    {step.step}
                  </div>
                  <step.icon className="w-10 h-10 text-brand mb-6" />
                  <h3 className="text-2xl font-bold text-white mb-3">{step.title}</h3>
                  <p className="text-gray-400 leading-relaxed">{step.description}</p>
                </div>
                {i < 2 && (
                  <div className="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2">
                    <ChevronRight className="w-8 h-8 text-brand-deep/30" />
                  </div>
                )}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Integration Section */}
      <section className="py-20 px-6">
        <div className="max-w-7xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
            >
              <h2 className="text-4xl font-bold text-white mb-6">
                Standalone or Integrated—Your Choice
              </h2>
              <p className="text-lg text-gray-400 mb-8 leading-relaxed">
                {VOCAB.factory} works as a powerful standalone code generation platform.
                Need more? Integrate with {BRAND.companyName} for AI-powered operations management.
              </p>
              
              <div className="space-y-4">
                {[
                  { title: 'Standalone Mode', desc: 'Independent product with own auth, billing, and workspace' },
                  { title: 'FF Integration', desc: 'Unified experience with agents, control center, and events' },
                  { title: 'API Access', desc: 'Embed code generation into your own tools and workflows' },
                  { title: 'White-Label', desc: 'Enterprise: rebrand and resell as your own product' },
                ].map((item, i) => (
                  <div key={i} className="flex items-start gap-3">
                    <CheckCircle className="w-5 h-5 text-brand mt-0.5 flex-shrink-0" />
                    <div>
                      <span className="text-white font-medium">{item.title}</span>
                      <span className="text-gray-400"> — {item.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </motion.div>
            
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              className="glass-card p-8 rounded-2xl border border-white/10"
            >
              <div className="flex items-center gap-4 mb-6">
                <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                  <Factory className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-white">Part of Foundry Familiars</h3>
                  <p className="text-sm text-gray-400">{BRAND.companyName} ecosystem</p>
                </div>
              </div>
              
              <div className="space-y-4">
                <div className="p-4 rounded-lg bg-white/5 border border-white/5">
                  <div className="flex items-center gap-3">
                    <Bot className="w-5 h-5 text-brand-secondary-light" />
                    <span className="text-white">AI Agents</span>
                  </div>
                  <p className="text-sm text-gray-400 mt-1 ml-8">Autonomous operations workers</p>
                </div>
                <div className="p-4 rounded-lg bg-brand-deep/10 border border-brand-deep/20">
                  <div className="flex items-center gap-3">
                    <Factory className="w-5 h-5 text-brand" />
                    <span className="text-white font-semibold">{VOCAB.factory}</span>
                    <span className="text-xs px-2 py-0.5 bg-brand-deep/20 rounded-full text-brand-light">You are here</span>
                  </div>
                  <p className="text-sm text-gray-400 mt-1 ml-8">AI-powered code generation</p>
                </div>
                <div className="p-4 rounded-lg bg-white/5 border border-white/5">
                  <div className="flex items-center gap-3">
                    <Shield className="w-5 h-5 text-green-400" />
                    <span className="text-white">Control Center</span>
                  </div>
                  <p className="text-sm text-gray-400 mt-1 ml-8">Unified operations dashboard</p>
                </div>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-6">
        <div className="max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="glass-card p-12 rounded-3xl border border-white/10 text-center relative overflow-hidden"
          >
            <div className="absolute inset-0 bg-gradient-to-r from-brand-deep/10 via-brand-secondary/10 to-brand-deep/10" />
            
            <div className="relative z-10">
              <Factory className="w-16 h-16 text-brand mx-auto mb-6" />
              <h2 className="text-4xl font-bold text-white mb-4">
                Start Generating Code Today
              </h2>
              <p className="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">
                50 free generations per month. No credit card required.
                See what {VOCAB.factory} can build for you.
              </p>
              <div className="flex flex-wrap justify-center gap-4">
                <Link
                  href="/dark-factory/signup"
                  className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-brand-deep to-brand-secondary-deep rounded-xl text-white font-semibold text-lg hover:opacity-90 transition-opacity"
                >
                  Get Started Free
                  <ArrowRight className="w-5 h-5" />
                </Link>
                <Link
                  href="/dark-factory/docs"
                  className="inline-flex items-center gap-2 px-8 py-4 bg-white/5 border border-white/10 rounded-xl text-white font-semibold text-lg hover:bg-white/10 transition-colors"
                >
                  Read the Docs
                </Link>
              </div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 px-6 border-t border-white/5">
        <div className="max-w-7xl mx-auto">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-deep to-brand-secondary-deep flex items-center justify-center">
                <Factory className="w-4 h-4 text-white" />
              </div>
              <span className="text-white font-semibold">{VOCAB.factory}</span>
              <span className="text-gray-500">|</span>
              <span className="text-gray-400 text-sm">Part of {BRAND.companyName}</span>
            </div>
            
            <div className="flex items-center gap-6 text-sm text-gray-400">
              <Link href="/dark-factory/docs" className="hover:text-white transition-colors">
                Documentation
              </Link>
              <Link href="/dark-factory/pricing" className="hover:text-white transition-colors">
                Pricing
              </Link>
              <Link href="/" className="hover:text-white transition-colors">
                {BRAND.companyName}
              </Link>
            </div>
            
            <div className="text-sm text-gray-500">
              © 2026 {BRAND.companyName}. All rights reserved.
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
