'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 { 
  Eye, 
  Bell, 
  Clock, 
  Shield, 
  ArrowRight, 
  TrendingUp, 
  TrendingDown, 
  Minus, 
  ChevronRight, 
  Zap,
  BarChart3,
  Globe,
  Check,
  Search,
  Target,
  Gavel,
  Sparkles,
  Activity,
  LineChart,
  Lock,
  Filter,
  Crosshair,
  Tag,
  AlertTriangle,
  Briefcase,
} from 'lucide-react'
import Link from 'next/link'
import clsx from 'clsx'

interface TrendingTld {
  tld: string
  reason: string
  current_price: number
  price_change: number
}

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

// Shimmer for loading states
function Shimmer({ className }: { className?: string }) {
  return (
    <div className={clsx(
      "relative overflow-hidden rounded bg-foreground/5",
      className
    )}>
      <div className="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-foreground/5 to-transparent" />
    </div>
  )
}

// Animated counter
function AnimatedNumber({ value, suffix = '' }: { value: number, suffix?: string }) {
  const [count, setCount] = useState(0)
  
  useEffect(() => {
    const duration = 2000
    const steps = 60
    const increment = value / steps
    let current = 0
    
    const timer = setInterval(() => {
      current += increment
      if (current >= value) {
        setCount(value)
        clearInterval(timer)
      } else {
        setCount(Math.floor(current))
      }
    }, duration / steps)
    
    return () => clearInterval(timer)
  }, [value])
  
  return <>{count.toLocaleString()}{suffix}</>
}

