// ===== POR QUE A NUBELLE =====
function PorqueNubelle() {
  const items = [
    { title: 'Naturalidade como critério', body: 'Não como promessa. Como parâmetro técnico em cada indicação e procedimento.' },
    { title: 'Personalização real', body: 'Cada plano é montado para você. Sem protocolo genérico, sem receita de bolo.' },
    { title: 'Fornecedores de referência', body: 'Trabalhamos com os melhores do mercado: Galderma, Rennova, PMG, Biomedi, ADCOS entre outros. Porque o que entra no seu organismo precisa ser o melhor disponível.' },
    { title: 'Laser Hakon 4D', body: '4 comprimentos de onda. O único com segurança real para todos os fototipos, fundamental numa cidade como Salvador.' },
    { title: 'Experiência no Living', body: 'Shot da Beleza, ambiente sensorial, acolhimento desde a chegada. A sala de espera que não parece sala de espera.' },
    { title: 'Miss Universo Brasil', body: 'Patrocinadora oficial pelo 3º ano consecutivo. Quando as mais exigentes do país escolhem uma clínica, elas escolhem a Nubelle.' },
  ];

  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      {/* watermark sutil */}
      <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-[0.04]">
        <img src="assets/nubelle-logo-rosa.png" alt="" style={{ width: '138%', maxWidth: 1380 }} />
      </div>

      <div className="relative max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="text-center mb-16">
          <Eyebrow>diferenciais</Eyebrow>
          <h2 className="font-display mt-5 mx-auto max-w-3xl" style={{ fontSize: 'clamp(30px, 4.2vw, 52px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Por que a Nubelle <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>e não outra clínica.</em>
          </h2>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-12">
          {items.map((it, i) => (
            <div key={i} className="flex gap-4">
              <div className="w-3 h-3 mt-2 shrink-0" style={{ background: C.ink }}></div>
              <div>
                <div className="font-display" style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em', color: C.ink }}>{it.title}</div>
                <p className="mt-2 text-sm" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.6 }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PorqueNubelle });