'use client'

import { useEffect, useRef, useState } from 'react'

/* ───── Barrinhas flutuantes estilo pill/tag ───── */
const tags = [
  { label: '✦ FAST CREW', bg: '#62b12f', color: '#ffffff', x: '5%',  y: '18%', delay: '0s',   anim: 'float' },
  { label: '❤ FIT LOVER',  bg: '#ed3535', color: '#ffffff', x: '78%', y: '14%', delay: '0.5s', anim: 'floatReverse' },
  { label: '✦ 100% REAL',  bg: '#7918d6', color: '#ffffff', x: '6%',  y: '62%', delay: '0.9s', anim: 'floatReverse' },
  { label: '✦ PRATICIDADE',bg: '#472813', color: '#ffbb1c', x: '74%', y: '60%', delay: '0.3s', anim: 'float' },
]

export default function HeroSection() {
  const heroRef = useRef<HTMLDivElement>(null)
  const [mouse, setMouse] = useState({ x: 0, y: 0 })

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!heroRef.current) return
      const rect = heroRef.current.getBoundingClientRect()
      const x = ((e.clientX - rect.left) / rect.width - 0.5) * 2
      const y = ((e.clientY - rect.top) / rect.height - 0.5) * 2
      setMouse({ x, y })
    }
    window.addEventListener('mousemove', handleMouseMove)
    return () => window.removeEventListener('mousemove', handleMouseMove)
  }, [])

  const scrollToForm = () => {
    document.getElementById('inscricao')?.scrollIntoView({ behavior: 'smooth' })
  }

  return (
    <section
      ref={heroRef}
      className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden px-6 py-28 md:py-32"
      style={{ background: '#ffbb1c' }}
      aria-label="Seção Hero - FAST CREW"
    >
      {/* Background organic blobs */}
      <div
        className="absolute rounded-full opacity-20 pointer-events-none"
        style={{
          width: 500, height: 500,
          background: '#472813',
          top: '-15%', left: '-10%',
          filter: 'blur(80px)',
          transform: `translate(${mouse.x * -20}px, ${mouse.y * -20}px)`,
          transition: 'transform 0.3s ease-out',
        }}
      />
      <div
        className="absolute rounded-full opacity-20 pointer-events-none"
        style={{
          width: 400, height: 400,
          background: '#7918d6',
          bottom: '-10%', right: '-5%',
          filter: 'blur(80px)',
          transform: `translate(${mouse.x * 15}px, ${mouse.y * 15}px)`,
          transition: 'transform 0.3s ease-out',
        }}
      />
      <div
        className="absolute rounded-full opacity-15 pointer-events-none"
        style={{
          width: 300, height: 300,
          background: '#62b12f',
          top: '40%', left: '30%',
          filter: 'blur(60px)',
          transform: `translate(${mouse.x * 10}px, ${mouse.y * 10}px)`,
          transition: 'transform 0.4s ease-out',
        }}
      />

      {/* Floating tag pills */}
      {tags.map((t) => (
        <div
          key={t.label}
          className="absolute hidden sm:flex select-none pointer-events-none items-center px-4 py-2 rounded-full"
          style={{
            left: t.x,
            top: t.y,
            background: t.bg,
            color: t.color,
            fontFamily: 'var(--font-display)',
            fontWeight: 900,
            fontSize: '0.75rem',
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            border: '2.5px solid rgba(255,255,255,0.25)',
            boxShadow: '3px 3px 0 rgba(71,40,19,0.3)',
            animationName: t.anim === 'float' ? 'float' : 'floatReverse',
            animationDuration: t.anim === 'float' ? '4s' : '5.5s',
            animationTimingFunction: 'ease-in-out',
            animationIterationCount: 'infinite',
            animationDelay: t.delay,
            transform: `translate(${mouse.x * -8}px, ${mouse.y * -8}px)`,
            transition: 'transform 0.25s ease-out',
          }}
          aria-hidden="true"
        >
          {t.label}
        </div>
      ))}

      {/* Logo badge */}
      <div className="mb-6 animate-fade-in-scale">
        <div
          className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-bold font-display uppercase tracking-widest"
          style={{
            background: '#472813',
            color: '#ffbb1c',
            border: '2px solid #472813',
            boxShadow: '3px 3px 0 rgba(255,255,255,0.4)',
          }}
        >
          <span style={{ fontSize: 18 }}>⚡</span>
          Programa de Influenciadores 2026
        </div>
      </div>

      {/* H1 */}
      <h1
        className="font-display font-black text-center text-balance leading-none mb-6 animate-slide-in-up"
        style={{
          color: '#472813',
          fontSize: 'clamp(2.8rem, 8vw, 6rem)',
          maxWidth: 900,
        }}
      >
        A praticidade
        <br />
        virou comunidade.
      </h1>

      {/* Subtitle */}
      <p
        className="text-center leading-relaxed mb-10 animate-slide-in-up delay-200 max-w-xl"
        style={{
          color: '#472813',
          fontSize: 'clamp(1.05rem, 2.5vw, 1.25rem)',
          opacity: 0.9,
        }}
      >
        Junte-se à{' '}
        <strong className="font-display font-black">FAST CREW</strong>
        . O time de criadores que entende que comer bem não precisa ser complicado. Receba marmitas, mimos e cupons exclusivos.
      </p>

      {/* CTA Button */}
      <button
        onClick={scrollToForm}
        className="relative group animate-slide-in-up delay-300 focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-purple-500"
        aria-label="Quero ser FAST CREW — ir para o formulário de inscrição"
      >
        <span
          className="absolute inset-0 rounded-2xl"
          style={{ background: '#472813', transform: 'translate(5px, 5px)', borderRadius: 20 }}
        />
        <span
          className="relative flex items-center gap-3 px-8 py-4 rounded-2xl text-white font-display font-black text-lg uppercase tracking-wide
            transition-all duration-150
            group-hover:-translate-y-1 group-hover:translate-x-0 group-hover:shadow-lg
            group-active:translate-y-1 group-active:translate-x-1"
          style={{ background: '#7918d6', borderRadius: 20, border: '2px solid #472813' }}
        >
          <span className="animate-bounce-pulse" aria-hidden="true">🚀</span>
          Quero ser FAST CREW
        </span>
      </button>



      {/* Scroll indicator */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce" aria-hidden="true">
        <span className="text-xs font-semibold uppercase tracking-widest" style={{ color: '#472813', opacity: 0.6 }}>Saiba mais</span>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#472813" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" opacity={0.6}>
          <path d="M12 5v14M5 12l7 7 7-7" />
        </svg>
      </div>
    </section>
  )
}