'use client'
import { useState, useRef } from 'react'
import Link from 'next/link'
import { motion, AnimatePresence, useInView } from 'framer-motion'
import {
  Globe, Brain, Shield, Zap, BarChart3, Lock,
  ArrowRight, ChevronDown, ChevronUp,
  Target, Users, Gem, CheckCircle2,
  Terminal, Play, Cpu,
} from 'lucide-react'

/* ─── FEATURES ──────────────────────────────────────────────────── */
const FEATURES = [
  {
    icon: Globe,
    title: 'Multi-Site Coverage',
    desc: 'Watches eBay, HiBid, ShopGoodwill, and 12+ more simultaneously. Add any new site in seconds with AI-generated selectors.',
    accent: '#06b6d4',
  },
  {
    icon: Brain,
    title: 'AI-First Filtering',
    desc: 'Write in plain English what a perfect lot looks like. The AI reads every title and decides match or reject — with a clear reason.',
    accent: '#a78bfa',
  },
  {
    icon: Shield,
    title: 'Stealth Engine',
    desc: '30+ fingerprint patches, Bezier mouse curves, human typing rhythms. Auction sites see a person, not a bot.',
    accent: '#00e87b',
  },
  {
    icon: Zap,
    title: 'Instant Alerts',
    desc: 'Telegram, Discord, and Gmail in real time. Multi-interval closing alerts at 60, 30, 10, 5 minutes before the hammer falls.',
    accent: '#fbbf24',
  },
  {
    icon: BarChart3,
    title: 'Smart Scoring',
    desc: 'Database-backed heuristic rules boost or penalise every lot. Fully editable. Or disable entirely for pure AI mode.',
    accent: '#3b82f6',
  },
  {
    icon: Lock,
    title: 'Privacy-First',
    desc: 'Runs entirely on your machine. SQLite or PostgreSQL. Your hunting intelligence stays yours — no cloud fees, no data leaks.',
    accent: '#f43f5e',
  },
]

/* ─── STEPS ─────────────────────────────────────────────────────── */
const STEPS = [
  { n: '01', title: 'Add Targets', desc: 'Define keywords and tell the AI what a good lot looks like in plain English.', color: '#00e87b' },
  { n: '02', title: 'Engine Runs', desc: 'Stealth browsers scan every site on a schedule. You do nothing.', color: '#06b6d4' },
  { n: '03', title: 'AI Filters', desc: 'Every lot is read and scored. Junk is rejected. Only good matches continue.', color: '#a78bfa' },
  { n: '04', title: 'You Win', desc: 'Instant alerts fire. You bid on the original site. You capture deals others miss.', color: '#fbbf24' },
]

/* ─── AUDIENCE ──────────────────────────────────────────────────── */
const AUDIENCE = [
  { icon: Target, title: 'Power Buyers & Flippers', desc: 'See every under-priced lot before competitors do. Never miss a liquidation deal again.', accent: '#00e87b' },
  { icon: Gem, title: 'Collectors & Deal Hunters', desc: 'AI precision — only lots that match your exact criteria. Zero noise, zero manual browsing.', accent: '#a78bfa' },
  { icon: Users, title: 'Teams & Agencies', desc: 'Monitor multiple platforms and regions without dedicating staff hours to manual searching.', accent: '#06b6d4' },
]

/* ─── FAQ ───────────────────────────────────────────────────────── */
const FAQ = [
  { q: 'Does Ghost Node place bids for me?', a: 'No. Ghost Node is a pure intelligence layer — it monitors, filters, scores, and alerts you. You place bids yourself on the original site. This keeps you in full control.' },
  { q: 'Which auction sites are supported?', a: 'eBay UK, eBay US, HiBid, and ShopGoodwill work out of the box. 12 more sites (Invaluable, BidSpotter, Catawiki, LiveAuctioneers, and more) are ready to configure. Any new site can be added with AI-generated selectors.' },
  { q: 'How does the AI filter work?', a: 'Per keyword, you write a natural-language description — e.g. "actual Samsung tablet device, not cases or accessories". The AI reads every lot title and returns match/reject plus a human-readable reason you can review.' },
  { q: 'Is this allowed by auction sites?', a: "Ghost Node behaves exactly like a human browser: slow scrolling, randomised mouse movement, realistic typing. You are solely responsible for each platform's terms of service." },
  { q: 'Will it run 24/7?', a: 'Yes — Ghost Node runs as a background Python process with a configurable scrape window or continuously. Failed sites auto-enter cooldown and retry. The engine is self-healing.' },
]

