'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { useRouter } from 'next/navigation';
import { 
  Star, 
  StarHalf,
  Mail, 
  ArrowRight, 
  Globe, 
  Database, 
  Cpu, 
  ShieldCheck, 
  Zap, 
  BarChart3, 
  Users,
  CheckCircle2,
  ChevronRight,
  Search,
  MapPin,
  Lock
} from 'lucide-react';

export default function LandingPage() {
  const router = useRouter();
  const [email, setEmail] = React.useState('');

  const handleCreateAccount = (e: React.FormEvent) => {
    e.preventDefault();
    if (email.trim()) {
      router.push('/dashboard');
    }
  };

  const fadeInUp: any = {
    hidden: { opacity: 0, y: 20 },
    visible: { 
      opacity: 1, 
      y: 0, 
      transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] } 
    }
  };

  return (
    <div className="relative min-h-screen bg-white text-slate-900 selection:bg-black selection:text-white font-sans">
      
      {/* --- HERO SECTION --- */}
      <section className="relative min-h-[90vh] lg:h-screen flex flex-col overflow-hidden">
        {/* Background Video */}
        <div className="absolute inset-0 z-0 h-full w-full pointer-events-none">
          <video autoPlay muted loop playsInline className="w-full h-full object-cover [transform:scaleY(-1)] opacity-40">
            <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260302_085640_276ea93b-d7da-4418-a09b-2aa5b490e838.mp4" type="video/mp4" />
          </video>
          <div className="absolute inset-0 bg-gradient-to-b from-white/20 via-white/80 to-white" />
        </div>

      {/* Navigation */}
        <nav className="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
          <div className="mx-auto w-full max-w-[1240px] px-6 lg:px-8 py-4 lg:py-6 flex items-center justify-between glass-morphism rounded-b-2xl shadow-sm mt-4 mx-4 md:mx-auto">
            <div className="flex items-center gap-2.5 font-bold tracking-tight">
              <div className="h-7 w-7 rounded-lg bg-black flex items-center justify-center">
                <div className="h-2 w-2 rounded-full bg-white animate-pulse" />
              </div>
              <span className="text-xl tracking-tighter">LeadForge</span>
            </div>
            <div className="flex items-center gap-4 lg:gap-10">
              <div className="hidden lg:flex items-center gap-10 text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">
                <a href="#features" className="hover:text-black transition-colors">Intelligence</a>
                <a href="#process" className="hover:text-black transition-colors">The Forge</a>
                <a href="#pricing" className="hover:text-black transition-colors">Pricing</a>
              </div>
              <button 
                onClick={() => router.push('/dashboard')}
                className="px-5 py-2 lg:px-6 lg:py-2.5 rounded-full border border-slate-200 text-black hover:bg-slate-50 transition-all font-bold text-[12px] lg:text-[13px] uppercase tracking-wide"
              >
                Console Login
              </button>
            </div>
          </div>
        </nav>

        {/* Hero Content */}
        <div className="relative z-10 flex-1 flex flex-col items-center justify-center px-6 lg:px-8 text-center pt-32 pb-16 lg:pb-20">
          <motion.div
            initial="hidden"
            animate="visible"
            variants={{
              visible: { transition: { staggerChildren: 0.15 } }
            }}
            className="max-w-[1000px] flex flex-col items-center gap-6 lg:gap-8"
          >
            <motion.div variants={fadeInUp} className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/80 border border-slate-100 text-[10px] lg:text-[11px] font-bold text-slate-500 uppercase tracking-[0.2em] shadow-sm backdrop-blur-sm">
              <Zap className="w-3 h-3 text-emerald-500 fill-emerald-500" />
              <span>Neural Pipeline Active</span>
            </motion.div>

            <motion.h1 
              variants={fadeInUp}
              className="text-[42px] md:text-[64px] lg:text-[92px] leading-[0.95] font-medium tracking-[-0.04em] text-slate-900"
            >
              Premium <span className="font-serif italic text-[48px] md:text-[72px] lg:text-[110px] lowercase tracking-normal px-1 lg:px-2 text-gradient">intelligence</span> for teams
            </motion.h1>


            <motion.p 
              variants={fadeInUp}
              className="text-base md:text-lg lg:text-xl text-slate-500 max-w-[600px] leading-relaxed font-medium px-4 lg:px-0"
            >
              Architecting the future of B2B discovery. Streamline your workflow with AI-powered analytics and automated global scouting.
            </motion.p>

            <motion.form 
              variants={fadeInUp}
              onSubmit={handleCreateAccount}
              className="mt-4 flex flex-col sm:flex-row items-center justify-between p-1.5 sm:p-2 sm:pl-7 sm:h-[68px] bg-white border border-slate-100 rounded-[24px] sm:rounded-[40px] shadow-[0_20px_50px_rgba(0,0,0,0.05)] max-w-[520px] w-full group focus-within:ring-4 focus-within:ring-slate-100 transition-all gap-2 sm:gap-0"
            >
              <div className="flex items-center gap-4 text-slate-400 w-full overflow-hidden px-4 py-3 sm:py-0">
                <Mail className="h-5 w-5 shrink-0" />
                <input 
                  type="email" 
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="name@company.com" 
                  className="bg-transparent border-none outline-none text-slate-900 placeholder:text-slate-400 text-base font-medium w-full"
                />
              </div>
              <button 
                type="submit"
                className="bg-slate-900 text-white w-full sm:w-auto h-12 sm:h-full px-8 rounded-full text-[14px] lg:text-[15px] font-bold flex items-center justify-center gap-3 hover:bg-black transition-all shadow-lg shrink-0 active:scale-95"
              >
                Start Scouting
                <ArrowRight className="h-4 w-4" />
              </button>
            </motion.form>

            <motion.div variants={fadeInUp} className="flex flex-col lg:flex-row items-center gap-4 lg:gap-8 pt-4">
              <div className="flex -space-x-4">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="h-10 w-10 lg:h-12 lg:w-12 rounded-full border-[3px] border-white bg-slate-50 overflow-hidden shadow-md">
                    <img src={`/avatars/avatar_${i}.png`} alt={`Trust user ${i}`} className="h-full w-full object-cover" />
                  </div>
                ))}
              </div>
              <div className="hidden lg:block h-10 w-[1px] bg-slate-200/60" />
              <div className="flex flex-col items-center lg:items-start gap-1">
                <div className="flex items-center gap-1">
                  {[1, 2, 3, 4].map((s) => (
                    <Star key={s} className="h-4 w-4 lg:h-5 lg:w-5 fill-emerald-500 text-emerald-500" />
                  ))}
                  <StarHalf className="h-4 w-4 lg:h-5 lg:w-5 fill-emerald-500 text-emerald-500" />
                  <span className="ml-2 text-sm lg:text-lg font-bold text-slate-900 tracking-tight">4.9/5 from 2k+ scouts</span>
                </div>
                <span className="text-[10px] lg:text-[11px] text-slate-400 font-extrabold uppercase tracking-[0.2em] opacity-80">Trusted by industry titans</span>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </section>

      {/* --- LOGO WALL --- */}
      <section className="py-16 lg:py-24 bg-white border-y border-slate-50 overflow-hidden">
        <div className="mx-auto w-full max-w-[1240px] px-8">
          <p className="text-center text-[9px] lg:text-[10px] font-bold text-slate-300 uppercase tracking-[0.3em] mb-12">
            Integrated with the global cloud infrastructure
          </p>
          <div className="flex flex-wrap items-center justify-center gap-10 lg:gap-24 opacity-30 grayscale saturate-0 contrast-125">
            <span className="text-xl lg:text-2xl font-bold tracking-tighter">STRIPE</span>
            <span className="text-xl lg:text-2xl font-bold tracking-tighter">VERCEL</span>
            <span className="text-xl lg:text-2xl font-bold tracking-tighter">LINEAR</span>
            <span className="text-xl lg:text-2xl font-bold tracking-tighter">SUPABASE</span>
          </div>
        </div>
      </section>

      {/* --- FEATURES GRID --- */}
      <section id="features" className="py-20 lg:py-32 bg-[#fafafa]">
        <div className="mx-auto w-full max-w-[1240px] px-6 lg:px-8">
          <header className="max-w-2xl mb-16 lg:mb-24">
            <h2 className="text-[10px] lg:text-[11px] font-bold text-emerald-600 uppercase tracking-[0.3em] mb-4 lg:mb-6 text-center lg:text-left">The Intelligence Core</h2>
            <h3 className="font-serif text-[32px] lg:text-6xl text-slate-900 leading-tight text-center lg:text-left">
              Precision scouting tools designed for <span className="italic">modern</span> teams.
            </h3>
          </header>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
            <FeatureCard 
              icon={Globe}
              title="Global Search"
              description="Coordinate intelligence across 190+ countries with our high-latency regional extraction nodes."
              color="emerald"
            />
            <FeatureCard 
              icon={Cpu}
              title="Neural Harvesting"
              description="Autonomous data extraction that learns your ideal customer profile over the course of every search."
              color="blue"
            />
            <FeatureCard 
              icon={ShieldCheck}
              title="Identity Guard"
              description="Run deep investigations behind residential proxies to ensure your scouting remains undetected."
              color="purple"
            />
          </div>
        </div>
      </section>

      {/* --- THE FORGE PROCESS --- */}
      <section id="process" className="py-20 lg:py-32 bg-white overflow-hidden">
        <div className="mx-auto w-full max-w-[1240px] px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
            <div className="relative">
              <div className="absolute -left-10 -top-10 w-40 h-40 bg-emerald-50 rounded-full blur-3xl opacity-50" />
              
              <div className="relative space-y-10 lg:space-y-16">
                <ProcessStep 
                  number="01" 
                  title="Initialize Global Scout" 
                  desc="Input your parameters into the LeadForge engine. Our scouts begin by indexing verifiable geo-data." 
                />
                <ProcessStep 
                  number="02" 
                  title="Deep-Web Extraction" 
                  desc="Neural nodes harvest contact intelligence, social signals, and corporate infrastructure data." 
                />
                <ProcessStep 
                  number="03" 
                  title="Forge & Synchronize" 
                  desc="Data is unified, verified against 50+ markers, and synced to your preferred intelligence dashboard." 
                />
              </div>
            </div>

            <div className="relative group p-4">
               <div className="absolute inset-0 bg-slate-900 rounded-[32px] lg:rounded-[48px] rotate-2 scale-[1.02] opacity-[0.03] group-hover:rotate-1 transition-transform" />
               <div className="relative bg-white border border-slate-100 rounded-[32px] lg:rounded-[48px] p-3 lg:p-4 shadow-2xl">
                  <div className="aspect-[4/3] rounded-[24px] lg:rounded-[36px] bg-slate-50 border border-slate-100 overflow-hidden flex items-center justify-center">
                      <div className="flex flex-col items-center gap-6">
                        <div className="relative">
                          <div className="w-20 h-20 lg:w-24 lg:h-24 rounded-full border-4 border-emerald-100 flex items-center justify-center">
                             <div className="w-14 h-14 lg:w-16 lg:h-16 rounded-full bg-emerald-500 animate-pulse flex items-center justify-center">
                               <Database className="w-6 h-6 lg:w-8 lg:h-8 text-white" />
                             </div>
                          </div>
                        </div>
                        <div className="text-center space-y-1">
                          <p className="font-bold text-slate-900 text-sm lg:text-base">Synchronizing Data Node...</p>
                          <p className="text-[10px] font-bold text-slate-300 uppercase tracking-widest">Efficiency 99.8%</p>
                        </div>
                      </div>
                  </div>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* --- PRICING SECTION --- */}
      <section id="pricing" className="py-20 lg:py-32 bg-slate-900 text-white overflow-hidden relative">
        <div className="absolute top-0 right-0 w-[400px] lg:w-[800px] h-[400px] lg:h-[800px] bg-emerald-500/5 rounded-full blur-[80px] lg:blur-[120px]" />
        
        <div className="mx-auto w-full max-w-[1240px] px-6 lg:px-8 relative z-10">
          <header className="text-center mb-16 lg:mb-24 max-w-2xl mx-auto">
            <h2 className="text-[10px] lg:text-[11px] font-bold text-emerald-400 uppercase tracking-[0.3em] mb-4 lg:mb-6">Investment Protocols</h2>
            <h3 className="font-serif text-[32px] lg:text-6xl leading-tight">
              Flexible tiers for every <span className="italic">scouting</span> mission.
            </h3>
          </header>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
            <PricingCard 
              title="Individual Scout" 
              price="0" 
              desc="Perfect for single investigative tasks and exploration."
              features={['1,000 leads / month', 'Basic contact extraction', 'Single provider (Maps)']}
              onAction={() => router.push('/dashboard')}
            />
            <PricingCard 
              title="Agency Intelligence" 
              price="49" 
              featured 
              desc="The professional backbone for growing extraction teams."
              features={['25,000 leads / month', 'Deep-web harvesting', 'Multi-provider nodes', 'Priority neural verification']}
              onAction={() => router.push('/dashboard')}
            />
            <PricingCard 
              title="Enterprise Node" 
              price="Custom" 
              desc="Bespoken infrastructure for global intelligence giants."
              features={['Unlimited volume', 'Private extraction nodes', 'Custom API integration']}
              onAction={() => router.push('/dashboard')}
            />
          </div>
        </div>
      </section>

      {/* --- FINAL CTA --- */}
      <section className="py-20 lg:py-32 bg-white flex justify-center px-6 lg:px-8">
        <div className="w-full max-w-[1000px] bg-slate-50 border border-slate-100 rounded-[32px] lg:rounded-[48px] p-10 lg:p-24 text-center space-y-10 relative overflow-hidden">
           <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[300px] lg:w-[600px] h-[150px] lg:h-[300px] bg-blue-500/5 rounded-full blur-[100px]" />
           <div className="relative space-y-8">
             <h2 className="font-serif text-[32px] lg:text-7xl text-slate-900 leading-[1.1]">
                Ready to forge your <br className="hidden md:block" /> <span className="italic">intelligence</span> network?
             </h2>
             <p className="text-slate-500 text-sm lg:text-lg max-w-xl mx-auto font-medium">
                Join 2,000+ teams already utilizing LeadForge to architect their discovery process.
             </p>
             <button 
                onClick={() => router.push('/dashboard')}
                className="bg-black text-white px-8 lg:px-10 py-4 lg:py-5 rounded-full text-base lg:text-lg font-bold hover:scale-105 transition-all shadow-xl active:scale-95 flex items-center justify-center gap-4 mx-auto w-full sm:w-auto"
              >
               Access the Console
               <ArrowRight className="w-5 h-5" />
             </button>
           </div>
        </div>
      </section>

      {/* --- FOOTER --- */}
      <footer className="bg-white pt-16 lg:pt-24 pb-12 border-t border-slate-100">
        <div className="mx-auto w-full max-w-[1240px] px-6 lg:px-8">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-12 mb-16 lg:mb-20">
            <div className="lg:col-span-2 space-y-6">
              <div className="flex items-center gap-2.5 font-bold tracking-tight">
                <div className="h-6 w-6 rounded bg-black flex items-center justify-center">
                  <div className="h-1.5 w-1.5 rounded-full bg-white animate-pulse" />
                </div>
                <span className="text-lg">LeadForge</span>
              </div>
              <p className="text-sm text-slate-400 max-w-[280px] font-medium leading-relaxed">
                The high-performance extraction platform designed for research-heavy teams.
              </p>
            </div>
            <FooterColumn title="Product" links={['Intelligence', 'Pricing', 'Changelog']} />
            <FooterColumn title="Information" links={['About Us', 'Case Studies', 'Network Status']} />
            <FooterColumn title="Legal" links={['Privacy', 'Data Protection', 'Terms']} />
          </div>
          <div className="pt-10 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6">
            <p className="text-[10px] font-bold text-slate-300 uppercase tracking-widest text-center">
              © 2026 LeadForge Systems. All intelligence secured.
            </p>
            <div className="flex items-center gap-8 text-[10px] font-bold text-slate-300 uppercase tracking-widest">
              <a href="#" className="hover:text-black">Twitter</a>
              <a href="#" className="hover:text-black">GitHub</a>
              <a href="#" className="hover:text-black">LinkedIn</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

