// ===== EXPERIÊNCIA NUBELLE =====
function Experiencia() {
  const cards = [
    { title: 'Shot da Beleza', body: 'Chegou? Seu shot especial já está a caminho. Uma forma de dizer: você está em boas mãos.' },
    { title: 'O Living', body: 'Sala de espera que parece sala de casa. Ambiente sensorial, música, luz pensados para você relaxar antes de começar.' },
    { title: 'Acolhimento real', body: 'Equipe treinada para ouvir de verdade. Sem pressa, sem julgamento. O seu ritmo é o ritmo da consulta.' },
    { title: 'Recebemos o mundo', body: 'Atendemos em inglês e espanhol. Salvador recebe o mundo, a Nubelle também.' },
  ];

  return (
    <section className="relative py-24 md:py-32" style={{ background: C.paper, color: C.ink }}>
      <div className="max-w-[1200px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-6">
            <Eyebrow>a experiência nubelle</Eyebrow>
            <h2 className="font-display mt-5" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.04, fontWeight: 700, letterSpacing: '-0.025em' }}>
              Começa antes. <br /><em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>Termina depois.</em>
            </h2>
            <p className="mt-7 text-lg" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.6, maxWidth: 500 }}>
              O cuidado na Nubelle não começa no momento do procedimento. Começa quando você chega: no aconchego do Living, no Shot da Beleza que a equipe prepara para você, no ambiente pensadoo em cada detalhe para que se sinta recebida de verdade.
            </p>
            <p className="mt-5 text-lg" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.6, maxWidth: 500 }}>
              Acolhimento não é treinamento aqui. <strong style={{ color: C.ink }}>É postura.</strong> Empatia não é protocolo. <strong style={{ color: C.ink }}>É cultura.</strong> Você vai se sentir vista, ouvida e cuidada — do primeiro ao último momento.
            </p>
          </div>

          <div className="md:col-span-6">
            <div className="relative aspect-[2/3] rounded-[28px] overflow-hidden mx-auto" style={{ border: `1px solid ${C.bone}`, background: C.bone, maxWidth: '80%' }}>
              <img src="assets/baiana-experiencia.png" alt="Baiana com vestido tradicional azul e branco recebendo convidados na Nubelle Salvador" className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: 'top center' }} />
            </div>
            <p className="text-xs mt-4 mx-auto text-center" style={{ color: 'rgba(14,59,58,0.55)', lineHeight: 1.5, maxWidth: '80%' }}>
              Inauguração Nubelle Salvador. Recepção com baiana de acarajé, no espírito da cidade.
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-5 mt-16">
          {cards.map((c, i) => (
            <div key={i} className="p-6 rounded-2xl" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
              <div className="w-8 h-8 rounded-full flex items-center justify-center mb-4" style={{ background: C.bone }}>
                <span className="font-display text-xs" style={{ color: C.coralDeep, fontWeight: 700 }}>{String(i+1).padStart(2,'0')}</span>
              </div>
              <div className="font-display" style={{ fontSize: 17, fontWeight: 700, color: C.ink, letterSpacing: '-0.01em' }}>{c.title}</div>
              <p className="mt-3 text-sm" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.55 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Experiencia });