/* ─── FAKE LOTS ─────────────────────────────────────────────────── */
const LOTS = [
  { time: '02:14', title: 'Samsung Galaxy Tab S10 FE 256GB', site: 'eBay UK', price: '£89', ok: true, score: '+74' },
  { time: '02:11', title: 'Apple iPad Pro 12.9" M2 128GB', site: 'HiBid', price: '$210', ok: true, score: '+88' },
  { time: '02:08', title: 'iPad protective case lot ×12', site: 'ShopGoodwill', price: '$14', ok: false, score: '−22' },
  { time: '02:05', title: 'Microsoft Surface Pro 9 i5 16GB', site: 'eBay US', price: '$380', ok: true, score: '+61' },
  { time: '02:01', title: 'Lenovo ThinkPad X1 Carbon Gen 11', site: 'HiBid', price: '$445', ok: true, score: '+55' },
]

/* ─── SMALL COMPONENTS ──────────────────────────────────────────── */

function GradientText({ children, from = '#00e87b', via = '#06b6d4', to = '#a78bfa' }: {
  children: React.ReactNode; from?: string; via?: string; to?: string
}) {
  return (
    <span style={{
      background: `linear-gradient(135deg, ${from} 0%, ${via} 50%, ${to} 100%)`,
      WebkitBackgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      backgroundClip: 'text',
      backgroundSize: '200%',
      animation: 'gradient-flow 5s ease infinite',
      display: 'inline',
    }}>
      {children}
    </span>
  )
}

function GlowOrbs() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div className="absolute top-[-10%] left-[10%] w-[700px] h-[700px] rounded-full opacity-[0.12]"
        style={{ background: 'radial-gradient(circle, #00e87b 0%, transparent 65%)', filter: 'blur(80px)', animation: 'float-orb 24s ease-in-out infinite' }} />
      <div className="absolute top-[30%] right-[-10%] w-[600px] h-[600px] rounded-full opacity-[0.10]"
        style={{ background: 'radial-gradient(circle, #a78bfa 0%, transparent 65%)', filter: 'blur(80px)', animation: 'float-orb 30s ease-in-out infinite reverse' }} />
      <div className="absolute bottom-[-10%] left-[40%] w-[500px] h-[500px] rounded-full opacity-[0.08]"
        style={{ background: 'radial-gradient(circle, #06b6d4 0%, transparent 65%)', filter: 'blur(70px)', animation: 'float-orb 20s ease-in-out infinite 4s' }} />
    </div>
  )
}