function FeatureCard({ icon: Icon, title, description, color }: any) {
  const colors: any = {
    emerald: 'bg-emerald-50 text-emerald-600 border-emerald-100',
    blue: 'bg-blue-50 text-blue-600 border-blue-100',
    purple: 'bg-purple-50 text-purple-600 border-purple-100'
  };

  return (
    <div className="p-8 lg:p-10 bg-white border border-slate-100 rounded-[24px] lg:rounded-[32px] hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)] hover:-translate-y-2 transition-all duration-500 group overflow-hidden relative">
      <div className={`w-12 h-12 lg:w-14 lg:h-14 rounded-2xl ${colors[color]} border flex items-center justify-center mb-6 lg:mb-8 group-hover:scale-110 transition-transform duration-500`}>
        <Icon className="w-5 h-5 lg:w-6 lg:h-6" />
      </div>
      <h4 className="text-lg lg:text-xl font-bold text-slate-900 mb-3 lg:mb-4">{title}</h4>
      <p className="text-slate-500 text-[13px] lg:text-sm leading-relaxed font-medium">
        {description}
      </p>
    </div>
  );
}

function ProcessStep({ number, title, desc }: any) {
  return (
    <div className="flex gap-6 lg:gap-8 group">
      <div className="text-[32px] lg:text-5xl font-serif text-slate-100 group-hover:text-emerald-500 transition-colors duration-700">
        {number}
      </div>
      <div className="space-y-1.5 lg:space-y-2 pt-1 lg:pt-2">
        <h4 className="font-bold text-slate-900 group-hover:text-emerald-800 transition-colors text-sm lg:text-base">{title}</h4>
        <p className="text-[12px] lg:text-[13px] text-slate-500 font-medium leading-relaxed max-w-sm">{desc}</p>
      </div>
    </div>
  );
}

