// More sections - Tech, Pele Negra, Benefits, Pricing, Social, FAQ, Footer
const { useState: useState2, useEffect: useEffect2, useRef: useRef2 } = React;

// ====== TECH (Hakon 4D), black + neon, voltado ao paciente ======
function TechSection() {
  const wavelengths = [
  { nm: '694', name: 'Rubi', use: 'Para peles muito claras e pelos finos.' },
  { nm: '755', name: 'Alexandrite', use: 'Para peles muito claras e pelos finos.' },
  { nm: '808', name: 'Diodo', use: 'O mais versátil, atua em profundidade.' },
  { nm: '1064', name: 'Nd:YAG', use: 'Seguro para pele morena e negra.' }];

  // mouse spotlight
  React.useEffect(() => {
    const sec = document.getElementById('tecnologia');
    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 (
    <section id="tecnologia" className="relative py-24 md:py-32 overflow-hidden grain spotlight" style={{ background: '#050708', color: C.cream }}>
      {/* glow + grid */}
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 75% 25%, rgba(255,139,122,0.18) 0%, transparent 50%), radial-gradient(ellipse at 15% 85%, rgba(14,59,58,0.55) 0%, transparent 50%)`
      }}></div>
      <div className="absolute inset-0 opacity-[0.05]" 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 center, black 30%, transparent 80%)'
      }}></div>
      <div className="scanline"></div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-6">
            <div className="inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] mb-6 px-3 py-1.5 rounded-full" style={{ color: 'var(--neon)', border: '1px solid rgba(255,139,122,0.3)', background: 'rgba(255,139,122,0.06)' }}>
              <span className="w-1.5 h-1.5 rounded-full bg-[var(--neon)]" style={{ boxShadow: '0 0 12px var(--neon)' }}></span>
              a tecnologia que cuida de você
            </div>
            <h2 className="font-display" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', lineHeight: 0.95, fontWeight: 700, letterSpacing: '-0.035em' }}>
              Sua sessão na <br />
              <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>quarta dimensão</span> <br />
              <span style={{ fontWeight: 300 }}>do laser.</span>
            </h2>
            <p className="mt-8 text-lg max-w-lg" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
              Você não precisa entender de física. Só precisa saber isto: o <strong style={{ color: C.cream }}>Hakon 4D</strong> é o laser que escolhemos porque ele alcança o que outros aparelhos não alcançam, <span style={{ color: 'var(--neon)' }}>com mais conforto, mais segurança e mais resultado</span>, em qualquer fototipo de pele.
            </p>
            <p className="mt-4 text-lg max-w-lg" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
              É a evolução para você sair da sessão pensando: <em>"era só isso?"</em>
            </p>

            {/* spec pills */}
            <div className="mt-10 grid grid-cols-2 gap-3">
              {[
              ['−12°C', 'ponteira que resfria sua pele'],
              ['4', 'tipos de luz, calibrados pra você'],
              ['Todos', 'fototipos · da clara à negra'],
              ['ANVISA', 'aprovado · feito no Brasil']].
              map(([k, v]) =>
              <div key={k} className="p-4 rounded-2xl transition hover:-translate-y-0.5" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,139,122,0.15)' }}>
                  <div className="font-display text-3xl" style={{ color: 'var(--neon)', fontWeight: 700 }}>{k}</div>
                  <div className="text-xs mt-1" style={{ color: 'rgba(244,237,227,0.65)' }}>{v}</div>
                </div>
              )}
            </div>
          </div>

          {/* equipment showcase — Quarta Dimensão */}
          <div className="md:col-span-6 relative">
            {/* halo cônico girando externo */}
            <div className="absolute -inset-8 spin-slow opacity-40 pointer-events-none" style={{
              background: 'conic-gradient(from 0deg, transparent, rgba(255,139,122,0.6), transparent 25%, rgba(122,159,255,0.4), transparent 55%)',
              borderRadius: '50%',
              filter: 'blur(60px)'
            }}></div>
            {/* anel orbital decorativo */}
            <div className="absolute inset-0 spin-slow pointer-events-none" style={{ animation: 'spin-slow 60s linear infinite reverse' }}>
              <div className="absolute inset-4 rounded-full border-dashed" style={{ borderWidth: '1px', borderColor: 'rgba(255,139,122,0.15)' }}></div>
            </div>

            <div className="relative aspect-square rounded-[40px] overflow-hidden bob neon-glow" style={{
              background: 'radial-gradient(circle at 50% 30%, #1a1f2a 0%, #050708 80%)',
              border: '1px solid rgba(255,139,122,0.22)',
              boxShadow: '0 0 80px rgba(255,139,122,0.18), inset 0 0 80px rgba(255,139,122,0.06)'
            }}>
              {/* starfield bg */}
              <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 600 600">
                <defs><filter id="star-glow"><feGaussianBlur stdDeviation="1.5" /></filter></defs>
                {Array.from({ length: 40 }).map((_, i) => {
                  const x = (i * 137) % 600;
                  const y = (i * 211) % 600;
                  const r = 0.5 + (i % 3) * 0.6;
                  return (
                    <circle key={i} cx={x} cy={y} r={r} fill="#fff" opacity={0.2 + (i % 4) * 0.15} filter="url(#star-glow)">
                      <animate attributeName="opacity" values={`${0.1 + (i % 4) * 0.1};${0.4 + (i % 4) * 0.15};${0.1 + (i % 4) * 0.1}`} dur={`${3 + (i % 5)}s`} repeatCount="indefinite" begin={`${(i % 7) * 0.3}s`} />
                    </circle>
                  );
                })}
              </svg>

              {/* grid sutil */}
              <div className="absolute inset-0 opacity-[0.04] 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(circle at center, black 30%, transparent 75%)'
              }}></div>

              {/* glow inferior pulsante */}
              <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-1/3 pointer-events-none" style={{
                background: 'radial-gradient(ellipse at center bottom, rgba(255,139,122,0.35) 0%, transparent 70%)',
                animation: 'neon-pulse 4s ease-in-out infinite'
              }}></div>

              {/* equipamento */}
              <img src="assets/hakon-quarta-dimensao.png" alt="Hakon 4D — Quarta Dimensão" className="absolute inset-0 w-full h-full object-cover z-10" style={{
                filter: 'saturate(1.05) contrast(1.05) drop-shadow(0 30px 50px rgba(0,0,0,0.5))'
              }} />

              {/* scanline interna */}
              <div className="absolute inset-0 overflow-hidden pointer-events-none z-20">
                <div className="scanline" style={{ height: '180px' }}></div>
              </div>

              {/* partículas orbitando o equipamento */}
              <svg className="absolute inset-0 w-full h-full pointer-events-none z-20" viewBox="0 0 600 600">
                <defs><filter id="orbit-glow"><feGaussianBlur stdDeviation="3" /></filter></defs>
                {Array.from({ length: 5 }).map((_, i) => (
                  <circle key={i} r="2.5" fill="#FF8B7A" filter="url(#orbit-glow)">
                    <animateMotion dur={`${6 + i * 0.8}s`} repeatCount="indefinite" begin={`${i * 0.7}s`}
                      path="M 300,150 A 150,200 0 1,1 299,150 Z" />
                    <animate attributeName="opacity" values="0;1;1;0" dur={`${6 + i * 0.8}s`} repeatCount="indefinite" begin={`${i * 0.7}s`} />
                  </circle>
                ))}
              </svg>

              {/* labels técnicas */}
              <div className="absolute top-[42%] left-3 md:left-4 text-[9px] uppercase tracking-[0.2em] hidden md:block z-30" style={{ color: 'var(--neon)' }}>
                <div className="flex items-center gap-2">
                  <span>Tela inteligente</span>
                  <span className="w-10 h-px" style={{ background: 'var(--neon)', boxShadow: '0 0 6px var(--neon)' }}></span>
                </div>
              </div>
              <div className="absolute bottom-[35%] right-3 md:right-4 text-[9px] uppercase tracking-[0.2em] hidden md:block z-30" style={{ color: 'var(--neon)' }}>
                <div className="flex items-center gap-2">
                  <span className="w-10 h-px" style={{ background: 'var(--neon)', boxShadow: '0 0 6px var(--neon)' }}></span>
                  <span>Ponteira refrigerada</span>
                </div>
              </div>

            </div>

            {/* badge */}
            <div className="absolute -top-3 -right-3 px-4 py-2 rounded-full text-xs uppercase tracking-wider font-medium neon-glow z-40" style={{ background: '#0E3B3A', color: 'var(--neon)' }}>
              Hakon 4D · Medical San
            </div>
            {/* badge ANVISA */}
            <div className="absolute -bottom-3 -left-3 px-3 py-2 rounded-full text-[9px] uppercase tracking-[0.2em] z-40" style={{ background: '#051a1a', color: 'rgba(244,237,227,0.7)', border: '1px solid rgba(255,139,122,0.25)' }}>
              ANVISA · 82338020001
            </div>
          </div>
        </div>

        {/* wavelengths grid */}
        <div className="mt-24">
          <div className="flex items-end justify-between mb-8 flex-wrap gap-4">
            <h3 className="font-display text-3xl md:text-5xl" style={{ fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
              Quatro tipos de luz. <br />
              <span style={{ color: 'var(--neon)', fontStyle: 'italic', fontWeight: 900 }}>Uma equação só sua.</span>
            </h3>
            <div className="text-sm max-w-sm" style={{ color: 'rgba(244,237,227,0.65)', lineHeight: 1.55 }}>
              Cada cor de pele e cada tipo de pelo respondem de um jeito. Por isso o Hakon dispõe de quatro comprimentos de onda, para que sua sessão seja calibrada <em>pra você</em>, não pelo padrão da casa.
            </div>
          </div>
          <div className="grid md:grid-cols-4 gap-3">
            {wavelengths.map((w, i) =>
            <div key={w.nm} className="group relative p-6 rounded-2xl overflow-hidden transition-all hover:-translate-y-1.5 hover:bg-white/[0.06]" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,139,122,0.12)' }}>
                <div className="absolute top-0 left-0 right-0 h-[2px]" style={{
                background: ['#ff5050', '#ffc080', '#ff8b7a', '#7a9fff'][i],
                boxShadow: `0 0 12px ${['#ff5050', '#ffc080', '#ff8b7a', '#7a9fff'][i]}`
              }}></div>
                <div className="text-[10px] uppercase tracking-[0.2em] mb-3" style={{ color: 'var(--neon)' }}>{w.name}</div>
                <div className="font-display mb-3 flex items-baseline gap-1" style={{ fontWeight: 900, letterSpacing: '-0.04em' }}>
                  <span style={{ fontSize: 56, lineHeight: 0.9 }}>{w.nm}</span>
                  <span className="text-base opacity-50" style={{ fontWeight: 300 }}>nm</span>
                </div>
                <div className="text-sm" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.5 }}>{w.use}</div>
              </div>
            )}
          </div>
        </div>

        {/* cooling callout, neon */}
        <div className="mt-20 relative p-8 md:p-12 rounded-3xl flex flex-col md:flex-row gap-10 items-center overflow-hidden neon-glow" style={{
          background: 'linear-gradient(135deg, rgba(255,139,122,0.08) 0%, rgba(14,59,58,0.6) 100%)'
        }}>
          <div className="absolute -top-20 -right-20 w-80 h-80 rounded-full opacity-40 spin-slow pointer-events-none" style={{
            background: 'conic-gradient(from 0deg, transparent, var(--neon), transparent 25%)',
            filter: 'blur(60px)'
          }}></div>
          <div className="shrink-0 relative">
            <div className="absolute inset-0 rounded-full" style={{ boxShadow: '0 0 40px var(--neon)', opacity: 0.4 }}></div>
            <div className="relative w-36 h-36 rounded-full overflow-hidden" style={{ background: '#000', border: '2px solid rgba(255,139,122,0.4)' }}>
              <img src="assets/hakon-handpiece-cooling.png" alt="Ponteira resfriada" className="w-full h-full object-cover" />
            </div>
          </div>
          <div className="flex-1 relative">
            <div className="text-[10px] uppercase tracking-[0.3em] mb-3" style={{ color: 'var(--neon)' }}>● conforto real, não promessa de panfleto</div>
            <h4 className="font-display mb-4" style={{ fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1, fontWeight: 700, letterSpacing: '-0.02em' }}>
              A ponteira é <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>gelada</span>. <br />
              Sua pele agradece.
            </h4>
            <p className="text-base md:text-lg" style={{ color: 'rgba(244,237,227,0.8)', lineHeight: 1.55 }}>
              No exato instante do disparo, a ponteira do Hakon resfria sua pele a <strong style={{ color: 'var(--neon)' }}>−12°C</strong>. O calor do laser é neutralizado antes mesmo de virar desconforto. A maioria das nossas clientes descreve a sensação como um <em>formigamento gelado</em>, e sai dizendo que dói menos do que tirar com cera.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

// ====== Pele Negra & Morena, full-bleed ======
function PeleNegra() {
  return (
    <section className="relative py-24 md:py-32 overflow-hidden" style={{ background: C.ink, color: C.cream }}>
      <div className="absolute inset-0 opacity-[0.05]" style={{
        backgroundImage: `radial-gradient(circle at 80% 50%, ${C.coral} 0%, transparent 40%)`
      }}></div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-8 grid md:grid-cols-12 gap-12 items-center">
        <div className="md:col-span-5 order-2 md:order-1 relative">
          {/* halo cônico girando */}
          <div className="absolute -inset-6 spin-slow opacity-30 pointer-events-none" style={{
            background: 'conic-gradient(from 90deg, transparent, rgba(255,139,122,0.6), transparent 30%)',
            borderRadius: '40px',
            filter: 'blur(50px)'
          }}></div>

          <div className="relative aspect-[4/5] rounded-[32px] overflow-hidden bob neon-glow" style={{
            background: '#050708',
            border: '1px solid rgba(255,139,122,0.22)'
          }}>
            {/* grid sutil */}
            <div className="absolute inset-0 opacity-[0.06] pointer-events-none z-10" 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 modelo - tratada com filtros para integrar à paleta */}
            <img src="assets/fototipos-models-new.png" alt="Todos os fototipos, todos os tons de pele" className="absolute inset-0 w-full h-full object-cover z-0" style={{
              filter: 'saturate(0.92) contrast(1.05) brightness(0.96)'
            }} />

            {/* overlay verde profundo para harmonizar com a paleta */}
            <div className="absolute inset-0 z-10 pointer-events-none" style={{
              background: 'linear-gradient(180deg, rgba(14,59,58,0.15) 0%, transparent 30%, transparent 60%, rgba(5,7,8,0.7) 100%)'
            }}></div>
            {/* tint coral lateral suave */}
            <div className="absolute inset-0 z-10 pointer-events-none mix-blend-soft-light" style={{
              background: 'radial-gradient(ellipse at 0% 100%, rgba(255,139,122,0.4) 0%, transparent 50%)'
            }}></div>

            {/* scanline animada interna */}
            <div className="absolute inset-0 overflow-hidden z-20 pointer-events-none">
              <div className="scanline" style={{ height: '120px' }}></div>
            </div>

            {/* dots de luz orbitando, animados */}
            <svg className="absolute inset-0 w-full h-full z-20 pointer-events-none" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
              <defs>
                <filter id="pn-glow"><feGaussianBlur stdDeviation="3" /></filter>
              </defs>
              {Array.from({ length: 6 }).map((_, i) =>
              <circle key={i} cx={50 + i * 60} cy={460} r="2" fill="#FF8B7A" filter="url(#pn-glow)">
                  <animate attributeName="cy" values={`460;${100 + i * 30};460`} dur={`${5 + i * 0.4}s`} repeatCount="indefinite" begin={`${i * 0.5}s`} />
                  <animate attributeName="opacity" values="0;0.9;0" dur={`${5 + i * 0.4}s`} repeatCount="indefinite" begin={`${i * 0.5}s`} />
                </circle>
              )}
            </svg>

            {/* badge superior, fototipos I a VI */}
            <div className="absolute top-5 left-5 right-5 flex items-center justify-between gap-2 z-30">
              <div className="px-3 py-1.5 rounded-full backdrop-blur-md text-[10px] uppercase tracking-[0.25em] flex items-center gap-2" style={{ background: 'rgba(5,7,8,0.7)', border: '1px solid rgba(255,139,122,0.3)', color: 'var(--neon)' }}>
                <span className="w-1.5 h-1.5 rounded-full bg-[var(--neon)]" style={{ boxShadow: '0 0 8px var(--neon)' }}></span>
                Fototipos I a VI
              </div>
              <div className="flex gap-1">
                {['#f5dac1', '#d6a47d', '#b07a52', '#7a4c30', '#4d2d1a', '#2a160c'].map((c, i) =>
                <div key={i} className="w-3 h-6 rounded-full" style={{ background: c, boxShadow: '0 0 6px rgba(0,0,0,0.4)' }}></div>
                )}
              </div>
            </div>

            {/* legenda inferior */}
            <div className="absolute bottom-5 left-5 right-5 z-30">
              <div className="font-display text-2xl md:text-3xl leading-tight" style={{ color: C.cream, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Toda pele <span style={{ color: 'var(--neon)', fontStyle: 'italic', fontWeight: 900 }}>tem direito</span><br />
                ao mesmo cuidado.
              </div>
            </div>
          </div>

          {/* chip flutuante 1064nm */}
          <div className="absolute -top-4 -right-4 px-4 py-3 rounded-2xl shadow-2xl neon-glow z-40" style={{ background: '#0E3B3A', color: 'var(--neon)', transform: 'rotate(3deg)' }}>
            <div className="text-[10px] uppercase tracking-wider opacity-70">seguro para</div>
            <div className="font-display text-lg" style={{ fontWeight: 900, fontStyle: 'italic' }}>1064nm Nd:YAG</div>
          </div>
        </div>
        <div className="md:col-span-7 order-1 md:order-2">
          <div className="text-xs uppercase tracking-[0.3em] mb-6" style={{ color: C.coral }}>pele negra & morena</div>
          <h2 className="font-display" style={{ fontSize: 'clamp(38px, 5vw, 68px)', lineHeight: 0.98, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Pele negra, <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>pode SIM.</em><br />
            <span style={{ fontWeight: 300, color: 'rgba(244,237,227,0.85)' }}>Pele morena, também.</span>
          </h2>
          <p className="mt-6 text-lg" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.55 }}>
            Salvador tem <strong style={{ color: C.coral }}>83% de população preta ou parda</strong>. Por muito tempo, laser foi sinônimo de risco para pele escura, não sem razão. Quando o equipamento é inadequado ou o protocolo descuidado, o risco existe.
          </p>
          <p className="mt-4 text-lg" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.55 }}>
            Na Nubelle, esse medo tem <strong style={{ color: C.cream }}>resposta técnica</strong>, não comercial.
          </p>

          <ul className="mt-8 space-y-4">
            {[
            ['1064nm Nd:YAG', 'Penetra sem ser absorvido pela melanina superficial, risco mínimo de hiperpigmentação.'],
            ['Teste de disparo', 'Avaliamos a reação da sua pele antes de cada sessão.'],
            ['Calibração por fototipo', 'Intervalo entre sessões e energia ajustados para você, não para um padrão.']].
            map(([t, d]) =>
            <li key={t} className="flex gap-4 p-4 rounded-2xl" style={{ background: 'rgba(255,255,255,0.04)' }}>
                <div className="shrink-0 w-10 h-10 rounded-full flex items-center justify-center" style={{ background: C.coral, color: C.ink }}>✓</div>
                <div>
                  <div className="font-medium" style={{ color: C.cream }}>{t}</div>
                  <div className="text-sm mt-1" style={{ color: 'rgba(244,237,227,0.65)' }}>{d}</div>
                </div>
              </li>
            )}
          </ul>

          <blockquote className="mt-10 p-6 rounded-2xl" style={{ background: 'rgba(232,154,142,0.1)', borderLeft: `3px solid ${C.coral}` }}>
            <div className="font-serif text-2xl italic" style={{ color: C.cream }}>
              "Todo o medo de laser foi embora."
            </div>
            <div className="mt-2 text-sm" style={{ color: 'rgba(244,237,227,0.6)' }}>
             , Susana Souza · cliente Nubelle Salvador · ★★★★★
            </div>
          </blockquote>
        </div>
      </div>
    </section>);

}

// ====== BENEFITS — dark + neon carousel ======
function Benefits() {
  const items = [
  { num: '01', tag: 'Liberdade', title: 'Fim do improviso', body: 'Praia, academia, viagem. Sua pele fica progressivamente mais livre, o pensar antes de cada compromisso vai ficando para trás.' },
  { num: '02', tag: 'Pele', title: 'Adeus foliculite', body: 'Gilete e cera deixam um ciclo de foliculite, manchas escuras e pelos encravados. O laser interrompe o ciclo na raiz, e a pele lisa volta a ser regra, não exceção.' },
  { num: '03', tag: 'Método', title: 'Protocolo Vivo', body: 'A cada 3 sessões, avaliamos sua evolução e ajustamos. Se a pele reagiu diferente, se o ciclo mudou, adaptamos.' },
  { num: '04', tag: 'Pele negra & morena', title: 'Segurança para o seu fototipo', body: 'Em Salvador, 83% somos pretos e pardos. O Nd:YAG 1064nm é o comprimento de onda seguro para peles mais escuras. Protocolo calibrado por pele, e não receita única, com risco mínimo de hiperpigmentação para fototipos I a VI.' },
  { num: '05', tag: 'Para eles', title: 'Protocolo masculino', body: 'Costas, tórax, barba, axilas, nuca. Técnico e discreto. Sem linguagem de "beleza", sem constrangimento.' },
  { num: '06', tag: 'Confiança', title: 'Garantia Nubelle', body: 'Concluiu o Ritual Completo? Tem 12 meses para usar até 3 sessões de manutenção sem custo. Por escrito.' },
  { num: '07', tag: 'Recompensa', title: 'Cashback Nubelle', body: 'Indique alguém, acumule créditos. Use nas suas próximas sessões. O tratamento que se paga de volta.' },
  { num: '08', tag: 'Experiência', title: 'Nubelle by you', body: 'Do Shot da Beleza no Living à consulta conduzida com atenção e didatismo. Você não é atendida. É cuidada.' }];

  const trackRef = React.useRef(null);
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  // auto-advance
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setActive((a) => (a + 1) % items.length), 2800);
    return () => clearInterval(id);
  }, [paused, items.length]);

  // scroll to active card
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.children[active];
    if (card) {
      const offset = card.offsetLeft - track.offsetLeft - 32;
      track.scrollTo({ left: offset, behavior: 'smooth' });
    }
  }, [active]);

  return (
    <section className="relative py-24 md:py-32 overflow-hidden grain" style={{ background: '#050708', color: C.cream }}>
      {/* glows */}
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 90% 20%, rgba(255,139,122,0.18) 0%, transparent 45%), radial-gradient(ellipse at 10% 90%, rgba(14,59,58,0.6) 0%, transparent 45%)`
      }}></div>
      <div className="absolute inset-0 opacity-[0.04] 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 center, black 25%, transparent 80%)'
      }}></div>
      <div className="scanline"></div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-8">
        {/* HEADER em bloco superior */}
        <div className="max-w-4xl mb-10 md:mb-16">
          <div className="inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] mb-6 px-3 py-1.5 rounded-full" style={{ color: 'var(--neon)', border: '1px solid rgba(255,139,122,0.3)', background: 'rgba(255,139,122,0.06)' }}>
            <span className="w-1.5 h-1.5 rounded-full bg-[var(--neon)]" style={{ boxShadow: '0 0 12px var(--neon)' }}></span>
            o que muda na sua vida
          </div>
          <h2 className="font-display" style={{ fontSize: 'clamp(32px, 5vw, 72px)', lineHeight: 1, fontWeight: 700, letterSpacing: '-0.035em' }}>
            Não é só sobre <span style={{ fontWeight: 300 }}>pele.</span> <br />
            É sobre <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>rotina</span><span style={{ fontWeight: 300 }}>, autonomia e</span> <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>tempo de volta.</span>
          </h2>
        </div>

        {/* 2 COLUNAS, foto à esquerda + carrossel vertical à direita */}
        <div className="grid md:grid-cols-12 gap-6 md:gap-8 lg:gap-12 items-stretch">
          {/* COLUNA FOTO */}
          <div className="md:col-span-4 relative">
            {/* halo cônico atrás da foto */}
            <div className="absolute -inset-4 spin-slow opacity-30 pointer-events-none hidden md:block" style={{
              background: 'conic-gradient(from 180deg, transparent, rgba(255,139,122,0.55), transparent 30%)',
              borderRadius: '32px',
              filter: 'blur(50px)'
            }}></div>
            <div className="md:sticky md:top-24 relative aspect-[16/10] md:aspect-[3/4] rounded-[20px] md:rounded-[28px] overflow-hidden md:bob neon-glow mx-auto" style={{
              background: '#050708',
              border: '1px solid rgba(255,139,122,0.22)',
              maxWidth: '300px'
            }}>
              <img src="assets/lifestyle-beach.png" alt="Liberdade Nubelle" className="absolute inset-0 w-full h-full object-cover" style={{
                filter: 'saturate(0.88) contrast(1.05) brightness(0.94)'
              }} />
              <div className="absolute inset-0 mix-blend-soft-light" style={{
                background: 'linear-gradient(135deg, rgba(255,139,122,0.35) 0%, transparent 50%, rgba(14,59,58,0.6) 100%)'
              }}></div>
              <div className="absolute inset-0" style={{
                background: 'linear-gradient(180deg, transparent 50%, rgba(5,7,8,0.85) 100%)'
              }}></div>
              <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
                <defs><filter id="bn-glow"><feGaussianBlur stdDeviation="3" /></filter></defs>
                {Array.from({ length: 5 }).map((_, i) =>
                  <circle key={i} cx={60 + i * 70} cy={460} r="1.8" fill="#FF8B7A" filter="url(#bn-glow)">
                    <animate attributeName="cy" values={`460;${120 + i * 40};460`} dur={`${5 + i * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.6}s`} />
                    <animate attributeName="opacity" values="0;0.9;0" dur={`${5 + i * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.6}s`} />
                  </circle>
                )}
              </svg>
              <div className="absolute bottom-6 left-6 right-6 z-10">
                <div className="text-[10px] uppercase tracking-[0.3em] mb-2" style={{ color: 'var(--neon)' }}>● vida depois do laser</div>
                <div className="font-display text-2xl md:text-3xl leading-[0.95]" style={{ color: C.cream, fontWeight: 700, letterSpacing: '-0.025em' }}>
                  Sair de casa <br />
                  <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>sem pensar.</span>
                </div>
              </div>
            </div>
          </div>

          {/* COLUNA CARROSSEL */}
          <div className="md:col-span-8 flex flex-col">
            {/* controles */}
            <div className="flex items-center justify-between mb-5">
              <div className="text-[10px] uppercase tracking-[0.3em]" style={{ color: 'rgba(244,237,227,0.5)' }}>
                <span style={{ color: 'var(--neon)', fontWeight: 700 }}>{String(active + 1).padStart(2, '0')}</span> / {String(items.length).padStart(2, '0')} <span className="ml-3 opacity-50">benefícios</span>
              </div>
              <div className="flex items-center gap-2">
                <button onClick={() => { setPaused(true); setActive((a) => (a - 1 + items.length) % items.length); }} className="w-10 h-10 rounded-full transition hover:bg-white/10 flex items-center justify-center" style={{ border: '1px solid rgba(255,139,122,0.3)', color: 'var(--neon)' }}>←</button>
                <button onClick={() => { setPaused(true); setActive((a) => (a + 1) % items.length); }} className="w-10 h-10 rounded-full transition hover:bg-white/10 flex items-center justify-center" style={{ border: '1px solid rgba(255,139,122,0.3)', color: 'var(--neon)' }}>→</button>
              </div>
            </div>

            {/* TRACK horizontal dentro da coluna */}
            <div className="relative flex-1">
              {/* fade right */}
              <div className="absolute top-0 right-0 bottom-0 w-20 z-10 pointer-events-none" style={{
                background: 'linear-gradient(90deg, transparent, #050708 90%)'
              }}></div>
              <div ref={trackRef} className="flex gap-3 overflow-x-auto pb-4 snap-x snap-mandatory scrollbar-hide h-full" style={{ scrollbarWidth: 'none' }}
                onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
                <style>{`.scrollbar-hide::-webkit-scrollbar { display: none; }`}</style>
                {items.map((it, i) => {
                  const isActive = i === active;
                  return (
                    <div key={i} onClick={() => { setActive(i); setPaused(true); }} className="group relative shrink-0 w-[260px] md:w-[300px] p-5 md:p-6 rounded-3xl snap-start cursor-pointer transition-all duration-500 flex flex-col" style={{
                      background: isActive ? 'linear-gradient(145deg, rgba(255,139,122,0.12) 0%, rgba(14,59,58,0.4) 100%)' : 'rgba(255,255,255,0.03)',
                      border: isActive ? '1px solid rgba(255,139,122,0.5)' : '1px solid rgba(255,139,122,0.1)',
                      boxShadow: isActive ? '0 0 40px rgba(255,139,122,0.15), inset 0 0 30px rgba(255,139,122,0.05)' : 'none',
                      transform: isActive ? 'translateY(-4px)' : 'translateY(0)',
                      minHeight: '100%'
                    }}>
                      <div className="absolute top-0 left-0 right-0 h-[2px] rounded-t-3xl transition-opacity" style={{
                        background: 'var(--neon)',
                        boxShadow: '0 0 12px var(--neon)',
                        opacity: isActive ? 1 : 0.2
                      }}></div>
                      <div className="flex items-start justify-between mb-5">
                        <div className="font-display" style={{ fontSize: 56, lineHeight: 0.85, fontWeight: 900, color: isActive ? 'var(--neon)' : 'rgba(244,237,227,0.18)', fontStyle: 'italic', letterSpacing: '-0.05em', transition: 'color 0.5s' }}>{it.num}</div>
                        <div className="text-[9px] uppercase tracking-[0.2em] px-2.5 py-1 rounded-full" style={{ color: isActive ? 'var(--neon)' : 'rgba(244,237,227,0.5)', border: `1px solid ${isActive ? 'rgba(255,139,122,0.4)' : 'rgba(244,237,227,0.15)'}` }}>{it.tag}</div>
                      </div>
                      <h3 className="font-display text-xl md:text-2xl mb-3" style={{ fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.05, color: C.cream }}>{it.title}</h3>
                      <p className="text-sm flex-1" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.5 }}>{it.body}</p>
                    </div>);
                })}
                <div className="shrink-0 w-8"></div>
              </div>
            </div>

            {/* progress dots */}
            <div className="flex items-center justify-start gap-1.5 mt-6">
              {items.map((_, i) =>
                <button key={i} onClick={() => { setActive(i); setPaused(true); }} className="h-1 rounded-full transition-all" style={{
                  width: i === active ? 32 : 8,
                  background: i === active ? 'var(--neon)' : 'rgba(244,237,227,0.2)',
                  boxShadow: i === active ? '0 0 8px var(--neon)' : 'none'
                }}></button>
              )}
            </div>
          </div>
        </div>

        {/* CTA — quero estes benefícios */}
        <div className="mt-16 flex justify-center">
          <a href={waLink('Olá! Vim do site da Nubelle e quero saber mais sobre depilação a laser.')} target="_blank" rel="noopener" className="group inline-flex items-center gap-4 px-8 py-5 rounded-full transition-all hover:scale-[1.03] neon-glow" style={{ background: 'var(--neon)', color: '#051a1a' }}>
            <span className="font-display tracking-tight" style={{ fontWeight: 700, fontSize: '17px' }}>Quero estes benefícios</span>
            <span className="w-9 h-9 rounded-full flex items-center justify-center transition group-hover:translate-x-1" style={{ background: '#051a1a', color: 'var(--neon)' }}>→</span>
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { TechSection, PeleNegra, Benefits });