function LiveTerminal() {
  return (
    <div
      className="relative rounded-3xl overflow-hidden"
      style={{
        background: 'linear-gradient(145deg, rgba(10,15,30,0.97), rgba(5,5,16,0.99))',
        border: '1px solid rgba(0,232,123,0.15)',
        boxShadow: '0 0 80px rgba(0,232,123,0.07), 0 60px 120px rgba(0,0,0,0.6)',
        transform: 'perspective(1000px) rotateY(-3deg) rotateX(2deg)',
      }}
    >
      {/* Top glow line */}
      <div className="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-g-green/50 to-transparent" />

      {/* Window chrome */}
      <div className="flex items-center justify-between px-5 py-3.5 border-b border-g-border/20 bg-g-raised/10">
        <div className="flex items-center gap-2">
          <span className="w-3 h-3 rounded-full bg-[#ff5f56]" />
          <span className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
          <span className="w-3 h-3 rounded-full bg-[#27c93f]" />
          <span className="ml-3 text-[11px] text-g-faint/60 font-mono">ghost-node · engine · live</span>
        </div>
        <div className="flex items-center gap-1.5">
          <span className="w-2 h-2 rounded-full bg-g-green"
            style={{ boxShadow: '0 0 8px #00e87b', animation: 'pulse-ring 2s ease-out infinite' }} />
          <span className="text-[10px] text-g-green font-black tracking-widest font-mono">SCANNING</span>
        </div>
      </div>

      {/* Status bar */}
      <div className="flex items-center gap-4 px-5 py-2 bg-g-green/3 border-b border-g-border/10">
        <div className="flex items-center gap-1.5 text-[10px] text-g-green font-mono">
          <Cpu size={10} />
          <span>Engine Active</span>
        </div>
        <div className="text-[10px] text-g-faint/50 font-mono">3 keywords · 4 sites · cycle 2min</div>
      </div>

      {/* Table header */}
      <div className="grid grid-cols-[54px_1fr_80px_58px_40px] gap-2 px-5 py-2 bg-g-raised/15">
        {['TIME', 'LOT TITLE', 'SITE', 'PRICE', 'AI'].map(h => (
          <span key={h} className="text-[9px] font-black uppercase tracking-[0.15em] text-g-faint/40">{h}</span>
        ))}
      </div>

      {/* Rows */}
      {LOTS.map((lot, i) => (
        <motion.div
          key={i}
          initial={{ opacity: 1, x: -8 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ delay: 0.5 + i * 0.14 }}
          className={`grid grid-cols-[54px_1fr_80px_58px_40px] gap-2 px-5 py-3 border-b border-g-border/8 last:border-0 group transition-all duration-200 ${i === 0 ? 'bg-g-green/4' : 'hover:bg-g-raised/20'}`}
        >
          <span className="text-[10px] text-g-faint/40 font-mono tabular-nums">{lot.time}</span>
          <span className={`text-[11px] font-semibold truncate transition-colors ${i === 0 ? 'text-g-green' : 'text-g-text group-hover:text-g-green'}`}>
            {lot.title}
          </span>
          <span className="text-[10px] text-g-muted/80 truncate">{lot.site}</span>
          <span className="text-[12px] font-black text-g-text font-mono tabular-nums">{lot.price}</span>
          <span className={`text-[12px] font-black ${lot.ok ? 'text-g-green' : 'text-g-red'}`}>
            {lot.ok ? '✓' : '✗'}
          </span>
        </motion.div>
      ))}

      {/* Prompt */}
      <div className="flex items-center gap-2 px-5 py-3.5">
        <Terminal size={12} className="text-g-green" />
        <span className="text-[10px] text-g-green font-mono">ghost@node ~ $</span>
        <span className="w-2 h-4 bg-g-green rounded-[1px]"
          style={{ animation: 'glow-pulse 1s ease-in-out infinite' }} />
      </div>
    </div>
  )
}

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false)
  return (
    <motion.div
      whileHover={{ y: -1 }}
      transition={{ duration: 0.15 }}
      className="g-card cursor-pointer overflow-hidden"
      onClick={() => setOpen(o => !o)}
    >
      <div className="flex items-start justify-between gap-4 px-6 py-5">
        <p className="text-[14px] font-semibold text-g-text leading-snug">{q}</p>
        <motion.span
          animate={{ rotate: open ? 180 : 0 }}
          transition={{ duration: 0.2 }}
          className="shrink-0 mt-0.5 text-g-faint"
        >
          {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
        </motion.span>
      </div>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0 }}
            animate={{ height: 'auto' }}
            exit={{ height: 0 }}
            transition={{ duration: 0.22, ease: 'easeInOut' }}
            className="overflow-hidden"
          >
            <p className="px-6 pb-5 text-[13px] text-g-muted leading-relaxed border-t border-g-border/20 pt-4">
              {a}
            </p>
          </motion.div>
        )}
      </AnimatePresence>
    </motion.div>
  )
}

/* ─── MAIN PAGE ─────────────────────────────────────────────────── */