function PricingCard({ title, price, featured, desc, features, onAction }: any) {
  return (
    <div className={`p-8 lg:p-10 rounded-[32px] lg:rounded-[40px] border flex flex-col items-start transition-all duration-500 relative ${
      featured 
      ? 'bg-emerald-600 border-emerald-500 shadow-[0_30px_60px_-12px_rgba(16,185,129,0.4)] lg:scale-[1.05] z-10' 
      : 'bg-slate-900 border-slate-800 hover:bg-slate-800 shadow-premium'
    }`}>
      {featured && (
        <div className="absolute top-6 right-8 bg-white/20 px-3 py-1 rounded-full text-[8px] font-extrabold uppercase tracking-widest text-white">
          Popular
        </div>
      )}
      <h3 className="text-[11px] font-bold opacity-70 uppercase tracking-[0.2em] mb-4 text-white">{title}</h3>
      <div className="flex items-baseline gap-1 mb-6 text-white">
        <span className="text-4xl lg:text-5xl font-serif italic">{price === 'Custom' ? '' : '$'}</span>
        <span className="text-5xl lg:text-6xl font-serif">{price === 'Custom' ? 'Call' : price}</span>
        {price !== 'Custom' && <span className="opacity-50 text-[12px] font-bold ml-2">/mo</span>}
      </div>
      <p className={`text-[13px] lg:text-sm mb-10 leading-relaxed font-medium ${featured ? 'text-white/90' : 'text-slate-400'}`}>
        {desc}
      </p>
      <div className="w-full space-y-4 mb-10 flex-1">
        {features.map((f: string) => (
          <div key={f} className="flex items-center gap-3 text-[13px] font-medium">
            <CheckCircle2 className={`w-3.5 h-3.5 shrink-0 ${featured ? 'text-white' : 'text-emerald-400'}`} />
            <span className={featured ? 'text-white' : 'text-slate-300'}>{f}</span>
          </div>
        ))}
      </div>
      <button 
        onClick={onAction}
        className={`w-full py-4 lg:py-5 rounded-full font-bold text-[12px] lg:text-sm transition-all active:scale-95 ${
          featured ? 'bg-white text-emerald-600 hover:bg-emerald-50' : 'bg-slate-800 text-white hover:bg-slate-700 border border-slate-700'
        }`}
      >
        Subscribe to Protocol
      </button>
    </div>
  );
}


function FooterColumn({ title, links }: any) {
  return (
    <div className="space-y-6">
      <h4 className="text-[10px] font-extrabold text-slate-900 uppercase tracking-[0.3em]">{title}</h4>
      <div className="flex flex-col gap-4">
        {links.map((link: string) => (
          <a key={link} href="#" className="text-sm text-slate-400 hover:text-black font-medium transition-colors">
            {link}
          </a>
        ))}
      </div>
    </div>
  );
}
