import { Suspense, lazy, useEffect, useRef, useState } from 'react';
import { Link } from 'react-router-dom';
import { motion, useScroll, useTransform, useMotionValue, animate, useInView, useMotionValueEvent } from 'framer-motion';
import {
  Crosshair, Zap, BarChart3, Server, ShieldCheck,
  ArrowRight, ChevronDown, Sparkles, Globe, Users,
  Timer, Shield, Trophy, Activity, Cpu, Lock,
  ChevronRight, Flame, Target
} from 'lucide-react';
import { Navbar } from '@/components/layout/Navbar';
import { Footer } from '@/components/layout/Footer';
import { usePrefersReducedMotion } from '@/hooks/usePrefersReducedMotion';

const ParticleField = lazy(() => import('./LandingParticles'));

const features = [
  {
    icon: Crosshair,
    title: 'Skill-Based Matchmaking',
    desc: 'Elo-rated system ensures every match is balanced and competitive. No more stomps.',
    color: '#ff6b2c',
    tag: 'CORE',
  },
  {
    icon: Server,
    title: 'Instant Servers',
    desc: 'Game servers spin up in seconds. Auto-cleanup after each match. Zero maintenance.',
    color: '#6366f1',
    tag: 'INFRA',
  },
  {
    icon: ShieldCheck,
    title: 'Anti-Cheat Ready',
    desc: 'Verified-only lobbies with Steam integration ensure fair play at every rank.',
    color: '#22d3ee',
    tag: 'SECURITY',
  },
  {
    icon: BarChart3,
    title: 'Deep Statistics',
    desc: 'Track MMR history, win rates, map performance, and head-to-head records.',
    color: '#10b981',
    tag: 'ANALYTICS',
  },
  {
    icon: Globe,
    title: 'Global Leaderboard',
    desc: 'Compete for the top spot. Regional and global rankings updated in real-time.',
    color: '#f59e0b',
    tag: 'COMPETE',
  },
  {
    icon: Timer,
    title: '< 30s Queue Times',
    desc: 'Smart queue algorithm minimizes wait time while maximizing match quality.',
    color: '#ec4899',
    tag: 'SPEED',
  },
];

const stats = [
  { label: 'Matches Played', value: 12480, suffix: '' },
  { label: 'Active Players', value: 3200, suffix: '' },
  { label: 'Avg Queue Time', value: 28, suffix: 's' },
  { label: 'Servers Online', value: 890, suffix: '' },
];

const marqueeItems = [
  'MATCHMAKING', 'LEADERBOARDS', 'STATISTICS', 'ANTI-CHEAT',
  'ELO SYSTEM', 'LIVE MATCHES', 'GAME SERVERS', 'RANKED PLAY',
];

const processSteps = [
  {
    number: '01',
    title: 'Create Account',
    desc: 'Register and link your Steam profile in under a minute.',
    icon: Users,
    color: '#ff6b2c',
  },
  {
    number: '02',
    title: 'Queue Up',
    desc: 'Select mode, pick your maps, and find a match instantly.',
    icon: Crosshair,
    color: '#6366f1',
  },
  {
    number: '03',
    title: 'Compete & Climb',
    desc: 'Play balanced games, earn MMR, and rise through the ranks.',
    icon: Trophy,
    color: '#22d3ee',
  },
];

const techStack = [
  { icon: Cpu, label: 'Auto-Scaling', desc: 'Servers scale with demand' },
  { icon: Shield, label: 'Steam Auth', desc: 'Verified player identity' },
  { icon: Activity, label: 'Real-Time', desc: 'Live match tracking' },
  { icon: Lock, label: 'Secure', desc: 'End-to-end encrypted' },
];

function AnimatedCounter({ value, suffix = '' }: { value: number; suffix?: string }) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, margin: '-50px' });
  const motionVal = useMotionValue(0);
  const rounded = useTransform(motionVal, (v) => {
    if (value >= 1000) return Math.round(v).toLocaleString();
    return Math.round(v).toString();
  });

  useEffect(() => {
    if (inView) animate(motionVal, value, { duration: 2.5, ease: [0.16, 1, 0.3, 1] });
  }, [inView, motionVal, value]);

  return (
    <span ref={ref} className="stat-number">
      <motion.span>{rounded}</motion.span>
      {suffix}
    </span>
  );
}

