// ===== HERO =====
// "Resultado que as pessoas notam. Tratamento que só você sabe."
function Hero() {
  React.useEffect(() => {
    const sec = document.getElementById('hero-inst');
    if (!sec) return;
    const onMove = (e) => {
      const r = sec.getBoundingClientRect();
      sec.style.setProperty('--mx', `${e.clientX - r.left}px`);
      sec.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    sec.addEventListener('mousemove', onMove);
    return () => sec.removeEventListener('mousemove', onMove);
  }, []);

  return (
    <>
      <TopNav />
      <section id="hero-inst" className="relative overflow-hidden grain spotlight" style={{ background: C.inkDark, color: C.cream, '--mx': '1200px', '--my': '300px' }}>
        {/* glows */}
        <div className="absolute inset-0 pointer-events-none" style={{
          backgroundImage: `radial-gradient(ellipse at 18% 78%, rgba(255,139,122,0.18) 0%, transparent 50%), radial-gradient(ellipse at 82% 18%, rgba(14,59,58,0.7) 0%, transparent 55%)`
        }}></div>
        {/* grid */}
        <div className="absolute inset-0 opacity-[0.05] pointer-events-none" style={{
          backgroundImage: 'linear-gradient(rgba(255,139,122,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,139,122,0.6) 1px, transparent 1px)',
          backgroundSize: '80px 80px',
          maskImage: 'radial-gradient(ellipse at 60% 40%, black 25%, transparent 75%)'
        }}></div>
        <div className="scanline"></div>

        <div id="top" className="relative z-10 max-w-[1400px] mx-auto px-5 md:px-8 pt-32 pb-24 md:pt-40 md:pb-36 grid md:grid-cols-12 gap-12 items-center">
          {/* texto */}
          <div className="md:col-span-7">
            <Pill dark>Rio Vermelho · Salvador-BA</Pill>
            <h1 className="font-display mt-8" style={{ fontSize: 'clamp(40px, 6.2vw, 88px)', lineHeight: 0.96, fontWeight: 700, letterSpacing: '-0.035em' }}>
              Resultado que as <br />
              pessoas <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>notam.</span> <br />
              <span style={{ fontWeight: 300 }}>Tratamento que <br />só você sabe.</span>
            </h1>
            <p className="mt-8 text-lg md:text-xl max-w-xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.55 }}>
              A maioria das clínicas começa pelo procedimento. <strong style={{ color: C.cream }}>A Nubelle começa por você.</strong> Uma conversa, e você vai entender a diferença.
            </p>

            <div className="mt-10 flex flex-col sm:flex-row gap-4">
              <PrimaryCTA href={waLink('Olá! Quero agendar minha Consulta Estratégica na Nubelle.')} target="_blank" sub="Sem compromisso · resposta em minutos">
                Agendar minha Consulta Estratégica
              </PrimaryCTA>
              <GhostCTA href={waLink('Olá! Tenho algumas dúvidas antes de agendar.')} target="_blank">
                Falar com a nossa equipe
              </GhostCTA>
            </div>

            {/* trust strip */}
            <div className="mt-12 flex flex-wrap gap-x-8 gap-y-3 text-sm items-center" style={{ color: 'rgba(244,237,227,0.6)' }}>
              <div className="flex items-center gap-2">
                <span className="flex gap-0.5">
                  {[1,2,3,4,5].map(i => <Star key={i} />)}
                </span>
                <span>5,0 · 150+ avaliações no Google</span>
              </div>
              <div className="hidden sm:block w-px h-4" style={{ background: 'rgba(244,237,227,0.18)' }}></div>
              <div>Rio Vermelho · Salvador</div>
            </div>

            <div className="mt-8 text-[11px] uppercase tracking-[0.3em]" style={{ color: 'rgba(255,139,122,0.7)' }}>
              <span className="opacity-60">✦</span> Patrocinadora Oficial Miss Universo Brasil
            </div>
          </div>

          {/* visual */}
          <div className="md:col-span-5 relative">
            {/* halo cônico */}
            <div className="absolute inset-0 spin-slow opacity-40 pointer-events-none" style={{
              background: 'conic-gradient(from 0deg, transparent, rgba(255,139,122,0.5), transparent 25%)',
              borderRadius: '50%', filter: 'blur(60px)'
            }}></div>
            <div className="relative aspect-[4/5] rounded-[40px] overflow-hidden bob neon-glow" style={{
              background: 'radial-gradient(circle at 50% 30%, #14171d 0%, #050708 80%)',
              border: '1px solid rgba(255,139,122,0.22)'
            }}>
              {/* grid sutil */}
              <div className="absolute inset-0 opacity-[0.08] pointer-events-none" style={{
                backgroundImage: 'linear-gradient(rgba(255,139,122,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,139,122,0.6) 1px, transparent 1px)',
                backgroundSize: '40px 40px',
                maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)'
              }}></div>

              {/* foto */}
              <img src="assets/hero-photo.png" alt="Cliente Nubelle Salvador no Living, com robe branco bordado Miss Universe Brasil 2024, em frente ao logo U iluminado" className="absolute inset-0 w-full h-full object-cover object-center z-10" style={{ transform: 'scale(1.05)', transformOrigin: 'center center' }} />

              <div className="absolute inset-0 pointer-events-none z-20" style={{ background: 'linear-gradient(180deg, rgba(5,7,8,0.15) 0%, transparent 30%, transparent 60%, rgba(5,7,8,0.55) 100%)' }}></div>

              {/* card flutuante */}
              <div className="absolute top-[78%] -translate-y-1/2 left-4 p-3 rounded-2xl backdrop-blur-md z-30 max-w-[210px]" style={{ background: 'rgba(5,7,8,0.78)', border: '1px solid rgba(255,139,122,0.3)' }}>
                <div className="flex items-center gap-2.5">
                  <div className="w-9 h-9 rounded-full flex items-center justify-center neon-glow shrink-0" style={{ background: C.neon, color: C.inkDeep }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
                  </div>
                  <div className="min-w-0">
                    <div className="text-[10px] uppercase tracking-[0.2em]" style={{ color: C.neon }}>Consulta Estratégica</div>
                    <div className="text-[11px] leading-tight" style={{ color: C.cream }}>Diagnóstico real<br />antes do plano</div>
                  </div>
                </div>
              </div>
            </div>

            {/* chip superior esquerdo */}
            <div className="absolute -top-4 -left-4 px-4 py-3 rounded-2xl shadow-2xl neon-glow z-40 hidden md:block" style={{ background: C.ink, color: C.neon, transform: 'rotate(-3deg)' }}>
              <div className="text-[10px] uppercase tracking-wider opacity-70">desde</div>
              <div className="font-display text-xl" style={{ fontWeight: 900, fontStyle: 'italic' }}>2018</div>
            </div>
            {/* chip inferior */}
            <div className="absolute -bottom-6 -right-2 px-5 py-4 rounded-2xl shadow-2xl z-40 hidden md:block" style={{ background: C.cream, color: C.ink, transform: 'rotate(2deg)', textAlign: 'right' }}>
              <div className="flex gap-1 mb-1 justify-end">
                {[1,2,3,4,5].map(i => <span key={i} style={{ color: C.coralDeep }}>★</span>)}
              </div>
              <div className="text-xs">"Atendimento de excelência."</div>
              <div className="text-[10px] opacity-60 mt-1">· Alice E.</div>
            </div>
          </div>
        </div>

        {/* marquee */}
        <div className="relative border-t border-b py-5 overflow-hidden" style={{ borderColor: 'rgba(244,237,227,0.1)' }}>
          <div className="flex gap-12 whitespace-nowrap animate-marquee">
            {Array(3).fill(0).map((_, i) => (
              <div key={i} className="flex gap-12 items-center text-2xl md:text-3xl" style={{ color: 'rgba(244,237,227,0.4)' }}>
                <span style={{ fontStyle: 'italic' }}>diagnóstico antes do plano</span>
                <span style={{ color: C.coral }}>✦</span>
                <span>Equipe Nubelle</span>
                <span style={{ color: C.coral }}>✦</span>
                <span style={{ fontStyle: 'italic' }}>protocolos exclusivos</span>
                <span style={{ color: C.coral }}>✦</span>
                <span>Hakon 4D</span>
                <span style={{ color: C.coral }}>✦</span>
                <span style={{ fontStyle: 'italic' }}>Miss Universo Brasil</span>
                <span style={{ color: C.coral }}>✦</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function Star() {
  return <svg width="13" height="13" viewBox="0 0 24 24" fill={C.coral}><path d="M12 2l2.9 6.9L22 10l-5.5 4.7 1.7 7.3L12 18.3 5.8 22l1.7-7.3L2 10l7.1-1.1L12 2z"/></svg>;
}

Object.assign(window, { Hero, Star });