'use client'

import { useEffect, useRef, useState } from 'react'
import dynamic from 'next/dynamic'

const Lottie = dynamic(() => import('lottie-react'), { ssr: false })

import deliveryCourier from '@/public/lottie/delivery-courier.json'
import influencer from '@/public/lottie/influencer.json'
import salad from '@/public/lottie/salad.json'
import likes from '@/public/lottie/likes.json'
import like from '@/public/lottie/like.json'

const requirements = [
  'Ama compartilhar sua rotina real.',
  'Tem uma audiência engajada.',
  'Tem mais de 3.000 seguidores no Instagram.',
  'Gosta de praticidade, sabor e saúde.',
]

function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null)
  const [inView, setInView] = useState(false)
  useEffect(() => {
    const el = ref.current
    if (!el) return
    const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) setInView(true) }, { threshold })
    obs.observe(el)
    return () => obs.disconnect()
  }, [threshold])
  return { ref, inView }
}

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

const tiles = [
  {
    anim: deliveryCourier,
    label: 'Marmitas na sua porta',
    bg: '#ffbb1c',
    textColor: '#472813',
    animClass: 'animate-float',
  },
  {
    anim: influencer,
    label: 'Conteúdo real e autêntico',
    bg: '#7918d6',
    textColor: '#ffffff',
    animClass: 'animate-float-reverse',
  },
  {
    anim: salad,
    label: 'Saúde sem abrir mão do sabor',
    bg: '#62b12f',
    textColor: '#ffffff',
    animClass: 'animate-float',
    animDelay: '0.6s',
  },
  {
    anim: likes,
    label: 'Comunidade que engaja',
    bg: '#ed3535',
    textColor: '#ffffff',
    animClass: 'animate-float-reverse',
    animDelay: '1s',
  },
]

