'use client'

import { useEffect, useState, useRef } from 'react'
import Image from 'next/image'
import { Header } from '@/components/Header'
import { Footer } from '@/components/Footer'
import { DomainChecker } from '@/components/DomainChecker'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { 
  ArrowRight, 
  ChevronRight, 
  Zap,
  Globe,
  Check,
  Search,
  Target,
  Gavel,
  Activity,
  Lock,
  Crosshair,
  Coins,
  Layers,
  ArrowUpRight,
  ShieldCheck,
  Network,
  Share2,
  Key,
  Shield,
  Radar,
  Scan,
  Radio,
  Cpu,
  Clock,
  ExternalLink
} from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

interface HotAuction {
  domain: string
  current_bid: number
  time_remaining: string
  platform: string
}

// Compact Ticker for Mobile
function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
  const tickerRef = useRef<HTMLDivElement>(null)
  
  if (auctions.length === 0) return null
  
  const items = [...auctions, ...auctions, ...auctions]
  
  return (
    <div className="relative z-20 border-y border-white/[0.08] bg-[#020202] overflow-hidden">
      <div className="absolute left-0 top-0 bottom-0 w-16 sm:w-32 bg-gradient-to-r from-[#020202] to-transparent z-10" />
      <div className="absolute right-0 top-0 bottom-0 w-16 sm:w-32 bg-gradient-to-l from-[#020202] to-transparent z-10" />
      
      <div className="py-2 sm:py-3">
        <div 
          ref={tickerRef}
          className="flex animate-[ticker_60s_linear_infinite] hover:[animation-play-state:paused]"
          style={{ width: 'max-content' }}
        >
          {items.map((auction, i) => (
            <div 
              key={`${auction.domain}-${i}`}
              className="flex items-center gap-3 sm:gap-6 px-4 sm:px-8 border-r border-white/[0.08] group cursor-default transition-colors hover:bg-white/[0.02]"
            >
              <div className="flex items-center gap-2 sm:gap-3">
                <div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent opacity-50 group-hover:opacity-100 transition-opacity" />
                <span className="font-mono text-[10px] sm:text-xs text-white/70 font-medium group-hover:text-white transition-colors tracking-wide">
                  {auction.domain}
                </span>
              </div>
              <div className="flex items-center gap-2 sm:gap-4">
                <span className="text-[10px] sm:text-xs text-white font-medium">${auction.current_bid.toLocaleString()}</span>
                <span className="hidden sm:inline text-[10px] text-white/30 font-mono uppercase tracking-wider">{auction.time_remaining}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export default function HomePage() {
  const { checkAuth, isLoading, isAuthenticated } = useStore()
  const [hotAuctions, setHotAuctions] = useState<HotAuction[]>([])
  const [loadingAuctions, setLoadingAuctions] = useState(true)

  useEffect(() => {
    checkAuth()
    fetchData()
  }, [checkAuth])

  const fetchData = async () => {
    try {
      const auctions = await api.getHotAuctions(8).catch(() => [])
      setHotAuctions(auctions.slice(0, 8))
    } catch (error) {
      console.error('Mission failed:', error)
    } finally {
      setLoadingAuctions(false)
    }
  }

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-[#020202]">
        <div className="relative">
          <div className="w-10 h-10 sm:w-12 sm:h-12 border-[0.5px] border-white/10 border-t-accent animate-spin rounded-full" />
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-[#020202] text-white relative overflow-x-hidden selection:bg-accent/30 selection:text-white">
      {/* Background */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03] mix-blend-overlay" />
        <div 
          className="absolute inset-0 opacity-[0.02] sm:opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,0.3) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.3) 0.5px, transparent 0.5px)`,
            backgroundSize: '80px 80px',
          }}
        />
        <div className="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[800px] sm:w-[1200px] h-[600px] sm:h-[800px] bg-accent/[0.02] rounded-full blur-[150px] sm:blur-[200px]" />
      </div>
      
      <Header />
      
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* HERO SECTION */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative min-h-[85vh] sm:min-h-[90vh] flex flex-col justify-center pt-20 sm:pt-32 pb-12 sm:pb-24 px-4 sm:px-6 z-10">
        <div className="max-w-[1400px] mx-auto w-full">
          <div className="grid lg:grid-cols-12 gap-8 lg:gap-24 items-center">
            
            {/* Left: Typography & Brand */}
            <div className="lg:col-span-7 relative z-20 text-left">
              {/* Brand Seal - Mobile */}
              <div className="inline-flex items-center gap-3 mb-6 sm:mb-10 animate-fade-in opacity-0" style={{ animationDelay: '0.1s', animationFillMode: 'forwards' }}>
                <div className="relative w-10 h-10 sm:w-16 sm:h-16">
                  <div className="absolute inset-0 bg-accent/20 blur-xl rounded-full animate-pulse" />
                  <Image
                    src="/pounce-puma.png"
                    alt="Pounce"
                    fill
                    className="object-contain drop-shadow-[0_0_20px_rgba(16,185,129,0.2)]"
                    priority
                  />
                </div>
                <div className="h-px w-6 sm:w-12 bg-white/10" />
                <span className="text-[8px] sm:text-[10px] font-mono uppercase tracking-[0.2em] sm:tracking-[0.3em] text-accent">Est. 2025</span>
              </div>

              {/* Headline - Responsive */}
              <h1 className="font-display text-[2.5rem] sm:text-[4rem] md:text-[5rem] lg:text-[6rem] leading-[0.95] tracking-[-0.03em] text-white mb-6 sm:mb-8">
                <span className="block animate-slide-up opacity-0" style={{ animationDelay: '0.2s', animationFillMode: 'forwards' }}>
                  The market
                </span>
                <span className="block text-white animate-slide-up opacity-0" style={{ animationDelay: '0.4s', animationFillMode: 'forwards' }}>
                  never sleeps.
                </span>
                <span className="block mt-2 sm:mt-4 text-white/40 animate-slide-up opacity-0" style={{ animationDelay: '0.6s', animationFillMode: 'forwards' }}>
                  You should.
                </span>
              </h1>
              
              {/* Subline */}
              <div className="animate-slide-up opacity-0" style={{ animationDelay: '0.8s', animationFillMode: 'forwards' }}>
                <p className="text-sm sm:text-lg lg:text-xl text-white/60 max-w-xl font-light leading-relaxed mb-8 sm:mb-12 lg:mx-0 mx-auto">
                  Domain intelligence for investors — scan live auctions, compare TLD pricing, and monitor portfolios in a clean, spam-filtered terminal.
                  <span className="text-white block mt-1 font-medium">Scan. Track. Trade. Verify.</span>
                </p>
                
                {/* Stats Grid - Mobile 2x2 */}
                <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-x-8 sm:gap-y-4 pt-6 sm:pt-8 border-t border-white/[0.08]">
                  {[
                    { value: '886+', label: 'TLDs Scanned' },
                    { value: '24/7', label: 'Live Recon' },
                    { value: '10s', label: 'Latency' },
                    { value: '$1B+', label: 'Assets Tracked' },
                  ].map((stat, i) => (
                    <div key={i} className="text-left">
                      <div className="text-xl sm:text-2xl font-display text-white mb-1">{stat.value}</div>
                      <div className="text-[9px] sm:text-[10px] uppercase tracking-widest text-white/40 font-mono">{stat.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right: Domain Checker */}
            <div className="lg:col-span-5 relative animate-scale-in opacity-0 mt-4 lg:mt-0" style={{ animationDelay: '1s', animationFillMode: 'forwards' }}>
              <div className="absolute -inset-1 bg-gradient-to-tr from-accent/20 via-white/10 to-accent/20 blur-2xl opacity-40" />
              
              <div className="relative z-10 bg-[#0A0A0A] border border-white/20 p-1.5 sm:p-2 shadow-2xl">
                {/* Tech Corners */}
                <div className="absolute -top-px -left-px w-3 h-3 sm:w-4 sm:h-4 border-t border-l border-white/40" />
                <div className="absolute -top-px -right-px w-3 h-3 sm:w-4 sm:h-4 border-t border-r border-white/40" />
                <div className="absolute -bottom-px -left-px w-3 h-3 sm:w-4 sm:h-4 border-b border-l border-white/40" />
                <div className="absolute -bottom-px -right-px w-3 h-3 sm:w-4 sm:h-4 border-b border-r border-white/40" />

                <div className="bg-[#050505] p-5 sm:p-8 lg:p-10 border border-white/5 relative overflow-hidden">
                  <div className="absolute inset-0 bg-white/[0.02]" />
                  
                  <div className="relative z-10">
                    <div className="flex items-center justify-between mb-5 sm:mb-8">
                      <span className="text-[9px] sm:text-[10px] font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em] text-accent flex items-center gap-2">
                        <span className="w-1.5 h-1.5 bg-accent animate-pulse" />
                        Terminal Access
                      </span>
                      <div className="flex gap-1">
                        <div className="w-1 h-1 bg-white/20" />
                        <div className="w-1 h-1 bg-white/20" />
                        <div className="w-1 h-1 bg-white/20" />
                      </div>
                    </div>
                    
                    <div className="bg-[#0A0A0A] border-[0.5px] border-white/10 p-1.5 sm:p-2 shadow-inner">
                      <DomainChecker />
                    </div>
                    
                    <div className="mt-5 sm:mt-8 pt-5 sm:pt-8 border-t border-white/[0.05] flex justify-between items-center text-[9px] sm:text-[10px] text-white/30 font-mono">
                      <span>SECURE CONNECTION</span>
                      <span>V2.0.4</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Ticker */}
      {!loadingAuctions && hotAuctions.length > 0 && (
        <MarketTicker auctions={hotAuctions} />
      )}

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* PARADIGM SHIFT */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05]">
        <div className="max-w-[1200px] mx-auto">
          <div className="grid lg:grid-cols-2 gap-10 lg:gap-24 items-center">
            <div>
              <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">The Problem</span>
              <h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white leading-tight mb-6 sm:mb-8">
                The market is <br className="hidden sm:block"/><span className="text-white/30">loud & opaque.</span>
              </h2>
              <div className="space-y-4 sm:space-y-6 text-white/60 leading-relaxed text-sm sm:text-lg font-light">
                <p>Auctions are full of junk, pricing is fragmented across registrars, and the best signals are hidden behind spreadsheets.</p>
                <p>You need high-density intel, fast filtering, and operator-grade workflows — not more noise.</p>
              </div>
            </div>
            <div className="relative">
               <div className="absolute -inset-4 bg-accent/5 blur-3xl" />
               <div className="relative bg-[#050505] border border-white/10 p-6 sm:p-8 lg:p-12">
                  <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">The Pounce Protocol</span>
                  <h3 className="font-display text-xl sm:text-3xl text-white mb-6 sm:mb-8">Asset Class V2.0</h3>
                  <ul className="space-y-5 sm:space-y-6 font-mono text-xs sm:text-sm text-white/80">
                    <li className="flex items-start gap-3 sm:gap-4">
                      <Radar className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
                      <div>
                        <span className="text-white font-bold block mb-1">Deep Recon</span>
                        <span className="text-white/50 text-[11px] sm:text-sm">TLD pricing + trends to spot traps and opportunities.</span>
                      </div>
                    </li>
                    <li className="flex items-start gap-3 sm:gap-4">
                      <Zap className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
                      <div>
                        <span className="text-white font-bold block mb-1">Verified Market</span>
                        <span className="text-white/50 text-[11px] sm:text-sm">Pounce Direct listings with DNS-verified owners.</span>
                      </div>
                    </li>
                    <li className="flex items-start gap-3 sm:gap-4">
                      <Coins className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-px shrink-0" />
                      <div>
                        <span className="text-white font-bold block mb-1">Portfolio Ops</span>
                        <span className="text-white/50 text-[11px] sm:text-sm">Watchlists, monitoring, and clean execution in one terminal.</span>
                      </div>
                    </li>
                  </ul>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* CORE ARCHITECTURE - 3 Pillars */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-20 sm:py-40 px-4 sm:px-6 bg-[#020202]">
        <div className="max-w-[1400px] mx-auto">
          {/* Section Header */}
          <div className="flex flex-col lg:flex-row justify-between items-start lg:items-end mb-12 sm:mb-24 border-b border-white/[0.08] pb-8 sm:pb-12">
            <div>
              <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Core Architecture</span>
              <h2 className="font-display text-3xl sm:text-4xl lg:text-6xl text-white leading-none">
                The Lifecycle <br />
                <span className="text-white/30">Engine.</span>
              </h2>
            </div>
            <p className="hidden lg:block text-white/50 max-w-md text-sm font-mono mt-8 lg:mt-0 leading-relaxed text-right">
              // INTELLIGENCE_LAYER_ACTIVE<br />
              // MARKET_PROTOCOL_READY<br />
              // AUTOMATION_LAYER_OPTIONAL
            </p>
          </div>

          {/* Pillars - Stacked on Mobile */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-px bg-transparent lg:bg-white/[0.08] lg:border lg:border-white/[0.08]">
            {[
              {
                module: '01',
                title: 'Intelligence',
                desc: '"Identify Targets." We scan 886+ TLDs to uncover pricing traps, trends, and opportunities.',
                features: [
                  { icon: Scan, title: 'Global Scan', desc: 'Zone file analysis' },
                  { icon: Target, title: 'Valuation AI', desc: 'Instant fair-market value' },
                ],
              },
              {
                module: '02',
                title: 'Market',
                desc: '"Secure the Asset." Direct access to liquidity with verified owners and 0% commission.',
                features: [
                  { icon: ShieldCheck, title: 'Verified Owners', desc: 'Mandatory DNS check' },
                  { icon: Gavel, title: 'Direct Execution', desc: 'P2P transfers' },
                ],
              },
              {
                module: '03',
                title: 'Terminal',
                desc: '"Operate the Asset." High density, low noise workflows for tracking, filtering, and execution.',
                features: [
                  { icon: Layers, title: 'Clean Feed', desc: 'Spam-filtered auctions + listings' },
                  { icon: Coins, title: 'Pricing Intel', desc: 'Trends + renewal risk signals' },
                ],
              },
            ].map((pillar, i) => (
              <div key={i} className="group relative bg-[#030303] p-6 sm:p-10 lg:p-14 hover:bg-[#050505] transition-colors duration-500 border border-white/[0.08] lg:border-0">
                <div className="absolute top-0 right-0 p-4 sm:p-6 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                  <ArrowUpRight className="w-5 h-5 sm:w-6 sm:h-6 text-white/20" />
                </div>
                
                <div className="h-full flex flex-col justify-between">
                  <div>
                    <div className="mb-5 sm:mb-8 font-mono text-[10px] sm:text-xs text-accent uppercase tracking-widest border border-accent/20 inline-block px-2 sm:px-3 py-1 bg-accent/5">
                      Module {pillar.module}
                    </div>
                    <h3 className="text-2xl sm:text-3xl text-white font-display mb-4 sm:mb-6">{pillar.title}</h3>
                    <p className="text-white/50 leading-relaxed text-sm sm:text-lg font-light mb-8 sm:mb-12">
                      {pillar.desc}
                    </p>
                  </div>
                  
                  <div className="space-y-4 sm:space-y-6 pt-6 sm:pt-12 border-t border-white/[0.05]">
                    {pillar.features.map((f, j) => (
                      <div key={j} className="flex items-start gap-3 sm:gap-4">
                        <f.icon className="w-4 h-4 sm:w-5 sm:h-5 text-accent mt-1" />
                        <div>
                          <div className="text-white font-medium mb-0.5 sm:mb-1 text-sm sm:text-base">{f.title}</div>
                          <div className="text-white/30 text-[11px] sm:text-sm">{f.desc}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* AUTOMATION (OPTIONAL) */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-16 sm:py-32 px-4 sm:px-6 border-b border-white/[0.05] bg-[#050505] overflow-hidden">
         <div className="absolute inset-0 bg-accent/[0.02]" />
         <div className="max-w-[1200px] mx-auto relative z-10">
            <div className="mb-12 sm:mb-20 text-center">
               <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Optional Automation</span>
               <h2 className="font-display text-2xl sm:text-4xl lg:text-5xl text-white mb-4 sm:mb-6">Intent Routing™</h2>
               <p className="text-white/50 max-w-2xl mx-auto text-sm sm:text-lg font-light leading-relaxed px-2">
                  For operators who want more: connect a domain, detect intent, and route traffic to the best destination. Your core product stays intelligence + market access.
               </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8">
               {[
                 { icon: Network, step: '1', title: 'Connect', desc: 'Point nameservers to ns.pounce.io (optional)' },
                 { icon: Cpu, step: '2', title: 'Analyze', desc: 'We detect intent and risk signals from real usage' },
                 { icon: Share2, step: '3', title: 'Route', desc: 'Send traffic to the best destination (partner, listing, or page)' },
               ].map((item, i) => (
                 <div key={i} className="bg-[#020202] border border-white/10 p-6 sm:p-10 relative group hover:border-accent/30 transition-colors">
                    <div className="w-10 h-10 sm:w-14 sm:h-14 bg-white/5 flex items-center justify-center mb-5 sm:mb-8 text-white group-hover:text-accent group-hover:bg-accent/10 transition-all">
                       <item.icon className="w-5 h-5 sm:w-7 sm:h-7" />
                    </div>
                    <h3 className="text-white font-bold text-base sm:text-xl mb-2 sm:mb-3">{item.step}. {item.title}</h3>
                    <p className="text-white/40 text-xs sm:text-sm font-mono leading-relaxed">{item.desc}</p>
                 </div>
               ))}
            </div>
         </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* MARKET DEEP DIVE */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#020202]">
         <div className="max-w-[1200px] mx-auto grid lg:grid-cols-2 gap-10 lg:gap-20 items-center">
            {/* Demo Card */}
            <div className="order-2 lg:order-1 relative">
                <div className="border border-white/10 bg-[#050505] p-1.5 sm:p-2 shadow-2xl lg:rotate-1 hover:rotate-0 transition-transform duration-500">
                    <div className="bg-[#020202] p-5 sm:p-8">
                        <div className="flex items-center gap-3 sm:gap-4 border-b border-white/10 pb-4 sm:pb-6 mb-4 sm:mb-6">
                           <div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-accent animate-pulse" />
                           <span className="font-mono text-sm sm:text-base text-white">zurich-immo.ch</span>
                           <span className="ml-auto text-accent font-bold text-base sm:text-lg">$950</span>
                        </div>
                        <div className="space-y-3 sm:space-y-4 font-mono text-[10px] sm:text-xs text-white/50">
                           <div className="flex justify-between items-center">
                              <span>Source</span>
                              <span className="text-white flex items-center gap-2"><div className="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-accent"/> Pounce Direct</span>
                           </div>
                           <div className="flex justify-between items-center">
                              <span>Verified</span>
                              <span className="text-accent flex items-center gap-1.5 sm:gap-2"><Check className="w-2.5 h-2.5 sm:w-3 sm:h-3" /> DNS Passed</span>
                           </div>
                           <div className="flex justify-between items-center">
                              <span>Commission</span>
                              <span className="text-white bg-white/10 px-1.5 sm:px-2 py-0.5">0%</span>
                           </div>
                        </div>
                        <div className="mt-5 sm:mt-8 pt-4 sm:pt-6 border-t border-white/10">
                           <button className="w-full py-3 sm:py-4 bg-white/5 text-white uppercase font-bold text-[10px] sm:text-xs tracking-[0.2em] hover:bg-white hover:text-black transition-colors flex items-center justify-center gap-2">
                              Contact Seller
                           </button>
                        </div>
                    </div>
                </div>
            </div>
            
            {/* Content */}
            <div className="order-1 lg:order-2">
               <span className="text-accent font-mono text-[10px] sm:text-xs uppercase tracking-[0.2em] mb-3 sm:mb-4 block">Exclusive Exchange</span>
               <h2 className="font-display text-2xl sm:text-4xl text-white mb-4 sm:mb-6">The Velvet Rope.</h2>
               <p className="text-white/50 text-sm sm:text-lg leading-relaxed mb-6 sm:mb-10">
                  Buying is open to everyone, selling is reserved for verified members.
               </p>
               <ul className="space-y-5 sm:space-y-6">
                  {[
                    { icon: Shield, title: 'Zero Noise', desc: 'Gatekeeper tech filters 99% of junk' },
                    { icon: Key, title: 'Verified Owners', desc: 'DNS verification required before listing' },
                    { icon: Zap, title: '0% Commission', desc: 'Keep 100% of the sale price' },
                  ].map((item, i) => (
                    <li key={i} className="flex gap-4 sm:gap-5">
                       <item.icon className="w-5 h-5 sm:w-6 sm:h-6 text-accent shrink-0" />
                       <div>
                          <h4 className="text-white font-bold mb-0.5 sm:mb-1 text-sm sm:text-base">{item.title}</h4>
                          <p className="text-white/40 text-xs sm:text-sm leading-relaxed">{item.desc}</p>
                       </div>
                    </li>
                  ))}
               </ul>
            </div>
         </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* PRICING */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-16 sm:py-32 px-4 sm:px-6 border-y border-white/[0.08] bg-[#030303]">
         <div className="max-w-[1200px] mx-auto text-center">
            <h2 className="font-display text-2xl sm:text-4xl text-white mb-10 sm:mb-16">Clearance Levels</h2>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-8 text-left">
               {/* Scout */}
               <div className="p-6 sm:p-10 border border-white/10 bg-[#020202] opacity-70 hover:opacity-100 transition-opacity flex flex-col">
                  <h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Scout</h3>
                  <div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$0<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
                  <ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
                     <li className="flex gap-2 sm:gap-3"><span>•</span> Recon Overview</li>
                     <li className="flex gap-2 sm:gap-3"><span>•</span> Basic Scan</li>
                     <li className="flex gap-2 sm:gap-3"><span>•</span> 5 Targets</li>
                  </ul>
                  <Link href="/register" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
                     Join the Hunt
                  </Link>
               </div>
               
               {/* Trader */}
               <div className="p-6 sm:p-10 border-2 border-accent bg-[#050505] relative md:-translate-y-0 lg:-translate-y-4 flex flex-col shadow-[0_0_50px_-20px_rgba(16,185,129,0.2)]">
                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-accent text-black px-3 sm:px-4 py-1 sm:py-1.5 text-[9px] sm:text-[10px] font-bold uppercase tracking-widest">Recommended</div>
                  <h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2 mt-2 sm:mt-0">Trader</h3>
                  <div className="text-2xl sm:text-4xl font-mono text-accent mb-5 sm:mb-8">$9<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
                  <ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/80 font-mono mb-6 sm:mb-10 flex-1">
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Clean Feed</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> Renewal Intel</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 0% Commission</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-accent shrink-0"/> 50 Targets</li>
                  </ul>
                  <Link href="/pricing" className="block w-full py-3 sm:py-4 text-center bg-accent text-black uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white transition-colors">
                     Gear Up
                  </Link>
               </div>

               {/* Tycoon */}
               <div className="p-6 sm:p-10 border border-white/10 bg-[#020202] hover:border-white/30 transition-colors flex flex-col">
                  <h3 className="text-lg sm:text-xl font-display text-white mb-1 sm:mb-2">Tycoon</h3>
                  <div className="text-2xl sm:text-4xl font-mono text-white mb-5 sm:mb-8">$29<span className="text-xs sm:text-sm text-white/30">/mo</span></div>
                  <ul className="space-y-3 sm:space-y-4 text-xs sm:text-sm text-white/50 font-mono mb-6 sm:mb-10 flex-1">
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Full Monitor</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 10m Alerts</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> 500 Targets</li>
                     <li className="flex gap-2 sm:gap-3"><Check className="w-3 h-3 sm:w-4 sm:h-4 text-white shrink-0"/> Featured</li>
                  </ul>
                  <Link href="/pricing" className="block w-full py-3 sm:py-4 text-center border border-white/20 text-white uppercase text-[10px] sm:text-xs font-bold tracking-widest hover:bg-white hover:text-black transition-colors">
                     Go Pro
                  </Link>
               </div>
            </div>
         </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* LIVE OPS */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {!isAuthenticated && !loadingAuctions && hotAuctions.length > 0 && (
        <section className="relative py-16 sm:py-32 px-4 sm:px-6 bg-[#050505] border-t border-white/[0.05]">
          <div className="max-w-[1200px] mx-auto">
            
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8 sm:mb-12 gap-4">
              <div>
                <h2 className="font-display text-2xl sm:text-3xl text-white mb-1 sm:mb-2">Live Ops</h2>
                <p className="text-accent/60 font-mono text-[10px] sm:text-sm">FEED_V2.0 // ENCRYPTED</p>
              </div>
              <Link href="/acquire" className="text-[10px] sm:text-xs font-mono uppercase tracking-widest text-white/40 hover:text-white transition-colors flex items-center gap-2">
                Recon All <ArrowRight className="w-3 h-3" />
              </Link>
            </div>

            {/* MOBILE: Card Layout */}
            <div className="sm:hidden space-y-2">
              {hotAuctions.slice(0, 4).map((auction, idx) => (
                <div key={idx} className="p-4 bg-[#020202] border border-white/[0.08] group">
                  <div className="flex items-center justify-between mb-3">
                    <div className="flex items-center gap-2">
                      <div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
                      <span className="font-mono text-sm text-white/90">{auction.domain}</span>
                    </div>
                    <span className="text-accent font-bold font-mono">${auction.current_bid.toLocaleString()}</span>
                  </div>
                  <div className="flex items-center justify-between text-[10px] font-mono text-white/40">
                    <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> {auction.time_remaining}</span>
                    <span className="uppercase">{auction.platform}</span>
                  </div>
                </div>
              ))}
            </div>

            {/* DESKTOP: Table Layout */}
            <div className="hidden sm:block relative border border-white/[0.08] bg-[#020202]">
              <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-accent/20 to-transparent" />
              
              {/* Table Header */}
              <div className="grid grid-cols-12 gap-4 px-6 py-4 border-b border-white/[0.05] bg-white/[0.01] text-[10px] font-mono text-white/30 uppercase tracking-widest">
                <div className="col-span-5">Asset Identifier</div>
                <div className="col-span-2 text-right">Valuation</div>
                <div className="col-span-2 text-right">Strike Price</div>
                <div className="col-span-3 text-right">Window Closes</div>
              </div>

              {/* Table Rows */}
              <div className="font-mono text-sm">
                {hotAuctions.slice(0, 5).map((auction, idx) => (
                  <div key={idx} className="grid grid-cols-12 gap-4 px-6 py-5 border-b border-white/[0.03] hover:bg-white/[0.02] transition-colors group cursor-default">
                    <div className="col-span-5 text-white/90 group-hover:text-white transition-colors flex items-center gap-3">
                      <div className="w-1 h-1 bg-white/20 group-hover:bg-accent transition-colors" />
                      {auction.domain}
                    </div>
                    <div className="col-span-2 text-right text-white/30 line-through decoration-white/10">${(auction.current_bid * 1.5).toFixed(0)}</div>
                    <div className="col-span-2 text-right text-accent font-medium">${auction.current_bid.toLocaleString()}</div>
                    <div className="col-span-3 text-right text-white/40">{auction.time_remaining}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Gatekeeper */}
            <div className="relative h-32 sm:h-40 overflow-hidden border border-white/[0.08] border-t-0 bg-[#020202]">
              <div className="absolute inset-0 bg-[#020202]/80 backdrop-blur-[2px] z-10 flex items-center justify-center">
                <Link 
                  href="/register"
                  className="group flex items-center gap-3 sm:gap-4 px-6 sm:px-8 py-3 sm:py-4 border border-accent/20 bg-accent/10 hover:bg-accent hover:border-accent hover:text-black text-white transition-all duration-500 backdrop-blur-md"
                >
                  <Lock className="w-3 h-3" />
                  <span className="text-[10px] sm:text-xs font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em]">Enter HQ</span>
                  <ArrowRight className="w-3 h-3 group-hover:translate-x-1 transition-transform" />
                </Link>
              </div>
              <div className="opacity-30 pointer-events-none p-4 sm:p-6 space-y-4 sm:space-y-6 font-mono text-xs sm:text-sm select-none">
                <div className="flex justify-between"><span>premium-crypto.ai</span><span>$12,500</span></div>
                <div className="flex justify-between"><span>defi-bank.io</span><span>$8,200</span></div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* ═══════════════════════════════════════════════════════════════════════ */}
      {/* FINAL CTA */}
      {/* ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-24 sm:py-40 px-4 sm:px-6 bg-[#020202] border-t border-white/[0.05] overflow-hidden">
        <div className="absolute inset-0 bg-[url('/noise.png')] opacity-[0.03]" />
        
        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="font-display text-3xl sm:text-5xl md:text-6xl lg:text-7xl text-white mb-8 sm:mb-12 tracking-tight">
            Stop guessing. <br />
            <span className="text-white/30">Start knowing.</span>
          </h2>
          
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8">
            <Link 
              href={isAuthenticated ? "/terminal/hunt" : "/register"}
              className="w-full sm:w-auto group relative px-8 sm:px-10 py-4 sm:py-5 bg-accent text-black text-xs sm:text-sm font-bold uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:bg-white transition-colors duration-500"
            >
              <span className="relative z-10 flex items-center justify-center gap-3">
                Initialize <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
              </span>
            </Link>
            
            <Link 
              href="/pricing"
              className="text-xs sm:text-sm text-white/40 uppercase tracking-[0.15em] sm:tracking-[0.2em] hover:text-white transition-colors"
            >
              View Pricing
            </Link>
          </div>
          
          <div className="mt-16 sm:mt-24 pt-6 sm:pt-8 border-t border-white/[0.05] flex flex-wrap justify-center gap-6 sm:gap-12 text-[9px] sm:text-[10px] text-white/20 font-mono uppercase tracking-[0.15em] sm:tracking-[0.2em]">
            <span className="flex items-center gap-2"><ShieldCheck className="w-3 h-3 text-accent" /> Encrypted</span>
            <span className="flex items-center gap-2"><Globe className="w-3 h-3 text-accent" /> Global</span>
            <span className="flex items-center gap-2"><Check className="w-3 h-3 text-accent" /> Verified</span>
          </div>
        </div>
      </section>

      <Footer />

      <style jsx global>{`
        @keyframes ticker {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  )
}