"use client";

import dynamic from "next/dynamic";
import { ArrowRight, Sparkles, TrendingUp, Users, ShoppingBag } from "lucide-react";
import CountUp from "react-countup";
import Marquee from "react-fast-marquee";

// Dynamically import Three.js Hero3D to prevent SSR issues
const Hero3D = dynamic(() => import("../animations/Hero3D"), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center">
      <div className="relative w-24 h-24">
        <div className="absolute inset-0 rounded-full border-4 border-primary/20" />
        <div className="absolute inset-0 rounded-full border-4 border-t-primary animate-spin" />
      </div>
    </div>
  ),
});

export default function Hero() {
  const highlights = [
    "WALK & EARN",
    "PLAY & WIN",
    "SHOP & REDEEM",
    "SHARE WITH FRIENDS",
    "DRINK FREE COFFEE",
    "LEVEL UP",
    "GEN Z SOCIAL CURRENCY",
  ];

  return (
    <section className="relative min-h-screen flex flex-col justify-between pt-24 overflow-hidden bg-dark">
      {/* Background Gradients & Glows */}
      <div className="absolute top-1/4 left-1/10 w-96 h-96 rounded-full bg-accent-pink/10 blur-[120px] pointer-events-none" />
      <div className="absolute bottom-1/4 right-1/10 w-96 h-96 rounded-full bg-accent-purple/10 blur-[120px] pointer-events-none" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full flex-grow flex items-center">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center w-full py-12">
          
          {/* Left Column: Copy & Actions */}
          <div className="space-y-8 text-left z-10">
            {/* Promo Tag */}
            <div className="inline-flex items-center space-x-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 text-xs font-semibold tracking-wider text-accent-lime uppercase animate-pulse">
              <Sparkles className="w-3.5 h-3.5" />
              <span>Next Gen Social Currency</span>
            </div>

            {/* Main Headline */}
            <div className="space-y-4">
              <h1 className="text-4xl sm:text-6xl font-extrabold tracking-tight font-sora leading-[1.1] text-white">
                Earn. Spend. <br />
                <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-accent-pink to-accent-purple text-glow-pink">
                  Live More.
                </span>
              </h1>
              <p className="text-white/60 text-lg sm:text-xl font-medium max-w-lg leading-relaxed font-inter">
                Turn your everyday activities into social capital. Walk, play games, and shop to earn <span className="text-primary font-bold">LYTs</span>. Spend them at the brands you love.
              </p>
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4">
              <a
                href="#play"
                className="group relative px-8 py-4 rounded-2xl bg-primary text-dark font-extrabold text-center text-base tracking-wide shadow-[0_0_30px_rgba(255,199,44,0.35)] hover:shadow-[0_0_40px_rgba(255,199,44,0.5)] transition-all transform hover:-translate-y-0.5 cursor-pointer flex items-center justify-center gap-2"
              >
                <span>Earn LYTs Now</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1.5 transition-transform" />
              </a>

              <a
                href="#spend"
                className="px-8 py-4 rounded-2xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-extrabold text-center text-base tracking-wide transition-all transform hover:-translate-y-0.5 cursor-pointer flex items-center justify-center gap-2"
              >
                <span>Spend Vouchers</span>
              </a>
            </div>

            {/* Live Counters / Stats */}
            <div className="grid grid-cols-3 gap-6 pt-6 border-t border-white/5">
              <div className="space-y-1">
                <div className="text-2xl sm:text-3xl font-extrabold text-white flex items-center gap-1 font-sora">
                  <CountUp end={850} duration={3} />
                  <span>K+</span>
                </div>
                <div className="text-white/40 text-xs font-semibold flex items-center gap-1.5">
                  <Users className="w-3.5 h-3.5 text-accent-pink" />
                  <span>Active Users</span>
                </div>
              </div>

              <div className="space-y-1">
                <div className="text-2xl sm:text-3xl font-extrabold text-white flex items-center gap-1 font-sora">
                  <CountUp end={120} duration={3} />
                  <span>+</span>
                </div>
                <div className="text-white/40 text-xs font-semibold flex items-center gap-1.5">
                  <ShoppingBag className="w-3.5 h-3.5 text-accent-purple" />
                  <span>Brand Partners</span>
                </div>
              </div>

              <div className="space-y-1">
                <div className="text-2xl sm:text-3xl font-extrabold text-white flex items-center gap-1 font-sora">
                  <CountUp end={45} duration={3} />
                  <span>M+</span>
                </div>
                <div className="text-white/40 text-xs font-semibold flex items-center gap-1.5">
                  <TrendingUp className="w-3.5 h-3.5 text-accent-lime" />
                  <span>Steps Tracked</span>
                </div>
              </div>
            </div>
          </div>

          {/* Right Column: Interactive 3D Canvas */}
          <div className="relative h-[450px] sm:h-[600px] w-full flex items-center justify-center">
            {/* Hologram Circle Rings behind 3D Object */}
            <div className="absolute w-[300px] sm:w-[450px] h-[300px] sm:h-[450px] rounded-full border border-white/5 animate-pulse" />
            <div className="absolute w-[200px] sm:w-[350px] h-[200px] sm:h-[350px] rounded-full border border-dashed border-primary/10 animate-spin [animation-duration:40s]" />
            <div className="absolute w-[100px] sm:w-[250px] h-[100px] sm:h-[250px] rounded-full border border-accent-pink/10 animate-spin [animation-duration:20s] [animation-direction:reverse]" />
            
            <div className="w-full h-full">
              <Hero3D />
            </div>
          </div>

        </div>
      </div>

      {/* Highlights Marquee Ticker */}
      <div className="w-full bg-white/3 border-y border-white/5 py-4 relative z-10 overflow-hidden">
        <Marquee gradient={false} speed={55} className="font-sora text-sm font-extrabold tracking-widest">
          {highlights.map((text, idx) => (
            <div key={idx} className="flex items-center mx-8 space-x-3 text-white">
              <span className="h-2 w-2 rounded-full bg-primary" />
              <span>{text}</span>
            </div>
          ))}
        </Marquee>
      </div>
    </section>
  );
}