export default function RequirementsSection() {
  const textBlock = useInView()
  const imageBlock = useInView()

  return (
    <section
      id="requisitos"
      className="relative overflow-hidden py-24 px-6"
      style={{ background: '#472813' }}
      aria-labelledby="requirements-title"
    >
      {/* Background pattern */}
      <div
        className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-5"
        style={{
          backgroundImage: `repeating-linear-gradient(45deg, #ffbb1c 0px, #ffbb1c 1px, transparent 0px, transparent 50%)`,
          backgroundSize: '40px 40px',
        }}
        aria-hidden="true"
      />

      {/* Floating accent blobs */}
      <div
        className="absolute rounded-full opacity-10 animate-float pointer-events-none"
        style={{ width: 280, height: 280, background: '#ffbb1c', top: '-8%', right: '5%', filter: 'blur(40px)' }}
        aria-hidden="true"
      />
      <div
        className="absolute rounded-full opacity-10 animate-float-reverse pointer-events-none"
        style={{ width: 200, height: 200, background: '#62b12f', bottom: '5%', left: '3%', filter: 'blur(40px)' }}
        aria-hidden="true"
      />

      <div className="max-w-5xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

          {/* Text block */}
          <div
            ref={textBlock.ref}
            style={{
              opacity: textBlock.inView ? 1 : 0,
              transform: textBlock.inView ? 'translateX(0)' : 'translateX(-50px)',
              transition: 'all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1)',
            }}
          >
            <div
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-6 text-sm font-bold uppercase tracking-widest"
              style={{ background: '#ffbb1c', color: '#472813' }}
            >
              ✦ O perfil ideal
            </div>

            <h2
              id="requirements-title"
              className="font-display font-black leading-none mb-8 text-balance"
              style={{ color: '#ffbb1c', fontSize: 'clamp(2rem, 5vw, 3.5rem)' }}
            >
              Damos match
              <br />
              <span style={{ color: '#ffffff' }}>se você...</span>
            </h2>

            <ul className="flex flex-col gap-4" role="list">
              {requirements.map((req, i) => (
                <li
                  key={i}
                  className="flex items-start gap-4"
                  style={{
                    opacity: textBlock.inView ? 1 : 0,
                    transform: textBlock.inView ? 'translateX(0)' : 'translateX(-20px)',
                    transition: `all 0.5s ease-out ${0.2 + i * 0.1}s`,
                  }}
                >
                  <div
                    className="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center mt-0.5"
                    style={{ background: '#62b12f', border: '2px solid rgba(255,255,255,0.2)' }}
                    aria-hidden="true"
                  >
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                      <path d="M3 8l3.5 3.5L13 4" stroke="#ffffff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </div>
                  <span className="text-base leading-relaxed" style={{ color: '#ffffff' }}>
                    {req}
                  </span>
                </li>
              ))}
            </ul>

            {/* Card "se você se identificou" — troca ícone por Lottie like */}
            <div
              className="mt-10 flex items-start gap-3 px-5 py-4 rounded-2xl"
              style={{ background: 'rgba(255,255,255,0.08)', border: '1.5px solid rgba(255,255,255,0.15)' }}
            >
              <div className="flex-shrink-0 w-10 h-10" aria-hidden="true">
                <Lottie animationData={like} loop autoplay style={{ width: '100%', height: '100%' }} />
              </div>
              <p className="text-base leading-relaxed" style={{ color: 'rgba(255,255,255,0.75)' }}>
                Se você se identificou com pelo menos{' '}
                <strong style={{ color: '#ffbb1c' }}>2 desses pontos</strong>, já temos uma boa conversa pela frente!
              </p>
            </div>
          </div>

          {/* Visual mosaic block */}
          <div
            ref={imageBlock.ref}
            className="relative"
            style={{
              opacity: imageBlock.inView ? 1 : 0,
              transform: imageBlock.inView ? 'translateX(0)' : 'translateX(50px)',
              transition: 'all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s',
            }}
          >
            <div className="grid grid-cols-2 gap-4">
              {tiles.map((tile, i) => (
                <div
                  key={i}
                  className={`aspect-square rounded-3xl flex flex-col items-center justify-center p-5 text-center ${tile.animClass}`}
                  style={{
                    background: tile.bg,
                    border: '3px solid rgba(255,255,255,0.2)',
                    animationDelay: tile.animDelay ?? '0s',
                  }}
                >
                  <div className="w-16 h-16 mb-2" aria-hidden="true">
                    <Lottie animationData={tile.anim} loop autoplay style={{ width: '100%', height: '100%' }} />
                  </div>
                  <p className="font-display font-black text-sm sm:text-base leading-tight" style={{ color: tile.textColor }}>
                    {tile.label}
                  </p>
                </div>
              ))}
            </div>

            {/* Floating badge */}
            <div
              className="absolute -bottom-5 -left-5 px-4 py-2 rounded-2xl font-display font-black text-sm animate-wiggle"
              style={{ background: '#ffbb1c', border: '2.5px solid #472813', color: '#472813', boxShadow: '4px 4px 0 #472813' }}
            >
              +3k seguidores = match! 🎯
            </div>
          </div>
        </div>

        {/* CTA Button — centered below both columns */}
        <div
          className="mt-16 flex justify-center"
          style={{
            opacity: textBlock.inView ? 1 : 0,
            transform: textBlock.inView ? 'translateY(0)' : 'translateY(20px)',
            transition: 'all 0.6s ease 0.6s',
          }}
        >
          <button
            onClick={scrollToForm}
            className="relative group focus:outline-none focus-visible:ring-4 focus-visible:ring-offset-2 focus-visible:ring-yellow-400"
            aria-label="Quero ser FAST CREW — ir para o formulário de inscrição"
          >
            <span
              className="absolute inset-0 rounded-2xl"
              style={{ background: 'rgba(255,255,255,0.3)', 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-active:translate-y-1 group-active:translate-x-1"
              style={{ background: '#7918d6', borderRadius: 20, border: '2px solid rgba(255,255,255,0.3)' }}
            >
              <span className="animate-bounce-pulse" aria-hidden="true">🚀</span>
              Quero ser FAST CREW
            </span>
          </button>
        </div>
      </div>
    </section>
  )
}