export default function LandingPage() {
  const featRef = useRef(null)
  const stepsRef = useRef(null)
  const audRef = useRef(null)
  const featIn = useInView(featRef, { once: true, margin: '-60px' })
  const stepsIn = useInView(stepsRef, { once: true, margin: '-60px' })
  const audIn = useInView(audRef, { once: true, margin: '-60px' })

  return (
    <div className="-mt-8 -mx-6 overflow-x-hidden">

      {/* ══ HERO ════════════════════════════════════════════════════ */}
      <section className="relative min-h-screen flex items-center px-6 xl:px-20">
        <GlowOrbs />

        {/* Dot grid */}
        <div className="absolute inset-0 opacity-[0.025]"
          style={{ backgroundImage: 'radial-gradient(circle, #8896b8 1px, transparent 1px)', backgroundSize: '28px 28px' }} />

        <div className="relative z-10 w-full max-w-[1400px] mx-auto py-24">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_500px] gap-16 xl:gap-24 items-center">

            {/* LEFT: copy */}
            <div className="space-y-8 max-w-2xl">

              {/* Badge */}
              <motion.div
                initial={{ opacity: 1, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-g-green/6 border border-g-green/20 w-fit"
              >
                <span className="w-2 h-2 rounded-full bg-g-green shrink-0"
                  style={{ boxShadow: '0 0 8px #00e87b', animation: 'pulse-ring 2s ease-out infinite' }} />
                <span className="text-[11px] font-black text-g-green tracking-[0.12em] uppercase">
                  Ghost Node v2.7 · System Active
                </span>
              </motion.div>

              {/* H1 */}
              <motion.div
                initial={{ opacity: 1, y: 24 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.06, duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
              >
                <h1 className="text-[54px] md:text-[68px] xl:text-[82px] font-black tracking-[-0.05em] leading-[0.9]">
                  <span className="text-g-text block">The Auction</span>
                  <span className="text-g-text block">Sniper That</span>
                  <GradientText>Never Sleeps.</GradientText>
                </h1>
              </motion.div>

              {/* Subtitle */}
              <motion.p
                initial={{ opacity: 1, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.14, duration: 0.5 }}
                className="text-[18px] text-g-muted leading-relaxed max-w-[500px] font-light"
              >
                Ghost Node monitors dozens of auction sites in real time, scores every lot with AI,
                and alerts you the moment a real deal appears — before anyone else sees it.
              </motion.p>

              {/* CTAs */}
              <motion.div
                initial={{ opacity: 1, y: 12 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.22, duration: 0.4 }}
                className="flex flex-wrap items-center gap-4"
              >
                <Link href="/dashboard">
                  <motion.button
                    whileHover={{ scale: 1.04, y: -2 }}
                    whileTap={{ scale: 0.96 }}
                    className="inline-flex items-center gap-2.5 h-13 px-8 rounded-2xl font-bold text-[15px] text-black cursor-pointer"
                    style={{
                      height: 52,
                      background: 'linear-gradient(135deg, #00e87b, #06b6d4)',
                      boxShadow: '0 0 40px rgba(0,232,123,0.35), 0 8px 32px rgba(0,0,0,0.4)',
                    }}
                  >
                    <Play size={15} />
                    Enter Dashboard
                  </motion.button>
                </Link>
                <a href="#how-it-works">
                  <motion.button
                    whileHover={{ scale: 1.04, y: -1 }}
                    whileTap={{ scale: 0.96 }}
                    className="g-btn inline-flex items-center gap-2"
                    style={{ height: 52, paddingLeft: '1.75rem', paddingRight: '1.75rem', fontSize: 15 }}
                  >
                    How It Works
                    <ArrowRight size={14} />
                  </motion.button>
                </a>
              </motion.div>

              {/* Stats */}
              <motion.div
                initial={{ opacity: 1 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.3 }}
                className="flex flex-wrap gap-x-8 gap-y-3 pt-2"
              >
                {[
                  { v: '12+', l: 'Auction sites' },
                  { v: '42', l: 'API endpoints' },
                  { v: '30+', l: 'Stealth patches' },
                  { v: '∞', l: 'Lots monitored' },
                ].map(s => (
                  <div key={s.l} className="flex flex-col">
                    <span className="text-[22px] font-black text-g-text leading-none tabular-nums">{s.v}</span>
                    <span className="text-[11px] text-g-faint mt-1 font-medium">{s.l}</span>
                  </div>
                ))}
              </motion.div>
            </div>

            {/* RIGHT: terminal */}
            <motion.div
              initial={{ opacity: 1, x: 24, scale: 0.97 }}
              animate={{ opacity: 1, x: 0, scale: 1 }}
              transition={{ delay: 0.2, duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
              className="hidden lg:block"
            >
              <LiveTerminal />
            </motion.div>
          </div>
        </div>
      </section>

      {/* ══ PLATFORM STRIP ══════════════════════════════════════════ */}
      <div className="relative border-y border-g-border/25 bg-g-surface/15 py-5 overflow-hidden">
        <div className="flex flex-wrap items-center justify-center gap-8 px-8">
          {['eBay UK', 'eBay US', 'HiBid', 'ShopGoodwill', 'Invaluable', 'BidSpotter', 'Catawiki', 'LiveAuctioneers', 'Proxibid', '+ more'].map(s => (
            <span key={s} className="text-[11px] font-bold text-g-faint/40 tracking-[0.2em] uppercase">{s}</span>
          ))}
        </div>
      </div>

      {/* ══ FEATURES ════════════════════════════════════════════════ */}
      <section ref={featRef} className="px-6 xl:px-20 py-32">
        <div className="max-w-[1400px] mx-auto space-y-16">

          <div className="text-center space-y-4 max-w-3xl mx-auto">
            <motion.p
              initial={{ opacity: 1 }}
              animate={featIn ? { opacity: 1 } : { opacity: 1 }}
              className="text-[11px] font-black uppercase tracking-[0.2em] text-g-green"
            >
              Capabilities
            </motion.p>
            <motion.h2
              initial={{ opacity: 1, y: 20 }}
              animate={featIn ? { opacity: 1, y: 0 } : { opacity: 1, y: 20 }}
              transition={{ duration: 0.5 }}
              className="text-[42px] md:text-[52px] font-black tracking-[-0.04em] text-g-text leading-tight"
            >
              The{' '}
              <GradientText from="#00e87b" via="#06b6d4" to="#a78bfa">Intelligence Layer</GradientText>
            </motion.h2>
            <motion.p
              initial={{ opacity: 1, y: 10 }}
              animate={featIn ? { opacity: 1, y: 0 } : { opacity: 1, y: 10 }}
              transition={{ delay: 0.08, duration: 0.4 }}
              className="text-[16px] text-g-muted leading-relaxed"
            >
              Built for serious buyers who can't monitor every auction site manually — and won't settle for noise.
            </motion.p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
            {FEATURES.map((f, i) => (
              <motion.div
                key={f.title}
                initial={{ opacity: 0, y: 32 }}
                animate={featIn ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: 0.06 + i * 0.09, duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
                whileHover={{ y: -4, scale: 1.01 }}
                className="relative p-7 rounded-3xl overflow-hidden cursor-default group"
                style={{
                  background: `linear-gradient(145deg, rgba(15,22,41,0.85), rgba(10,15,30,0.92))`,
                  border: `1px solid rgba(255,255,255,0.05)`,
                  boxShadow: '0 8px 40px rgba(0,0,0,0.3)',
                  transition: 'all 0.3s ease',
                }}
              >
                {/* Hover glow */}
                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none rounded-3xl"
                  style={{ background: `radial-gradient(ellipse at 30% 30%, ${f.accent}08, transparent 70%)` }} />

                {/* Icon */}
                <div className="relative z-10 w-14 h-14 rounded-2xl mb-6 flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
                  style={{
                    background: `linear-gradient(135deg, ${f.accent}20, ${f.accent}08)`,
                    border: `1px solid ${f.accent}25`,
                    boxShadow: `0 0 24px ${f.accent}12`,
                  }}>
                  <f.icon size={22} color={f.accent} strokeWidth={1.75} />
                </div>

                <div className="relative z-10 space-y-2">
                  <h3 className="text-[16px] font-bold text-g-text group-hover:text-white transition-colors">{f.title}</h3>
                  <p className="text-[13px] text-g-muted leading-relaxed">{f.desc}</p>
                </div>

                {/* Bottom accent */}
                <div className="absolute bottom-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                  style={{ background: `linear-gradient(90deg, transparent, ${f.accent}60, transparent)` }} />
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══ HOW IT WORKS ════════════════════════════════════════════ */}
      <section id="how-it-works" ref={stepsRef}
        className="relative px-6 xl:px-20 py-28 border-y border-g-border/20 overflow-hidden"
        style={{ background: 'linear-gradient(180deg, rgba(10,15,30,0.3) 0%, rgba(5,5,16,0.5) 100%)' }}>

        <div className="max-w-[1400px] mx-auto space-y-16">
          <div className="text-center space-y-4">
            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-g-cyan">Process</p>
            <h2 className="text-[42px] md:text-[52px] font-black tracking-[-0.04em] text-g-text">
              How It Works
            </h2>
            <p className="text-[16px] text-g-muted leading-relaxed max-w-xl mx-auto">
              Four automated steps. You configure. Ghost Node does the rest.
            </p>
          </div>

          <div className="relative grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
            {/* Connector line */}
            <div className="hidden xl:block absolute top-14 left-[12%] right-[12%] h-px"
              style={{ background: 'linear-gradient(90deg, #00e87b20, #06b6d430, #a78bfa30, #fbbf2420)' }} />

            {STEPS.map((step, i) => (
              <motion.div
                key={step.n}
                initial={{ opacity: 0, y: 28 }}
                animate={stepsIn ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: i * 0.12, duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
                className="relative flex flex-col items-center text-center gap-5 group z-10"
              >
                {/* Number box */}
                <motion.div
                  whileHover={{ scale: 1.06, rotate: 2 }}
                  transition={{ duration: 0.2 }}
                  className="relative w-28 h-28 rounded-3xl flex items-center justify-center"
                  style={{
                    background: 'linear-gradient(145deg, rgba(15,22,41,0.95), rgba(8,12,24,0.98))',
                    border: `1px solid ${step.color}30`,
                    boxShadow: `0 0 50px ${step.color}10, 0 16px 40px rgba(0,0,0,0.5)`,
                  }}
                >
                  <span className="text-[36px] font-black"
                    style={{
                      background: `linear-gradient(135deg, ${step.color}, ${step.color}60)`,
                      WebkitBackgroundClip: 'text',
                      WebkitTextFillColor: 'transparent',
                      backgroundClip: 'text',
                    }}>{step.n}</span>
                  {/* Connector dot */}
                  <div className="absolute -right-[5px] top-1/2 -translate-y-1/2 w-3 h-3 rounded-full hidden xl:block"
                    style={{ background: step.color, boxShadow: `0 0 10px ${step.color}` }} />
                </motion.div>

                <div className="space-y-2">
                  <h3 className="text-[16px] font-bold text-g-text">{step.title}</h3>
                  <p className="text-[12px] text-g-muted leading-relaxed max-w-[200px] mx-auto">{step.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══ WHO IT'S FOR ════════════════════════════════════════════ */}
      <section ref={audRef} className="px-6 xl:px-20 py-32">
        <div className="max-w-[1400px] mx-auto space-y-16">
          <div className="text-center space-y-4">
            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-g-purple">Audience</p>
            <h2 className="text-[42px] md:text-[52px] font-black tracking-[-0.04em] text-g-text">Who It's For</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {AUDIENCE.map((a, i) => (
              <motion.div
                key={a.title}
                initial={{ opacity: 0, y: 28 }}
                animate={audIn ? { opacity: 1, y: 0 } : {}}
                transition={{ delay: i * 0.12, duration: 0.55 }}
                whileHover={{ y: -6, scale: 1.02 }}
                className="relative p-8 rounded-3xl overflow-hidden group cursor-default text-center"
                style={{
                  background: 'linear-gradient(145deg, rgba(15,22,41,0.85), rgba(10,15,30,0.92))',
                  border: `1px solid ${a.accent}20`,
                  boxShadow: `0 0 60px ${a.accent}06, 0 16px 48px rgba(0,0,0,0.4)`,
                  transition: 'all 0.3s ease',
                }}
              >
                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
                  style={{ background: `radial-gradient(ellipse at 50% 0%, ${a.accent}08, transparent 60%)` }} />

                <div className="relative z-10 flex flex-col items-center gap-6">
                  <div className="w-16 h-16 rounded-2xl flex items-center justify-center transition-transform duration-300 group-hover:scale-110"
                    style={{
                      background: `linear-gradient(135deg, ${a.accent}20, ${a.accent}08)`,
                      border: `1px solid ${a.accent}25`,
                      boxShadow: `0 0 30px ${a.accent}10`,
                    }}>
                    <a.icon size={24} color={a.accent} strokeWidth={1.75} />
                  </div>
                  <div className="space-y-2">
                    <h3 className="text-[17px] font-bold text-g-text group-hover:text-white transition-colors">{a.title}</h3>
                    <p className="text-[13px] text-g-muted leading-relaxed">{a.desc}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ══ FAQ ═════════════════════════════════════════════════════ */}
      <section className="px-6 xl:px-20 py-24 border-t border-g-border/20">
        <div className="max-w-3xl mx-auto space-y-10">
          <div className="text-center space-y-4">
            <p className="text-[11px] font-black uppercase tracking-[0.2em] text-g-amber">FAQ</p>
            <h2 className="text-[42px] font-black tracking-[-0.04em] text-g-text">Common Questions</h2>
          </div>
          <div className="space-y-3">
            {FAQ.map(item => <FaqItem key={item.q} {...item} />)}
          </div>
        </div>
      </section>

      {/* ══ CTA ═════════════════════════════════════════════════════ */}
      <section className="px-6 xl:px-20 pb-24">
        <div className="max-w-[1400px] mx-auto">
          <div className="relative rounded-3xl overflow-hidden py-24 text-center space-y-8"
            style={{
              background: 'linear-gradient(135deg, rgba(0,232,123,0.06) 0%, rgba(6,182,212,0.04) 50%, rgba(167,139,250,0.06) 100%)',
              border: '1px solid rgba(0,232,123,0.12)',
              boxShadow: '0 0 80px rgba(0,232,123,0.05), inset 0 1px 0 rgba(255,255,255,0.04)',
            }}>
            {/* BG orb */}
            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
              <div className="w-[600px] h-[300px] rounded-full opacity-20"
                style={{ background: 'radial-gradient(ellipse, rgba(0,232,123,0.3) 0%, transparent 70%)', filter: 'blur(60px)' }} />
            </div>

            <div className="relative z-10 space-y-8">
              <p className="text-[11px] font-black uppercase tracking-[0.2em] text-g-green">Ready?</p>

              <h2 className="text-[52px] md:text-[68px] font-black tracking-[-0.05em] leading-none">
                <span className="text-g-text">Start </span>
                <GradientText>Hunting.</GradientText>
              </h2>

              <p className="text-[17px] text-g-muted max-w-md mx-auto leading-relaxed">
                Configure your first target, launch the engine, and let Ghost Node handle the watching.
              </p>

              <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
                <Link href="/dashboard">
                  <motion.button
                    whileHover={{ scale: 1.06, y: -3 }}
                    whileTap={{ scale: 0.96 }}
                    className="inline-flex items-center gap-3 rounded-2xl font-black text-black cursor-pointer"
                    style={{
                      height: 56,
                      paddingLeft: '2.5rem',
                      paddingRight: '2.5rem',
                      fontSize: 16,
                      background: 'linear-gradient(135deg, #00e87b, #06b6d4)',
                      boxShadow: '0 0 50px rgba(0,232,123,0.4), 0 8px 32px rgba(0,0,0,0.4)',
                    }}
                  >
                    <CheckCircle2 size={18} />
                    Enter Dashboard
                  </motion.button>
                </Link>
                <Link href="/settings">
                  <motion.button
                    whileHover={{ scale: 1.04, y: -1 }}
                    whileTap={{ scale: 0.96 }}
                    className="g-btn inline-flex items-center gap-2"
                    style={{ height: 56, paddingLeft: '2rem', paddingRight: '2rem', fontSize: 15 }}
                  >
                    Configure Engine
                    <ArrowRight size={14} />
                  </motion.button>
                </Link>
              </div>

              <p className="text-[12px] text-g-faint/50 pt-2">
                Runs entirely on your machine · No cloud fees · No subscriptions
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ══ FOOTER ══════════════════════════════════════════════════ */}
      <footer className="border-t border-g-border/25 px-6 xl:px-20 py-10">
        <div className="max-w-[1400px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-5">
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-xl flex items-center justify-center"
              style={{ background: 'linear-gradient(135deg, rgba(0,232,123,0.2), rgba(6,182,212,0.1))', border: '1px solid rgba(0,232,123,0.2)' }}>
              <span className="text-g-green font-black text-sm">G</span>
            </div>
            <div>
              <p className="text-[14px] font-bold text-g-text leading-none">Ghost Node</p>
              <p className="text-[10px] text-g-faint mt-1 tracking-[0.12em] uppercase">Auction Sniper · v2.7</p>
            </div>
          </div>
          <p className="text-[12px] text-g-faint/45 text-center">
            Built by Abbas · Auction intelligence for serious buyers
          </p>
          <div className="flex items-center gap-5">
            {[['Dashboard', '/dashboard'], ['Listings', '/listings'], ['Settings', '/settings'], ['Legacy', '/legacy']].map(([l, h]) => (
              <a key={l} href={h} className="text-[12px] text-g-faint/60 hover:text-g-green transition-colors font-medium">{l}</a>
            ))}
          </div>
        </div>
      </footer>

    </div>
  )
}