const mockPlayers = {
  ct: [
    { name: 'StrikeForce', kills: 24, deaths: 11, adr: 98.2, rating: 1.42, alive: true },
    { name: 'awp_wizard', kills: 19, deaths: 14, adr: 82.1, rating: 1.21, alive: false },
    { name: 'clutchmaster', kills: 17, deaths: 13, adr: 76.4, rating: 1.15, alive: true },
    { name: 'entry_king', kills: 15, deaths: 16, adr: 71.3, rating: 0.98, alive: true },
    { name: 'smokes_pro', kills: 12, deaths: 15, adr: 63.8, rating: 0.87, alive: false },
  ],
  t: [
    { name: 'HeadHunter', kills: 22, deaths: 12, adr: 91.7, rating: 1.38, alive: true },
    { name: 'flash_bang', kills: 18, deaths: 14, adr: 79.5, rating: 1.18, alive: true },
    { name: 'lurk_shadow', kills: 16, deaths: 15, adr: 68.9, rating: 1.02, alive: false },
    { name: 'site_anchor', kills: 14, deaths: 16, adr: 64.2, rating: 0.91, alive: true },
    { name: 'rotate_fast', kills: 11, deaths: 17, adr: 58.1, rating: 0.78, alive: false },
  ],
};

const roundHistory = [
  'ct','ct','t','ct','t','t','ct','ct','t','ct','ct','t',
  't','ct','t','t','ct','ct','ct','t','t','ct','',''
];

