// ===== ÁREAS DE CUIDADO =====
// "O que podemos fazer por você" — 4 colunas
function Areas() {
  const cols = [
    {
      title: 'Parecer descansada,\nfirme e natural.',
      body: 'Rejuvenescimento facial com técnica e personalização. Botox, preenchimentos, harmonização, bioestimuladores. Realizamos exclusivamente com produtos Galderma, referência mundial em segurança e naturalidade.',
      list: ['Botox', 'Harmonização Facial', 'Belle Miss', 'Harmonização Labial', 'Belle Kiss', 'Bioestimulador', 'Skinbooster', 'Microagulhamento'],
    },
    {
      title: 'Remodelagem corporal\ncom estratégia, sem bisturi.',
      body: 'Do protocolo Belle Forma® ao Belle Bum®, trabalhamos com o corpo de forma personalizada, não cirúrgica e confortável. Injetáveis de alta qualidade e uma abordagem que trata gordura localizada e flacidez ao mesmo tempo.',
      list: ['Belle Forma®', 'Belle Bum®', 'Criolipólise', 'Radiofrequência', 'Enzimas Lipolíticas', 'Ultrassom', 'Manta Térmica', 'Corrente Russa', 'Drenagem Modeladora'],
    },
    {
      title: 'Pele livre de pelos,\nde escurecimento e\nde irritações.',
      body: 'Depilação a laser 4D com tecnologia Hakon, a melhor disponível no mercado. O protocolo exclusivo Nubelle combina 4 comprimentos de onda e sessões personalizadas com acompanhamento real para alcançar os resultados com conforto e segurança em todos os fototipos, incluindo peles negras e morenas.',
      pills: ['Todos os fototipos', 'Hakon 4D', 'Masculino e feminino', 'Todas as regiões', 'Manutenção garantida', 'Protocolo personalizado'],
    },
    {
      title: 'Começar pelo\nautocuidado e elevar\nsua experiência.',
      body: 'Protocolos SPA com linha ADCOS, limpeza de pele, luxo e massagens. A porta de entrada perfeita para quem quer conhecer a Nubelle, com toda a experiência da clínica desde o primeiro momento.',
      list: ['Limpeza de pele', 'Massagem relaxante', 'Massagem modeladora', 'Drenagem linfática', 'Day spa', 'Protocolos ADCOS'],
    },
  ];

  return (
    <section id="areas" className="relative py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      <div className="max-w-[1300px] mx-auto px-5 md:px-8">
        <div className="text-center mb-16">
          <Eyebrow>tratamentos</Eyebrow>
          <h2 className="font-display mt-5 mx-auto max-w-3xl" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
            O que podemos <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>fazer por você.</em>
          </h2>
          <p className="mt-5 text-lg" style={{ color: 'rgba(14,59,58,0.65)' }}>
            Cada área de cuidado começa com diagnóstico. Nunca com catálogo.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
          {cols.map((c, i) => (
            <div key={i} className="group relative p-7 rounded-[28px] transition-all hover:-translate-y-1 flex flex-col" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
              <div className="w-10 h-10 rounded-full flex items-center justify-center mb-6" style={{ background: C.bone }}>
                <span className="font-display text-sm" style={{ color: C.coralDeep, fontWeight: 700 }}>{String(i+1).padStart(2,'0')}</span>
              </div>
              <h3 className="font-display whitespace-pre-line" style={{ fontSize: 22, lineHeight: 1.15, fontWeight: 700, color: C.ink, letterSpacing: '-0.015em' }}>{c.title}</h3>
              <p className="mt-4 text-sm flex-1" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.55 }}>{c.body}</p>
              {c.list && (
                <ul className="mt-6 space-y-2">
                  {c.list.map((item, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm" style={{ color: 'rgba(14,59,58,0.78)' }}>
                      <span className="w-1 h-1 rounded-full" style={{ background: C.coralDeep }}></span>
                      {item}
                    </li>
                  ))}
                </ul>
              )}
              {c.pills && (
                <div className="mt-6 flex flex-wrap gap-2">
                  {c.pills.map((p, j) => (
                    <span key={j} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px]" style={{ background: 'rgba(232,154,142,0.12)', color: C.coralDeep, border: `1px solid rgba(232,154,142,0.25)` }}>
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
                      {p}
                    </span>
                  ))}
                </div>
              )}
              <div className="mt-7 h-1 w-10 rounded-full transition-all group-hover:w-20" style={{ background: C.coral }}></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Areas });