// ===== AGING / Identification =====
// "É possível gerenciar os sinais do envelhecimento"
function Aging() {
  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <Eyebrow>uma conversa antes do procedimento</Eyebrow>

        <div className="grid md:grid-cols-12 gap-12 items-start mt-6">
          <div className="md:col-span-7">
            <h2 className="font-display" style={{ fontSize: 'clamp(34px, 4.6vw, 60px)', lineHeight: 1.04, letterSpacing: '-0.025em', fontWeight: 700 }}>
              É possível gerenciar <br />
              os sinais do <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>envelhecimento.</em>
            </h2>
            <p className="mt-8 text-lg" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.6, maxWidth: 540 }}>
              Não como promessa. Como protocolo, ciência e cuidado feito para o <em>seu</em> organismo.
            </p>

            <ul className="mt-10 space-y-5">
              {[
                ['Resultado visível.', 'Sem cirurgia, sem afastamento, sem exagero.'],
                ['Cada plano é construído para você.', 'Sua pele, seu ritmo, sua história.'],
                ['Você merece esse cuidado.', 'E sim, pode ser para você, agora.'],
              ].map(([h, b], i) => (
                <li key={i} className="flex gap-4 items-start">
                  <div className="w-3 h-3 rounded-full mt-1.5 shrink-0" style={{ background: C.ink }}></div>
                  <div>
                    <div className="font-display" style={{ fontWeight: 700, fontSize: 18, color: C.ink, letterSpacing: '-0.01em' }}>{h}</div>
                    <div style={{ color: 'rgba(14,59,58,0.65)', fontSize: 16, marginTop: 2 }}>{b}</div>
                  </div>
                </li>
              ))}
            </ul>

            <div className="mt-10">
              <a href="#consulta" className="group inline-flex items-center gap-3 px-6 py-3.5 rounded-full font-display transition" style={{ background: 'transparent', color: C.ink, border: `1px solid ${C.ink}`, fontWeight: 700, fontSize: 14 }}>
                Entenda como funciona a Consulta Estratégica
                <span className="transition group-hover:translate-x-1">→</span>
              </a>
            </div>
          </div>

          {/* right image */}
          <div className="md:col-span-5">
            <div className="relative aspect-[11/10] rounded-[28px] overflow-hidden" style={{ border: `1px solid rgba(14,59,58,0.12)` }}>
              <img src="assets/consulta-photo.png" alt="Pacientes Nubelle: mulheres de diferentes idades, fototipos e biotipos" className="absolute inset-0 w-full h-full object-cover object-center" />
              <div className="absolute inset-x-0 bottom-0 h-[35%] pointer-events-none" style={{ background: 'linear-gradient(0deg, rgba(14,59,58,0.78) 0%, rgba(14,59,58,0.2) 60%, transparent 100%)' }}></div>
              <div className="absolute bottom-6 left-6 right-6 font-display italic" style={{ color: C.cream, fontSize: 16, letterSpacing: '0.08em', opacity: 0.95 }}>
                a sua beleza
              </div>
            </div>
            <p className="text-xs mt-4" style={{ color: 'rgba(14,59,58,0.55)', lineHeight: 1.5 }}>
              Atendemos todas as idades, fototipos e biotipos. Cada plano é feito para o seu corpo e a sua história.
            </p>
          </div>
        </div>

        {/* citação */}
        <div className="mt-24 text-center max-w-3xl mx-auto">
          <p className="font-display italic" style={{ color: C.ink, fontSize: 'clamp(24px, 3.2vw, 38px)', lineHeight: 1.25, letterSpacing: '-0.015em', fontWeight: 500 }}>
            "O tempo passa para todo mundo. <br />O que você faz com ele <em style={{ color: C.coralDeep, fontWeight: 900 }}>é uma escolha.</em>"
          </p>
          <p className="mt-6 text-sm uppercase tracking-[0.3em]" style={{ color: 'rgba(14,59,58,0.5)' }}>
            A Nubelle está aqui para essa conversa.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Aging });