import { useEffect, useRef } from "react"
import { Link } from "react-router"
import { ArrowRight, Zap, Shield, Clock, Users, Sparkles } from "lucide-react"

export function HeroSection() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return
    const ctx = canvas.getContext("2d")
    if (!ctx) return
    let w = canvas.width = window.innerWidth
    let h = canvas.height = window.innerHeight
    const particles = Array.from({ length: 100 }, () => ({
      x: Math.random() * w, y: Math.random() * h,
      vx: (Math.random() - 0.5) * 0.6, vy: (Math.random() - 0.5) * 0.6,
      size: Math.random() * 2.5 + 0.5,
      color: ["#f97316", "#22c55e", "#fb923c", "#4ade80"][Math.floor(Math.random() * 4)],
      alpha: Math.random() * 0.5 + 0.15,
    }))
    let frame: number
    const animate = () => {
      ctx.clearRect(0, 0, w, h)
      particles.forEach(p => {
        p.x += p.vx; p.y += p.vy
        if (p.x < 0 || p.x > w) p.vx *= -1
        if (p.y < 0 || p.y > h) p.vy *= -1
        ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2)
        ctx.fillStyle = p.color; ctx.globalAlpha = p.alpha; ctx.fill()
        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size * 3)
        grad.addColorStop(0, p.color); grad.addColorStop(1, "transparent")
        ctx.fillStyle = grad; ctx.globalAlpha = p.alpha * 0.25; ctx.fill()
      })
      ctx.globalAlpha = 0.06; ctx.strokeStyle = "#f97316"; ctx.lineWidth = 0.5
      for (let i = 0; i < particles.length; i++) {
        for (let j = i + 1; j < particles.length; j++) {
          const dx = particles[i].x - particles[j].x, dy = particles[i].y - particles[j].y
          if (Math.sqrt(dx*dx + dy*dy) < 150) { ctx.beginPath(); ctx.moveTo(particles[i].x, particles[i].y); ctx.lineTo(particles[j].x, particles[j].y); ctx.stroke() }
        }
      }
      ctx.globalAlpha = 1; frame = requestAnimationFrame(animate)
    }
    animate()
    const handleResize = () => { w = canvas.width = window.innerWidth; h = canvas.height = window.innerHeight }
    window.addEventListener("resize", handleResize)
    return () => { cancelAnimationFrame(frame); window.removeEventListener("resize", handleResize) }
  }, [])

  return (
    <section className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20">
      <canvas ref={canvasRef} className="absolute inset-0 z-0" />
      <div className="absolute inset-0 z-[1] opacity-25" style={{ backgroundImage: "url(/hero-bg.jpg)", backgroundSize: "cover", backgroundPosition: "center" }} />
      <div className="absolute inset-0 z-[2] bg-gradient-to-b from-[#030712]/80 via-[#030712]/50 to-[#030712]" />
      <div className="relative z-10 max-w-6xl mx-auto px-4 text-center">
        <div className="absolute top-10 left-4 md:left-12 animate-float hidden md:block">
          <div className="glass-card px-4 py-2 flex items-center gap-2"><Users className="w-4 h-4 text-[#f97316]" /><span className="text-sm font-medium">10,000+ Customers</span></div>
        </div>
        <div className="absolute top-28 right-4 md:right-12 animate-float hidden md:block" style={{ animationDelay: "2s" }}>
          <div className="glass-card px-4 py-2 flex items-center gap-2"><Clock className="w-4 h-4 text-[#22c55e]" /><span className="text-sm font-medium">Instant Delivery</span></div>
        </div>
        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#f97316]/10 border border-[#f97316]/20 mb-8">
          <Sparkles className="w-4 h-4 text-[#f97316]" />
          <span className="text-sm font-medium text-[#f97316]">Premium Subscriptions Marketplace</span>
        </div>
        <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
          Unlock Premium<br /><span className="text-gradient">Digital Subscriptions</span>
        </h1>
        <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto mb-10">
          Get genuine licenses for Netflix, Spotify, Canva Pro, ChatGPT, Adobe Creative Cloud and 75+ more premium tools at up to 96% off.
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
          <Link to="/shop" className="btn-primary text-lg px-8 py-4 flex items-center gap-2"><Zap className="w-5 h-5" />Explore Products<ArrowRight className="w-5 h-5" /></Link>
          <a href="https://wa.me/917038146526" target="_blank" rel="noopener noreferrer nofollow" className="px-8 py-4 rounded-full border border-white/20 hover:bg-white/5 transition-all flex items-center gap-2"><Shield className="w-5 h-5 text-[#22c55e]" />WhatsApp Support</a>
        </div>
        <div className="flex flex-wrap items-center justify-center gap-6 md:gap-10 text-sm text-slate-400">
          {["81+ Products","96% Off Retail","2-Min Delivery","24H Refund"].map(t => (
            <div key={t} className="flex items-center gap-2"><span className="text-green-400 text-lg">✓</span>{t}</div>
          ))}
        </div>
      </div>
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-[#030712] to-transparent z-[3]" />
    </section>
  )
}