function MatchShowcase() {
  return (
    <div className="relative">
      <div className="glass-panel rounded-2xl overflow-hidden">
        <div className="flex items-center justify-between px-6 py-3 border-b border-white/[0.04] bg-white/[0.01]">
          <div className="flex items-center gap-2.5">
            <div className="relative">
              <div className="w-2 h-2 rounded-full bg-emerald-500" />
              <div className="absolute inset-0 w-2 h-2 rounded-full bg-emerald-500 animate-ping opacity-50" />
            </div>
            <span className="text-[10px] font-extrabold text-emerald-400 uppercase tracking-[0.2em]">Live, Round 22</span>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-[10px] font-bold text-[#3a3a4e] uppercase tracking-[0.1em]">de_mirage</span>
            <span className="text-[10px] font-bold text-[#3a3a4e]">Competitive</span>
          </div>
        </div>

        <div className="relative px-6 py-8">
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div className="w-48 h-48 rounded-full bg-[#ff6b2c]/5 blur-3xl" />
          </div>

          <div className="relative flex items-center justify-center gap-6 sm:gap-10">
            <div className="text-center">
              <div className="flex items-center gap-2 justify-center mb-2">
                <div className="w-3 h-3 rounded-sm bg-[#60a5fa]" />
                <span className="text-[10px] font-extrabold text-[#60a5fa] uppercase tracking-[0.15em]">Counter-Terrorists</span>
              </div>
              <p className="text-6xl sm:text-7xl font-black text-[#f0f0f5] font-display leading-none">12</p>
              <p className="text-[10px] text-[#5a5a72] font-bold mt-1">3 alive</p>
            </div>

            <div className="flex flex-col items-center gap-2">
              <div className="w-px h-8 bg-gradient-to-b from-transparent via-[#3a3a4e] to-transparent" />
              <span className="text-xs font-black text-[#3a3a4e]">VS</span>
              <div className="w-px h-8 bg-gradient-to-b from-transparent via-[#3a3a4e] to-transparent" />
            </div>

            <div className="text-center">
              <div className="flex items-center gap-2 justify-center mb-2">
                <div className="w-3 h-3 rounded-sm bg-[#fbbf24]" />
                <span className="text-[10px] font-extrabold text-[#fbbf24] uppercase tracking-[0.15em]">Terrorists</span>
              </div>
              <p className="text-6xl sm:text-7xl font-black text-[#f0f0f5] font-display leading-none">10</p>
              <p className="text-[10px] text-[#5a5a72] font-bold mt-1">2 alive</p>
            </div>
          </div>
        </div>

        <div className="px-6 pb-4">
          <div className="flex items-center gap-0.5">
            <span className="text-[8px] font-bold text-[#3a3a4e] uppercase tracking-wider mr-1.5 flex-shrink-0">1st</span>
            {roundHistory.slice(0, 12).map((r, i) => (
              <div key={`h1-${i}`} className="flex-1 h-1.5 rounded-[1px]" style={{
                background: r === 'ct' ? '#60a5fa' : r === 't' ? '#fbbf24' : '#1a1a2a',
                opacity: r ? 0.7 : 0.2,
              }} />
            ))}
            <div className="w-px h-3 bg-[#3a3a4e] mx-1.5" />
            <span className="text-[8px] font-bold text-[#3a3a4e] uppercase tracking-wider mr-1.5 flex-shrink-0">2nd</span>
            {roundHistory.slice(12).map((r, i) => (
              <div key={`h2-${i}`} className="flex-1 h-1.5 rounded-[1px]" style={{
                background: r === 'ct' ? '#60a5fa' : r === 't' ? '#fbbf24' : '#1a1a2a',
                opacity: r ? 0.7 : 0.2,
              }} />
            ))}
          </div>
        </div>

        <div className="border-t border-white/[0.04]">
          <div className="border-b border-white/[0.03]">
            <div className="grid grid-cols-[1fr_40px_40px_50px_50px] gap-2 px-6 py-2 text-[8px] font-bold text-[#3a3a4e] uppercase tracking-wider">
              <span>Player</span>
              <span className="text-center">K</span>
              <span className="text-center">D</span>
              <span className="text-center">ADR</span>
              <span className="text-center">Rating</span>
            </div>
            {mockPlayers.ct.map((p) => (
              <div key={p.name} className="grid grid-cols-[1fr_40px_40px_50px_50px] gap-2 px-6 py-2 hover:bg-white/[0.01] transition-colors">
                <div className="flex items-center gap-2">
                  <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${p.alive ? 'bg-emerald-500 shadow-[0_0_4px_rgba(34,197,94,0.5)]' : 'bg-red-500/40'}`} />
                  <span className="text-xs text-[#a0a0b8] font-medium truncate">{p.name}</span>
                </div>
                <span className="text-xs text-[#f0f0f5] font-bold text-center">{p.kills}</span>
                <span className="text-xs text-[#5a5a72] font-medium text-center">{p.deaths}</span>
                <span className="text-xs text-[#a0a0b8] font-mono text-center">{p.adr.toFixed(1)}</span>
                <span className={`text-xs font-bold text-center ${p.rating >= 1.0 ? 'text-emerald-400' : 'text-red-400'}`}>{p.rating.toFixed(2)}</span>
              </div>
            ))}
          </div>

          <div>
            <div className="grid grid-cols-[1fr_40px_40px_50px_50px] gap-2 px-6 py-2 text-[8px] font-bold text-[#3a3a4e] uppercase tracking-wider">
              <span>Player</span>
              <span className="text-center">K</span>
              <span className="text-center">D</span>
              <span className="text-center">ADR</span>
              <span className="text-center">Rating</span>
            </div>
            {mockPlayers.t.map((p) => (
              <div key={p.name} className="grid grid-cols-[1fr_40px_40px_50px_50px] gap-2 px-6 py-2 hover:bg-white/[0.01] transition-colors">
                <div className="flex items-center gap-2">
                  <div className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${p.alive ? 'bg-emerald-500 shadow-[0_0_4px_rgba(34,197,94,0.5)]' : 'bg-red-500/40'}`} />
                  <span className="text-xs text-[#a0a0b8] font-medium truncate">{p.name}</span>
                </div>
                <span className="text-xs text-[#f0f0f5] font-bold text-center">{p.kills}</span>
                <span className="text-xs text-[#5a5a72] font-medium text-center">{p.deaths}</span>
                <span className="text-xs text-[#a0a0b8] font-mono text-center">{p.adr.toFixed(1)}</span>
                <span className={`text-xs font-bold text-center ${p.rating >= 1.0 ? 'text-emerald-400' : 'text-red-400'}`}>{p.rating.toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <motion.div
        animate={{ y: [0, -6, 0] }}
        transition={{ repeat: Infinity, duration: 4, ease: 'easeInOut' }}
        className="absolute -top-4 -right-4 px-3 py-1.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20 backdrop-blur-sm"
      >
        <span className="text-[10px] font-bold text-emerald-400 flex items-center gap-1.5">
          <Activity className="w-3 h-3" /> 128 tick
        </span>
      </motion.div>
      <motion.div
        animate={{ y: [0, 6, 0] }}
        transition={{ repeat: Infinity, duration: 5, ease: 'easeInOut', delay: 1 }}
        className="absolute -bottom-3 -left-3 px-3 py-1.5 rounded-lg bg-[#6366f1]/10 border border-[#6366f1]/20 backdrop-blur-sm"
      >
        <span className="text-[10px] font-bold text-[#6366f1] flex items-center gap-1.5">
          <Flame className="w-3 h-3" /> Competitive
        </span>
      </motion.div>
    </div>
  );
}

function FeatureShowcase() {
  const sectionRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: sectionRef,
    offset: ['start start', 'end end'],
  });

  const totalFeatures = features.length;
  const segments = Math.max(totalFeatures - 1, 1);

  return (
    <section ref={sectionRef} className="relative" style={{ height: `${totalFeatures * 100}vh` }}>
      <div className="sticky top-0 h-screen overflow-hidden">
        <div className="absolute inset-0 bg-bg-base" />
        <div className="absolute inset-0 grid-bg opacity-10" />

        <div className="absolute top-12 left-0 right-0 z-20 px-6 sm:px-12 lg:px-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
          >
            <span className="text-xs font-extrabold text-[#ff6b2c] uppercase tracking-[0.25em] mb-3 block">
              Platform Features
            </span>
            <h2 className="heading-display text-4xl sm:text-5xl md:text-6xl text-[#f0f0f5]">
              Built for{' '}
              <span className="text-gradient">Competitors</span>
            </h2>
          </motion.div>
        </div>

        {features.map((feature, i) => (
          <FeaturePanel
            key={feature.title}
            feature={feature}
            index={i}
            scrollProgress={scrollYProgress}
            total={totalFeatures}
            segments={segments}
          />
        ))}

        <FeatureProgressDots scrollProgress={scrollYProgress} total={totalFeatures} segments={segments} />
      </div>
    </section>
  );
}

function FeaturePanel({
  feature,
  index,
  scrollProgress,
  total,
  segments,
}: {
  feature: typeof features[0];
  index: number;
  scrollProgress: ReturnType<typeof useScroll>['scrollYProgress'];
  total: number;
  segments: number;
}) {
  const slotLen = 1 / segments;
  const halfSlot = slotLen * 0.45;

  const isFirst = index === 0;
  const isLast = index === total - 1;

  const exitStart = index * slotLen;
  const exitEnd = exitStart + halfSlot;

  const enterStart = (index - 1) * slotLen + slotLen - halfSlot;
  const enterEnd = (index - 1) * slotLen + slotLen;

  let inputRange: number[];
  let opacityRange: number[];
  let yRange: number[];
  let scaleRange: number[];

  if (isFirst) {
    inputRange = [0, exitStart, exitEnd];
    opacityRange = [1, 1, 0];
    yRange = [0, 0, -50];
    scaleRange = [1, 1, 0.97];
  } else if (isLast) {
    inputRange = [enterStart, enterEnd, 1];
    opacityRange = [0, 1, 1];
    yRange = [50, 0, 0];
    scaleRange = [0.97, 1, 1];
  } else {
    inputRange = [enterStart, enterEnd, exitStart, exitEnd];
    opacityRange = [0, 1, 1, 0];
    yRange = [50, 0, 0, -50];
    scaleRange = [0.97, 1, 1, 0.97];
  }

  const opacity = useTransform(scrollProgress, inputRange, opacityRange);
  const y = useTransform(scrollProgress, inputRange, yRange);
  const scale = useTransform(scrollProgress, inputRange, scaleRange);

  return (
    <motion.div
      style={{ opacity, y, scale }}
      className="absolute inset-0 flex items-center justify-center px-6 sm:px-12 lg:px-20 pt-32"
    >
      <div className="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
        <div>
          <span
            className="text-[10px] font-extrabold tracking-[0.2em] uppercase mb-6 inline-block px-3 py-1.5 rounded-md"
            style={{
              color: feature.color,
              background: `${feature.color}10`,
              border: `1px solid ${feature.color}20`,
            }}
          >
            {feature.tag}
          </span>

          <h3 className="text-3xl sm:text-4xl lg:text-5xl font-black text-[#f0f0f5] tracking-tight leading-[1.1] mb-5 font-display">
            {feature.title}
          </h3>

          <p className="text-base sm:text-lg text-[#5a5a72] leading-relaxed font-medium max-w-md mb-8">
            {feature.desc}
          </p>

          <Link
            to="/register"
            className="inline-flex items-center gap-2 text-sm font-bold transition-colors group"
            style={{ color: feature.color }}
          >
            Get Started
            <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
          </Link>
        </div>

        <div className="flex items-center justify-center relative">
          <div
            className="absolute w-[300px] h-[300px] sm:w-[380px] sm:h-[380px] rounded-full border opacity-20"
            style={{ borderColor: `${feature.color}30`, animation: 'orbit 25s linear infinite' }}
          />
          <div
            className="absolute w-[220px] h-[220px] sm:w-[280px] sm:h-[280px] rounded-full border opacity-15"
            style={{ borderColor: `${feature.color}20`, animation: 'orbit 18s linear infinite reverse' }}
          />

          <div
            className="relative w-32 h-32 sm:w-40 sm:h-40 rounded-3xl flex items-center justify-center"
            style={{
              background: `linear-gradient(135deg, ${feature.color}15, ${feature.color}05)`,
              border: `1px solid ${feature.color}25`,
              boxShadow: `0 0 80px ${feature.color}15, 0 0 160px ${feature.color}05`,
            }}
          >
            <feature.icon className="w-16 h-16 sm:w-20 sm:h-20" style={{ color: feature.color, opacity: 0.9 }} />
          </div>

          <div
            className="absolute w-[500px] h-[500px] rounded-full pointer-events-none -z-10"
            style={{ background: `radial-gradient(circle, ${feature.color}08, transparent 60%)` }}
          />
        </div>
      </div>
    </motion.div>
  );
}

function FeatureProgressDots({
  scrollProgress,
  total,
  segments,
}: {
  scrollProgress: ReturnType<typeof useScroll>['scrollYProgress'];
  total: number;
  segments: number;
}) {
  const [active, setActive] = useState(0);
  useMotionValueEvent(scrollProgress, 'change', (v) => {
    const transLen = 1 / segments;
    const idx = Math.round(v / transLen);
    setActive(Math.min(Math.max(0, idx), total - 1));
  });

  return (
    <div className="absolute right-6 sm:right-12 top-1/2 -translate-y-1/2 z-20 flex flex-col gap-3">
      {features.map((f, i) => (
        <div key={i} className="relative group flex items-center justify-end">
          <span className={`text-[10px] font-bold uppercase tracking-wider mr-3 transition-all duration-300 whitespace-nowrap ${
            active === i ? 'opacity-100 text-[#a0a0b8]' : 'opacity-0 group-hover:opacity-70 text-[#5a5a72]'
          }`}>
            {f.tag}
          </span>
          <div
            className="w-2 h-2 rounded-full transition-all duration-300"
            style={{
              background: active === i ? f.color : '#3a3a4e',
              boxShadow: active === i ? `0 0 8px ${f.color}60` : 'none',
              transform: active === i ? 'scale(1.3)' : 'scale(1)',
            }}
          />
        </div>
      ))}
    </div>
  );
}

export default function Landing() {
  const prefersReducedMotion = usePrefersReducedMotion();
  const heroRef = useRef<HTMLDivElement>(null);

  const { scrollYProgress: pageProgress } = useScroll();

  const { scrollYProgress: heroProgress } = useScroll({
    target: heroRef,
    offset: ['start start', 'end start'],
  });
  const heroY = useTransform(heroProgress, [0, 1], [0, 200]);
  const heroOpacity = useTransform(heroProgress, [0, 0.8], [1, 0]);

  return (
    <div className="min-h-screen bg-bg-base relative">
      <motion.div
        className="scroll-progress"
        style={{ scaleX: pageProgress }}
      />

      <Navbar />

      <section ref={heroRef} className="relative min-h-[100vh] flex items-center justify-center overflow-hidden">
        {!prefersReducedMotion && (
          <div className="absolute inset-0 opacity-50">
            <Suspense fallback={null}>
              <ParticleField />
            </Suspense>
          </div>
        )}

        <div className="absolute inset-0 hero-gradient-intense" />
        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-bg-base" />
        <div className="absolute inset-0 grid-bg opacity-20" />

        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] orbit-ring opacity-30" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[900px] h-[900px] orbit-ring opacity-15" style={{ animationDuration: '45s', animationDirection: 'reverse' }} />

        <div className="absolute top-[25%] left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] rounded-full pointer-events-none" style={{ background: 'radial-gradient(ellipse, rgba(255,107,44,0.12) 0%, transparent 55%)' }} />
        <div className="absolute top-[45%] right-[15%] w-[500px] h-[400px] rounded-full pointer-events-none" style={{ background: 'radial-gradient(ellipse, rgba(99,102,241,0.07) 0%, transparent 55%)' }} />

        <motion.div
          style={{ y: prefersReducedMotion ? 0 : heroY, opacity: prefersReducedMotion ? 1 : heroOpacity }}
          className="relative z-10 text-center px-4 max-w-6xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ duration: 0.6, delay: 0.1 }}
            className="inline-flex items-center gap-2.5 px-5 py-2 rounded-full border border-[#ff6b2c]/20 bg-[#ff6b2c]/5 mb-8"
          >
            <Sparkles className="w-3.5 h-3.5 text-[#ff6b2c]" />
            <span className="text-xs font-bold text-[#ff8a50] tracking-[0.15em] uppercase">
              Competitive CS2 Platform
            </span>
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
            className="heading-display text-5xl sm:text-7xl md:text-8xl lg:text-[8rem]"
          >
            <span className="text-gradient-white">COMPETE</span>
            <br />
            <span className="text-gradient-animated">AT YOUR LEVEL</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.45 }}
            className="mt-8 text-lg sm:text-xl text-[#5a5a72] max-w-2xl mx-auto leading-relaxed font-medium"
          >
            Skill-based matchmaking, automated game servers, and real-time
            performance tracking.{' '}
            <span className="text-[#a0a0b8]">
              The CS2 competitive experience you deserve.
            </span>
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.65 }}
            className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4"
          >
            <Link
              to="/register"
              className="group relative inline-flex items-center gap-3 px-10 py-4.5 bg-gradient-to-r from-[#ff6b2c] to-[#e85d1c] text-white font-extrabold rounded-2xl text-base shadow-[0_8px_30px_rgba(255,107,44,0.35)] hover:shadow-[0_16px_50px_rgba(255,107,44,0.5)] hover:from-[#ff8a50] hover:to-[#ff6b2c] transition-all duration-300 overflow-hidden border border-[#ff8a50]/20"
            >
              <span className="relative z-10 tracking-wide">PLAY NOW</span>
              <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1.5 transition-transform duration-300" />
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                <div className="absolute inset-0" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent)', animation: 'cta-shimmer 2s infinite' }} />
              </div>
            </Link>

            <a
              href="#features"
              className="inline-flex items-center gap-2.5 px-8 py-4.5 border-2 border-[#1a1a2a] text-[#a0a0b8] font-bold rounded-2xl text-base hover:bg-[#16161f]/40 hover:border-[#28283c] hover:text-[#f0f0f5] transition-all duration-300"
            >
              LEARN MORE
              <ChevronDown className="w-4 h-4" />
            </a>
          </motion.div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.5 }}
          className="absolute bottom-10 left-1/2 -translate-x-1/2"
        >
          <motion.div
            animate={{ y: [0, 8, 0] }}
            transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
            className="w-6 h-10 rounded-full border-2 border-[#28283c] flex justify-center pt-2"
          >
            <motion.div
              animate={{ opacity: [0.3, 1, 0.3], height: ['4px', '8px', '4px'] }}
              transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
              className="w-1 bg-[#ff6b2c] rounded-full"
            />
          </motion.div>
        </motion.div>
      </section>

      <section className="py-8 border-y border-[#1a1a2a]/50 bg-[#050508]/80 overflow-hidden">
        <div className="marquee">
          <div className="marquee-track">
            {[...marqueeItems, ...marqueeItems].map((item, i) => (
              <span
                key={i}
                className="text-[11px] font-extrabold tracking-[0.3em] text-[#3a3a4e] uppercase whitespace-nowrap flex items-center gap-6"
              >
                {item}
                <span className="w-1.5 h-1.5 rounded-full bg-[#ff6b2c]/30" />
              </span>
            ))}
          </div>
        </div>
      </section>

      <div id="features">
        <FeatureShowcase />
      </div>

      <section className="relative py-24 px-4 sm:px-6 lg:px-8">
        <div className="section-divider-strong mb-24" />

        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-0 rounded-2xl overflow-hidden border border-border">
            {stats.map((stat, i) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
                className="relative text-center py-10 px-6 bg-bg-card border-r border-b border-border last:border-r-0 md:[&:nth-child(n+3)]:border-b-0 [&:nth-child(odd)]:border-r [&:nth-child(even)]:border-r-0 md:[&:nth-child(even)]:border-r"
              >
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-12 pointer-events-none" style={{ background: 'radial-gradient(ellipse, rgba(255,107,44,0.06), transparent)' }} />
                <p className="text-4xl sm:text-5xl font-black text-[#f0f0f5] tracking-[-0.03em] mb-2 font-display">
                  <AnimatedCounter value={stat.value} suffix={stat.suffix} />
                </p>
                <p className="text-[10px] text-[#5a5a72] font-bold uppercase tracking-[0.15em]">
                  {stat.label}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="relative py-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div className="absolute inset-0 dot-grid opacity-30 pointer-events-none" />

        <div className="max-w-6xl mx-auto relative">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="text-center mb-20"
          >
            <span className="text-xs font-extrabold text-[#ff6b2c] uppercase tracking-[0.25em] mb-4 block">
              Getting Started
            </span>
            <h2 className="heading-display text-4xl sm:text-5xl md:text-6xl text-[#f0f0f5]">
              Three Steps to{' '}
              <span className="text-gradient">Compete</span>
            </h2>
            <p className="mt-5 text-[#5a5a72] text-lg max-w-xl mx-auto font-medium">
              From signup to your first match in under two minutes.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-0 relative">
            <div className="hidden md:block absolute top-[5rem] left-[16%] right-[16%] h-px overflow-hidden">
              <motion.div
                initial={{ scaleX: 0 }}
                whileInView={{ scaleX: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
                className="w-full h-full origin-left"
                style={{ background: 'linear-gradient(90deg, #ff6b2c40, #6366f140, #22d3ee40)' }}
              />
            </div>

            {processSteps.map((step, i) => (
              <motion.div
                key={step.title}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.15 + 0.2, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
                className="relative text-center px-6 py-8 group"
              >
                <div className="relative inline-flex items-center justify-center w-24 h-24 mb-7">
                  <div className="absolute inset-0 rounded-full border-2 transition-all duration-500" style={{ borderColor: `${step.color}20` }} />
                  <div className="absolute inset-[6px] rounded-full transition-all duration-500 group-hover:scale-105" style={{ background: `${step.color}08` }} />
                  <step.icon className="relative w-8 h-8" style={{ color: step.color }} />
                  <span className="absolute -top-1 -right-1 text-[10px] font-black w-6 h-6 rounded-full flex items-center justify-center" style={{ background: step.color, color: '#050508' }}>
                    {step.number}
                  </span>
                </div>

                <h3 className="text-xl font-extrabold text-[#f0f0f5] mb-3 tracking-tight font-display">
                  {step.title}
                </h3>
                <p className="text-sm text-[#5a5a72] leading-relaxed max-w-[260px] mx-auto font-medium">
                  {step.desc}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="relative py-28 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="mb-16"
          >
            <span className="text-xs font-extrabold text-[#6366f1] uppercase tracking-[0.25em] mb-4 block">
              Under the Hood
            </span>
            <h2 className="heading-display text-4xl sm:text-5xl text-[#f0f0f5]">
              Engineered for{' '}
              <span className="text-gradient-cool">Performance</span>
            </h2>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[1px] bg-border rounded-2xl overflow-hidden border border-border">
            {techStack.map((item, i) => (
              <motion.div
                key={item.label}
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.08 }}
                className="bg-bg-card p-8 group hover:bg-bg-card-hover transition-colors duration-500 relative overflow-hidden"
              >
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-16 bg-[#ff6b2c]/0 group-hover:bg-[#ff6b2c]/5 transition-all duration-700 blur-2xl pointer-events-none" />
                <item.icon className="w-6 h-6 text-[#5a5a72] group-hover:text-[#ff6b2c] transition-colors duration-300 mb-5" />
                <h4 className="text-sm font-extrabold text-[#f0f0f5] mb-1.5 tracking-tight">{item.label}</h4>
                <p className="text-xs text-[#5a5a72] font-medium">{item.desc}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      <section className="relative py-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div className="max-w-6xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_1.4fr] gap-12 lg:gap-16 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
            >
              <span className="text-xs font-extrabold text-[#22d3ee] uppercase tracking-[0.25em] mb-4 block">
                Real-Time Experience
              </span>
              <h2 className="heading-display text-4xl sm:text-5xl text-[#f0f0f5] mb-6">
                Live Match
                <br />
                <span className="text-gradient">Tracking</span>
              </h2>
              <p className="text-[#5a5a72] text-base leading-relaxed mb-8 font-medium max-w-md">
                Watch scores update in real-time. Track round-by-round progress,
                player stats, and economy graphs as the match unfolds.
              </p>

              <div className="space-y-4">
                {[
                  { text: 'Round-by-round timeline', icon: Target },
                  { text: 'Live scoreboard with ADR and rating', icon: BarChart3 },
                  { text: 'Post-match analytics and replay', icon: Activity },
                ].map((item, i) => (
                  <motion.div
                    key={item.text}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: 0.3 + i * 0.1 }}
                    className="flex items-center gap-3"
                  >
                    <div className="w-7 h-7 rounded-lg bg-[#ff6b2c]/10 border border-[#ff6b2c]/20 flex items-center justify-center flex-shrink-0">
                      <item.icon className="w-3.5 h-3.5 text-[#ff6b2c]" />
                    </div>
                    <span className="text-sm text-[#a0a0b8] font-medium">{item.text}</span>
                  </motion.div>
                ))}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
              className="relative"
            >
              <MatchShowcase />
              <div className="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] pointer-events-none" style={{ background: 'radial-gradient(circle, rgba(255,107,44,0.06), transparent 60%)' }} />
            </motion.div>
          </div>
        </div>
      </section>

      <section className="py-6 border-y border-[#1a1a2a]/30 overflow-hidden">
        <div className="marquee">
          <div className="marquee-track" style={{ animationDirection: 'reverse', animationDuration: '50s' }}>
            {[...marqueeItems, ...marqueeItems].map((item, i) => (
              <span
                key={i}
                className="text-6xl sm:text-8xl font-black tracking-[-0.04em] text-[#0d0d14] uppercase whitespace-nowrap font-display"
                style={{ WebkitTextStroke: '1px #1a1a2a' }}
              >
                {item}
              </span>
            ))}
          </div>
        </div>
      </section>

      <section className="relative py-40 px-4 sm:px-6 lg:px-8 overflow-hidden">
        <div className="absolute inset-0 hero-gradient-intense opacity-50" />
        <div className="absolute inset-0 grid-bg opacity-15" />

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
          className="text-center max-w-4xl mx-auto relative z-10"
        >
          <h2 className="heading-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-[#f0f0f5] mb-6">
            Ready to{' '}
            <span className="text-gradient-animated">Compete</span>?
          </h2>
          <p className="text-lg text-[#5a5a72] mb-14 max-w-lg mx-auto font-medium leading-relaxed">
            Join thousands of players already competing on tapper.
            Free to play. Skill-based. Fair.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Link
              to="/register"
              className="group relative inline-flex items-center gap-3 px-14 py-5 bg-gradient-to-r from-[#ff6b2c] to-[#e85d1c] text-white font-extrabold rounded-2xl text-lg shadow-[0_8px_30px_rgba(255,107,44,0.35)] hover:shadow-[0_16px_50px_rgba(255,107,44,0.5)] hover:from-[#ff8a50] hover:to-[#ff6b2c] transition-all duration-300 overflow-hidden border border-[#ff8a50]/20"
            >
              <span className="relative z-10 tracking-wide">GET STARTED FREE</span>
              <ArrowRight className="w-5 h-5 relative z-10 group-hover:translate-x-1.5 transition-transform duration-300" />
              <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                <div className="absolute inset-0" style={{ background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent)', animation: 'cta-shimmer 2s infinite' }} />
              </div>
            </Link>

            <Link
              to="/login"
              className="text-[#5a5a72] hover:text-[#a0a0b8] text-base font-bold transition-colors underline underline-offset-4 decoration-[#3a3a4e] hover:decoration-[#5a5a72]"
            >
              Already have an account?
            </Link>
          </div>
        </motion.div>
      </section>

      <Footer />
    </div>
  );
}