// Live Market Ticker
function MarketTicker({ auctions }: { auctions: HotAuction[] }) {
  const tickerRef = useRef<HTMLDivElement>(null)
  
  // Duplicate items for seamless loop
  const items = [...auctions, ...auctions]
  
  if (auctions.length === 0) return null
  
  return (
    <div className="relative overflow-hidden bg-background-secondary/30 border-y border-border/50 py-3">
      <div 
        ref={tickerRef}
        className="flex animate-[ticker_30s_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-6 px-8 border-r border-border/30"
          >
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-accent animate-pulse" />
              <span className="font-mono text-sm text-foreground">{auction.domain}</span>
            </div>
            <span className="text-sm text-accent font-semibold">${auction.current_bid}</span>
            <span className="text-xs text-foreground-subtle">{auction.time_remaining}</span>
            <span className="text-xs text-foreground-muted uppercase">{auction.platform}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

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

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

  const fetchData = async () => {
    try {
      const [trending, auctions] = await Promise.all([
        api.getTrendingTlds(),
        api.getHotAuctions(8).catch(() => [])
      ])
      setTrendingTlds(trending.trending.slice(0, 4))
      setHotAuctions(auctions.slice(0, 8))
    } catch (error) {
      console.error('Failed to fetch data:', error)
    } finally {
      setLoadingTlds(false)
      setLoadingAuctions(false)
    }
  }

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-background">
        <div className="w-6 h-6 border-2 border-accent border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  const getTrendIcon = (priceChange: number) => {
    if (priceChange > 0) return <TrendingUp className="w-3.5 h-3.5" />
    if (priceChange < 0) return <TrendingDown className="w-3.5 h-3.5" />
    return <Minus className="w-3.5 h-3.5" />
  }

  return (
    <div className="min-h-screen bg-background relative overflow-hidden">
      {/* Background Effects */}
      <div className="fixed inset-0 pointer-events-none">
        <div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[1200px] h-[800px] bg-accent/[0.03] rounded-full blur-[120px]" />
        <div className="absolute bottom-[-10%] right-[-10%] w-[600px] h-[600px] bg-accent/[0.02] rounded-full blur-[100px]" />
        <div 
          className="absolute inset-0 opacity-[0.015]"
          style={{
            backgroundImage: `linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)`,
            backgroundSize: '64px 64px',
          }}
        />
      </div>
      
      <Header />
      
      {/* Hero Section - "Bloomberg meets Apple" */}
      <section className="relative pt-24 sm:pt-32 md:pt-36 pb-12 sm:pb-16 px-4 sm:px-6">
        <div className="max-w-7xl mx-auto">
          <div className="text-center max-w-4xl mx-auto">
            {/* Puma Logo */}
            <div className="flex justify-center mb-6 sm:mb-8 animate-fade-in">
              <div className="relative">
                <Image
                  src="/pounce-puma.png"
                  alt="pounce"
                  width={320}
                  height={224}
                  className="w-32 h-auto sm:w-40 md:w-48 object-contain drop-shadow-[0_0_60px_rgba(16,185,129,0.3)]"
                  priority
                />
                {/* Glow ring */}
                <div className="absolute inset-0 -z-10 bg-accent/20 blur-3xl rounded-full scale-150" />
              </div>
            </div>
            
            {/* Main Headline - kompakter */}
            <h1 className="animate-slide-up">
              <span className="block font-display text-[2rem] sm:text-[2.5rem] md:text-[3.5rem] lg:text-[4rem] leading-[0.95] tracking-[-0.03em] text-foreground">
                The market never sleeps.
              </span>
              <span className="block font-display text-[2rem] sm:text-[2.5rem] md:text-[3.5rem] lg:text-[4rem] leading-[0.95] tracking-[-0.03em] text-foreground/30 mt-1">
                You should.
              </span>
            </h1>
            
            {/* Subheadline - kompakter */}
            <p className="mt-5 sm:mt-6 text-base sm:text-lg md:text-xl text-foreground-muted max-w-xl mx-auto animate-slide-up delay-100 leading-relaxed">
              We scan. We watch. We alert.{' '}
              <span className="text-foreground font-medium">You pounce.</span>
            </p>
            
            {/* Tagline */}
            <p className="mt-3 text-sm sm:text-base text-accent font-medium animate-slide-up delay-150">
              Don&apos;t guess. Know.
            </p>
            
            {/* Domain Checker - PROMINENT */}
            <div className="mt-8 sm:mt-10 animate-slide-up delay-200">
              <div className="relative max-w-2xl mx-auto">
                {/* Glow effect behind search */}
                <div className="absolute inset-0 bg-accent/10 rounded-2xl blur-xl scale-105 -z-10" />
                <DomainChecker />
              </div>
            </div>

            {/* Trust Indicators */}
            <div className="mt-8 sm:mt-10 flex flex-wrap items-center justify-center gap-4 sm:gap-8 text-foreground-subtle animate-fade-in delay-300">
              <div className="flex items-center gap-1.5">
                <Globe className="w-3.5 h-3.5 text-accent" />
                <span className="text-xs sm:text-sm font-medium"><AnimatedNumber value={886} />+ TLDs</span>
              </div>
              <div className="flex items-center gap-1.5">
                <Gavel className="w-3.5 h-3.5 text-accent" />
                <span className="text-xs sm:text-sm font-medium">Live Auctions</span>
              </div>
              <div className="flex items-center gap-1.5">
                <Bell className="w-3.5 h-3.5 text-accent" />
                <span className="text-xs sm:text-sm font-medium">Instant Alerts</span>
              </div>
              <div className="flex items-center gap-1.5">
                <LineChart className="w-3.5 h-3.5 text-accent" />
                <span className="text-xs sm:text-sm font-medium">Price Intel</span>
              </div>
            </div>
          </div>
        </div>
      </section>

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

      {/* Three Pillars: DISCOVER, TRACK, ACQUIRE */}
      <section className="relative py-24 sm:py-32 px-4 sm:px-6">
        <div className="max-w-7xl mx-auto">
          {/* Section Header */}
          <div className="text-center max-w-3xl mx-auto mb-16 sm:mb-20">
            <span className="text-sm font-semibold text-accent uppercase tracking-wider">Your Command Center</span>
            <h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground">
              Three moves to dominate.
            </h2>
          </div>

          {/* Pillars */}
          <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
            {/* DISCOVER */}
            <div className="group relative p-8 sm:p-10 bg-gradient-to-b from-background-secondary/80 to-background-secondary/40 
                            border border-border rounded-3xl hover:border-accent/30 transition-all duration-500">
              <div className="absolute inset-0 rounded-3xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
              <div className="relative">
                <div className="w-16 h-16 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center mb-6">
                  <Search className="w-7 h-7 text-accent" />
                </div>
                <h3 className="text-2xl font-display text-foreground mb-4">Discover</h3>
                <p className="text-foreground-muted mb-6 leading-relaxed">
                  Instant domain intel. Not just "taken" — but <span className="text-foreground">why</span>, 
                  <span className="text-foreground"> when it expires</span>, and 
                  <span className="text-foreground"> smarter alternatives</span>.
                </p>
                <ul className="space-y-3 text-sm">
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>Real-time availability across 886+ TLDs</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>Expiry dates & WHOIS data</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>AI-powered alternatives</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* TRACK */}
            <div className="group relative p-8 sm:p-10 bg-gradient-to-b from-background-secondary/80 to-background-secondary/40 
                            border border-border rounded-3xl hover:border-accent/30 transition-all duration-500
                            md:-translate-y-4">
              <div className="absolute inset-0 rounded-3xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
              {/* Popular badge */}
              <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                <span className="px-4 py-1 bg-accent text-background text-xs font-semibold rounded-full">
                  Most Popular
                </span>
              </div>
              <div className="relative">
                <div className="w-16 h-16 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center mb-6">
                  <Crosshair className="w-7 h-7 text-accent" />
                </div>
                <h3 className="text-2xl font-display text-foreground mb-4">Track</h3>
                <p className="text-foreground-muted mb-6 leading-relaxed">
                  Your private watchlist with <span className="text-foreground">4-layer health analysis</span>. 
                  <span className="text-foreground"> Know the second it weakens.</span>
                </p>
                <ul className="space-y-3 text-sm">
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>DNS, HTTP, SSL, WHOIS monitoring</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>Real-time health status alerts</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>Parked & pre-drop detection</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* ACQUIRE */}
            <div className="group relative p-8 sm:p-10 bg-gradient-to-b from-background-secondary/80 to-background-secondary/40 
                            border border-border rounded-3xl hover:border-accent/30 transition-all duration-500">
              <div className="absolute inset-0 rounded-3xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
              <div className="relative">
                <div className="w-16 h-16 bg-accent/10 border border-accent/20 rounded-2xl flex items-center justify-center mb-6">
                  <Gavel className="w-7 h-7 text-accent" />
                </div>
                <h3 className="text-2xl font-display text-foreground mb-4">Acquire</h3>
                <p className="text-foreground-muted mb-6 leading-relaxed">
                  All auctions. One place. <span className="text-foreground">Filtered</span>. 
                  <span className="text-foreground"> Valued</span>. 
                  <span className="text-foreground"> Ready to strike.</span>
                </p>
                <ul className="space-y-3 text-sm">
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>GoDaddy, Sedo, NameJet, DropCatch</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>No-spam smart filters</span>
                  </li>
                  <li className="flex items-center gap-3 text-foreground-subtle">
                    <Check className="w-4 h-4 text-accent flex-shrink-0" />
                    <span>Deal score & valuation</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Transition Element */}
      <div className="relative h-24 sm:h-32">
        <div className="absolute inset-0 bg-gradient-to-b from-background to-background-secondary/50" />
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
          <div className="w-px h-16 bg-gradient-to-b from-transparent via-accent/30 to-transparent" />
        </div>
      </div>

      {/* Beyond Hunting: Sell & Alert */}
      <section className="relative py-16 sm:py-24 px-4 sm:px-6 bg-background-secondary/50">
        {/* Subtle background pattern */}
        <div className="absolute inset-0 pointer-events-none overflow-hidden">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-accent/[0.02] rounded-full blur-[100px]" />
          <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-accent/[0.02] rounded-full blur-[100px]" />
        </div>
        
        <div className="relative max-w-7xl mx-auto">
          {/* Section Header - Left aligned for flow */}
          <div className="mb-12 sm:mb-16">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-2 h-2 bg-accent rounded-full animate-pulse" />
              <span className="text-sm font-semibold text-accent uppercase tracking-wider">Beyond Hunting</span>
            </div>
            <h2 className="font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground max-w-2xl">
              Buy. Sell. Get alerted.
            </h2>
            <p className="mt-4 text-lg text-foreground-muted max-w-xl">
              Pounce isn't just for finding domains. It's your complete domain business platform.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-6 lg:gap-8">
            {/* For Sale Marketplace */}
            <div className="group relative p-8 bg-gradient-to-br from-accent/10 via-accent/5 to-transparent 
                            border border-accent/20 rounded-3xl hover:border-accent/40 transition-all duration-500
                            backdrop-blur-sm">
              <div className="absolute top-0 right-0 w-20 h-20 bg-accent/10 rounded-bl-[80px] rounded-tr-3xl" />
              
              <div className="relative">
                <div className="flex items-start gap-4 mb-5">
                  <div className="w-12 h-12 bg-accent/20 border border-accent/30 rounded-xl flex items-center justify-center shadow-lg shadow-accent/10">
                    <Tag className="w-5 h-5 text-accent" />
                  </div>
                  <div>
                    <h3 className="text-lg font-display text-foreground mb-0.5">Sell Domains</h3>
                    <p className="text-xs text-accent font-medium">Marketplace</p>
                  </div>
                </div>
                <p className="text-sm text-foreground-muted mb-5 leading-relaxed">
                  Create "For Sale" pages with DNS verification. Buyers contact you directly.
                </p>
                <ul className="space-y-2 text-xs mb-6">
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Shield className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Verified Owner badge</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <BarChart3 className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Pounce Score valuation</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Lock className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Secure contact form</span>
                  </li>
                </ul>
                <Link 
                  href="/buy"
                  className="inline-flex items-center gap-2 px-4 py-2 bg-accent text-background text-sm font-medium rounded-lg hover:bg-accent-hover transition-all"
                >
                  Browse
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>

            {/* Sniper Alerts */}
            <div className="group relative p-8 bg-gradient-to-br from-foreground/[0.03] to-transparent 
                            border border-border rounded-3xl hover:border-accent/30 transition-all duration-500
                            backdrop-blur-sm">
              <div className="absolute top-5 right-5 flex gap-1">
                <div className="w-1.5 h-1.5 rounded-full bg-accent/50 animate-pulse" />
                <div className="w-1.5 h-1.5 rounded-full bg-accent/30 animate-pulse delay-100" />
                <div className="w-1.5 h-1.5 rounded-full bg-accent/20 animate-pulse delay-200" />
              </div>
              
              <div className="relative">
                <div className="flex items-start gap-4 mb-5">
                  <div className="w-12 h-12 bg-foreground/10 border border-border rounded-xl flex items-center justify-center">
                    <Target className="w-5 h-5 text-foreground" />
                  </div>
                  <div>
                    <h3 className="text-lg font-display text-foreground mb-0.5">Sniper Alerts</h3>
                    <p className="text-xs text-foreground-muted">Hyper-Personalized</p>
                  </div>
                </div>
                <p className="text-sm text-foreground-muted mb-5 leading-relaxed">
                  Custom filters that notify you when matching domains appear.
                </p>
                <ul className="space-y-2 text-xs mb-6">
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Filter className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>TLD, length, price filters</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Bell className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Email & SMS alerts</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Zap className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Real-time matching</span>
                  </li>
                </ul>
                <Link 
                  href="/terminal/alerts"
                  className="inline-flex items-center gap-2 px-4 py-2 border border-border text-foreground text-sm font-medium rounded-lg hover:border-accent hover:text-accent transition-all"
                >
                  Set Up
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>

            {/* Portfolio Health */}
            <div className="group relative p-8 bg-gradient-to-br from-foreground/[0.03] to-transparent 
                            border border-border rounded-3xl hover:border-accent/30 transition-all duration-500
                            backdrop-blur-sm">
              <div className="absolute top-5 right-5">
                <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center">
                  <Shield className="w-3 h-3 text-accent" />
                </div>
              </div>
              
              <div className="relative">
                <div className="flex items-start gap-4 mb-5">
                  <div className="w-12 h-12 bg-accent/10 border border-accent/20 rounded-xl flex items-center justify-center">
                    <Briefcase className="w-5 h-5 text-accent" />
                  </div>
                  <div>
                    <h3 className="text-lg font-display text-foreground mb-0.5">Portfolio</h3>
                    <p className="text-xs text-accent font-medium">Domain Insurance</p>
                  </div>
                </div>
                <p className="text-sm text-foreground-muted mb-5 leading-relaxed">
                  Monitor your domains 24/7. SSL, renewals, uptime & P&L tracking.
                </p>
                <ul className="space-y-2 text-xs mb-6">
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Clock className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Expiry reminders</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <Activity className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Uptime monitoring</span>
                  </li>
                  <li className="flex items-center gap-2 text-foreground-subtle">
                    <TrendingUp className="w-3.5 h-3.5 text-accent flex-shrink-0" />
                    <span>Valuation & P&L</span>
                  </li>
                </ul>
                <Link 
                  href="/terminal/portfolio"
                  className="inline-flex items-center gap-2 px-4 py-2 border border-border text-foreground text-sm font-medium rounded-lg hover:border-accent hover:text-accent transition-all"
                >
                  Manage
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Transition to TLDs */}
      <div className="relative h-16 sm:h-24 bg-background-secondary/50">
        <div className="absolute inset-0 bg-gradient-to-b from-background-secondary/50 to-background" />
      </div>

      {/* Trending TLDs Section */}
      <section className="relative py-20 sm:py-28 px-4 sm:px-6">
        <div className="max-w-7xl mx-auto">
          {/* Section Header */}
          <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-6 mb-10 sm:mb-14">
            <div>
              <span className="text-sm font-semibold text-accent uppercase tracking-wider">TLD Pricing</span>
              <h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground">
                The <span className="text-accent">real</span> price tag.
              </h2>
              <p className="mt-3 text-foreground-muted max-w-lg">
                Don't fall for $0.99 promos. We show renewal costs, price trends, and renewal traps across 886+ TLDs.
              </p>
              <div className="flex items-center gap-4 mt-4 text-sm text-foreground-subtle">
                <span className="flex items-center gap-1.5">
                  <AlertTriangle className="w-4 h-4 text-amber-400" />
                  Trap Detection
                </span>
                <span className="flex items-center gap-1.5">
                  <span className="flex gap-0.5">
                    <span className="w-2 h-2 rounded-full bg-accent" />
                    <span className="w-2 h-2 rounded-full bg-amber-400" />
                    <span className="w-2 h-2 rounded-full bg-red-400" />
                  </span>
                  Risk Levels
                </span>
              </div>
            </div>
            <Link 
              href="/tld-pricing"
              className="group inline-flex items-center gap-2 px-5 py-2.5 bg-foreground/5 border border-border rounded-xl text-sm font-medium text-foreground hover:border-accent hover:text-accent transition-all"
            >
              Explore TLD Pricing
              <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>

          {/* TLD Cards */}
          {loadingTlds ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {[...Array(4)].map((_, i) => (
                <div key={i} className="p-6 bg-background border border-border rounded-2xl">
                  <Shimmer className="h-8 w-20 mb-4" />
                  <Shimmer className="h-4 w-full mb-2" />
                  <Shimmer className="h-4 w-24" />
                </div>
              ))}
            </div>
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
              {trendingTlds.map((item, index) => (
                <Link
                  key={item.tld}
                  href={isAuthenticated ? `/tld-pricing/${item.tld}` : `/login?redirect=/tld-pricing/${item.tld}`}
                  className="group relative p-6 bg-background border border-border rounded-2xl
                             hover:border-accent/30 transition-all duration-300"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  <div className="absolute inset-0 rounded-2xl bg-accent/5 opacity-0 group-hover:opacity-100 transition-opacity" />
                  
                  <div className="relative">
                    <div className="flex items-center justify-between mb-4">
                      <span className="font-mono text-2xl sm:text-3xl font-medium text-foreground">.{item.tld}</span>
                      <span className={clsx(
                        "flex items-center gap-1 text-xs font-semibold px-2.5 py-1 rounded-full",
                        (item.price_change ?? 0) > 0 
                          ? "text-orange-400 bg-orange-400/10"
                          : (item.price_change ?? 0) < 0
                            ? "text-accent bg-accent/10"
                            : "text-foreground-muted bg-foreground/5"
                      )}>
                        {getTrendIcon(item.price_change ?? 0)}
                        {(item.price_change ?? 0) > 0 ? '+' : ''}{(item.price_change ?? 0).toFixed(1)}%
                      </span>
                    </div>
                    
                    <p className="text-sm text-foreground-subtle mb-4 line-clamp-2 min-h-[40px]">{item.reason}</p>
                    
                    <div className="flex items-center justify-between">
                      {isAuthenticated ? (
                        <span className="text-lg font-semibold text-foreground">${(item.current_price ?? 0).toFixed(2)}<span className="text-sm font-normal text-foreground-muted">/yr</span></span>
                      ) : (
                        <span className="text-sm text-foreground-subtle flex items-center gap-1">
                          <Lock className="w-3 h-3" />
                          Sign in to view
                        </span>
                      )}
                      <ChevronRight className="w-5 h-5 text-foreground-subtle group-hover:text-accent group-hover:translate-x-1 transition-all" />
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Social Proof / Stats Section */}
      <section className="relative py-24 sm:py-32 px-4 sm:px-6">
        <div className="max-w-5xl mx-auto">
          <div className="relative p-10 sm:p-14 md:p-20 bg-gradient-to-br from-background-secondary/80 to-background-secondary/40 
                          border border-border rounded-3xl overflow-hidden">
            <div className="absolute inset-0 opacity-30">
              <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-accent/10 rounded-full blur-[100px]" />
            </div>
            
            <div className="relative">
              <h2 className="font-display text-3xl sm:text-4xl text-center text-foreground mb-12">
                The edge you need.
              </h2>
              
              <div className="grid sm:grid-cols-3 gap-10 sm:gap-6 text-center">
                <div>
                  <p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
                    <AnimatedNumber value={886} />+
                  </p>
                  <p className="text-sm text-foreground-muted">TLDs Tracked Daily</p>
                </div>
                <div>
                  <p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
                    24<span className="text-accent">/</span>7
                  </p>
                  <p className="text-sm text-foreground-muted">Always Watching</p>
                </div>
                <div>
                  <p className="font-display text-5xl sm:text-6xl md:text-7xl text-foreground mb-2">
                    <AnimatedNumber value={10} />s
                  </p>
                  <p className="text-sm text-foreground-muted">Alert Speed</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing CTA Section */}
      <section className="relative py-20 sm:py-28 px-4 sm:px-6">
        <div className="max-w-4xl mx-auto text-center">
          <span className="text-sm font-semibold text-accent uppercase tracking-wider">Pricing</span>
          <h2 className="mt-4 font-display text-3xl sm:text-4xl md:text-5xl tracking-[-0.03em] text-foreground">
            Simple. Transparent. Powerful.
          </h2>
          <p className="mt-5 text-lg text-foreground-muted max-w-xl mx-auto">
            Start free. Scale when you&apos;re ready.
          </p>
          
          {/* Quick Plans */}
          <div className="mt-12 grid sm:grid-cols-2 gap-4 max-w-2xl mx-auto">
            {/* Free Plan */}
            <div className="p-6 bg-background-secondary/50 border border-border rounded-2xl text-left">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-foreground/5 rounded-xl flex items-center justify-center">
                  <Zap className="w-5 h-5 text-foreground-muted" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Scout</p>
                  <p className="text-sm text-foreground-muted">Free forever</p>
                </div>
              </div>
              <ul className="space-y-2 text-sm text-foreground-subtle">
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>5 domains watched</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>Daily status checks</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>Market overview</span>
                </li>
              </ul>
            </div>
            
            {/* Pro Plan */}
            <div className="p-6 bg-accent/5 border border-accent/20 rounded-2xl text-left relative">
              <div className="absolute -top-3 right-4">
                <span className="px-3 py-1 bg-accent text-background text-xs font-semibold rounded-full">
                  Popular
                </span>
              </div>
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-accent/10 rounded-xl flex items-center justify-center">
                  <Target className="w-5 h-5 text-accent" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Trader</p>
                  <p className="text-sm text-accent">$9/month</p>
                </div>
              </div>
              <ul className="space-y-2 text-sm text-foreground-subtle">
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>100 domains watched</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>Priority alerts</span>
                </li>
                <li className="flex items-center gap-2">
                  <Check className="w-4 h-4 text-accent" />
                  <span>Full auction access</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link 
              href="/pricing" 
              className="inline-flex items-center gap-2 px-8 py-4 bg-foreground text-background rounded-xl
                         font-semibold hover:bg-foreground/90 transition-all duration-300"
            >
              Compare All Plans
              <ArrowRight className="w-4 h-4" />
            </Link>
            <Link 
              href={isAuthenticated ? "/terminal/dashboard" : "/register"} 
              className="inline-flex items-center gap-2 px-8 py-4 text-foreground-muted hover:text-foreground transition-colors"
            >
              {isAuthenticated ? "Go to Dashboard" : "Start Free"}
              <ChevronRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="relative py-24 sm:py-32 px-4 sm:px-6">
        <div className="max-w-4xl mx-auto text-center">
          <p className="text-accent font-medium mb-4">Join the hunters.</p>
          <h2 className="font-display text-4xl sm:text-5xl md:text-6xl lg:text-7xl tracking-[-0.03em] text-foreground mb-6">
            Ready to pounce?
          </h2>
          <p className="text-xl text-foreground-muted mb-10 max-w-lg mx-auto">
            Track your first domain in under a minute. Free forever, no credit card.
          </p>
          <Link 
            href={isAuthenticated ? "/terminal/dashboard" : "/register"}
            className="group inline-flex items-center gap-3 px-10 py-5 bg-accent text-background rounded-2xl
                       text-lg font-semibold hover:bg-accent-hover transition-all duration-300
                       shadow-[0_0_40px_rgba(16,185,129,0.2)] hover:shadow-[0_0_60px_rgba(16,185,129,0.3)]"
          >
            {isAuthenticated ? "Go to Dashboard" : "Start Hunting — It's Free"}
            <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
          </Link>
          
          {!isAuthenticated && (
            <p className="mt-6 text-sm text-foreground-subtle">
              <Check className="w-4 h-4 inline mr-1 text-accent" />
              Free forever • No credit card • 5 domains included
            </p>
          )}
        </div>
      </section>

      <Footer />

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