// ===== PROTOCOLOS EXCLUSIVOS =====
function Protocolos() {
  const list = [
    { name: 'Belle Kiss', tag: 'O DESENHO PERFEITO', pills: ['Contorno','Formato','Rejeitabilidade'], body: 'Para quem quer lábios definidos com naturalidade. Técnica exclusiva com ácido hialurônico.' },
    { name: 'Belle Bum', tag: 'LEVANTOU, VALORIZOU.', pills: ['Firmeza','Volume','Tonificação'], body: 'Protocolo completo para glúteos. Tecnologia de ponta e abordagem natural para se sentir bem em qualquer look.' },
    { name: 'Belle Miss', tag: 'ENCANTO SEM FILTROS', pills: ['Simetria','Contorno','Harmonia'], body: 'Harmonização facial com naturalidade. Maçãs do rosto definidas, olhar elegante, sem maquiagem de contorno.', highlight: true },
    { name: 'Belle Forma', tag: 'SUA MELHOR FORMA', pills: ['Redução de medidas','Firmeza','Leveza'], body: 'Protocolo exclusivo de remodelagem corporal inteligente. Combina injetáveis de alta qualidade, enzimas lipolíticas e compostos de suporte metabólico, com criolipólise, radiofrequência, ultrassom, manta térmica, corrente russa e drenagem modeladora. Gordura localizada e flacidez tratadas simultaneamente, sem bisturi.' },
    { name: 'Belle Depila 4D', tag: 'PELE LIVRE, SEM IRRITAÇÕES', pills: ['Hakon 4D','Todos os fototipos','Garantia 12 meses'], body: 'Protocolo de depilação a laser exclusivo da Nubelle. Tecnologia Hakon 4D com 4 comprimentos de onda, segura para todos os fototipos, incluindo peles negras e morenas. Acompanhamento real a cada 3 sessões.', cta: '#depilacao' },
    { name: 'Ativa Max', tag: 'DEFINIÇÃO DE ALTO NÍVEL', pills: ['Definição','Presença','Autoestima'], body: 'Protocolo exclusivo para o maxilar masculino. Traços definidos, aparência imponente, resultado natural.' },
    { name: 'Nubelle Relance', tag: 'SUA VERSÃO PLENA E RADIANTE', pills: ['Rejuvenescimento','Autoestima','Radiance'], body: 'Protocolo premium de rejuvenescimento total para peles maduras. Múltiplas técnicas combinadas para uma nova fase.' },
    { name: 'SPA Premium', tag: 'AUTOCUIDADO QUE COMEÇA AQUI', pills: ['Bem-estar','Sensorial','Premium'], body: 'A porta de entrada para a experiência Nubelle. Limpeza de pele luxo, massagem relaxante, terapêutica e modeladora, drenagem linfática, bambuterapia, ventosaterapia, pedras quentes e mais. Cuidado completo em ambiente sensorial.' },
  ];

  return (
    <section id="protocolos" className="relative overflow-hidden py-24 md:py-32" style={{ background: C.inkDark, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 20% 20%, rgba(255,139,122,0.14) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(14,59,58,0.6) 0%, transparent 50%)`
      }}></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: '60px 60px',
        maskImage: 'radial-gradient(ellipse at center, black 25%, transparent 75%)'
      }}></div>
      <div className="scanline"></div>

      <div className="relative max-w-[1300px] mx-auto px-5 md:px-8">
        <div className="text-center mb-16">
          <Pill dark>Protocolos exclusivos</Pill>
          <h2 className="font-display mt-6 mx-auto max-w-4xl" style={{ fontSize: 'clamp(30px, 4vw, 52px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Desenvolvidos <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>exclusivamente</em> pela Nubelle.
          </h2>
          <p className="mt-5 text-lg" style={{ color: 'rgba(244,237,227,0.65)' }}>
            Criados aqui. Não encontrados em nenhuma outra clínica.<br />Cada um com nome, método e identidade próprias.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
          {list.map((p, i) => (
            <div key={i} className="group relative p-7 rounded-[28px] transition hover:-translate-y-1 overflow-hidden" style={{
              background: C.inkDeep,
              border: '1px solid rgba(255,139,122,0.18)'
            }}>
              {/* corner glow */}
              <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full opacity-30 group-hover:opacity-60 transition" style={{ background: 'radial-gradient(circle, rgba(255,139,122,0.4), transparent 70%)' }}></div>

              <div className="relative">
                <h3 className="font-display" style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', color: C.cream }}>{p.name}</h3>
                <div className="text-[10px] uppercase tracking-[0.3em] mt-1.5 font-semibold" style={{ color: C.coral }}>{p.tag}</div>

                <div className="mt-5 flex flex-wrap gap-2">
                  {p.pills.map((pl, j) => (
                    <span key={j} className="px-2.5 py-1 rounded-full text-[11px]" style={{ background: 'rgba(255,139,122,0.06)', color: 'rgba(244,237,227,0.85)', border: '1px solid rgba(255,139,122,0.2)' }}>{pl}</span>
                  ))}
                </div>

                <p className="mt-5 text-sm" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.55 }}>{p.body}</p>

                {p.highlight && (
                  <div className="mt-5 inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[10px] uppercase tracking-[0.2em] font-semibold" style={{ background: 'rgba(255,139,122,0.18)', color: C.neon, border: '1px solid rgba(255,139,122,0.4)' }}>
                    ✦ Patrocinador Miss Universo Brasil
                  </div>
                )}
                {p.cta && (
                  <a href={p.cta} className="mt-5 inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] font-semibold transition hover:gap-3" style={{ color: C.neon }}>
                    Ver protocolo completo →
                  </a>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Protocolos });