// ===== CONSULTA ESTRATÉGICA =====
// "Chega com as suas dúvidas. Vai embora com um plano feito para você."
function ConsultaEstrategica() {
  const steps = [
    ['01', 'Escuta', 'Você conta o que te incomoda e o que espera.'],
    ['02', 'Diagnóstico', 'Nossa equipe analisa com olhar clínico e personalizado.'],
    ['03', 'Plano', 'Recebe uma proposta de tratamento feita para você.'],
    ['04', 'Decisão', 'Sem pressão. Você decide no seu tempo.'],
  ];
  return (
    <section id="consulta" className="relative overflow-hidden py-24 md:py-32" style={{ background: C.ink, color: C.cream }}>
      {/* atmosfera */}
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 80% 20%, rgba(255,139,122,0.12) 0%, transparent 50%), radial-gradient(ellipse at 20% 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="relative max-w-[1200px] mx-auto px-5 md:px-8 grid md:grid-cols-12 gap-12 items-start">
        {/* esquerda — texto + steps */}
        <div className="md:col-span-7">
          <Pill dark>consulta estratégica</Pill>
          <h2 className="font-display mt-6" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.04, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Chega com dúvidas. <br />
            Sai com <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>um plano feito para você.</em>
          </h2>
          <p className="mt-8 text-lg max-w-xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
            A maioria das pessoas chega com uma lista de procedimentos na cabeça. Na Consulta Estratégica, sai com algo muito mais valioso: <strong style={{ color: C.cream }}>um plano que faz sentido para o seu caso, no seu momento, com o seu organismo.</strong> Diagnóstico amplo, escuta real, proposta honesta, sem protocolo pronto, sem pressão.
          </p>

          <ol className="mt-12 space-y-6">
            {steps.map(([n, t, d], i) => (
              <li key={n} className="flex gap-5 items-start" style={{ animationDelay: `${i * 0.08}s` }}>
                <div className="font-display text-2xl shrink-0 w-10 text-center" style={{ color: C.coral, fontWeight: 300, fontStyle: 'italic' }}>{n}</div>
                <div className="flex-1 pb-5" style={{ borderBottom: '1px solid rgba(244,237,227,0.1)' }}>
                  <div className="font-display" style={{ fontWeight: 700, fontSize: 18 }}>{t}</div>
                  <div className="text-sm mt-1" style={{ color: 'rgba(244,237,227,0.65)' }}>{d}</div>
                </div>
              </li>
            ))}
          </ol>

          <div className="mt-10">
            <PrimaryCTA href={waLink('Olá! Vim do site da Nubelle e quero agendar minha Consulta Estratégica.')} target="_blank">
              Agendar minha Consulta Estratégica
            </PrimaryCTA>
          </div>
        </div>

        {/* direita — Shot da Beleza */}
        <div className="md:col-span-5">
          <div className="relative aspect-[2/3] rounded-[32px] overflow-hidden neon-glow" style={{ background: C.inkDeep, border: '1px solid rgba(255,139,122,0.2)' }}>
            <img src="assets/shot-beleza.png" alt="Shot da Beleza Nubelle Salvador, taça com bilhete: Amar a si mesmo é o começo de um romance para toda a vida" className="absolute inset-0 w-full h-full object-cover" style={{ objectPosition: 'center top' }} />

            {/* gradiente para legenda */}
            <div className="absolute inset-x-0 bottom-0 h-[35%] z-10 pointer-events-none" style={{ background: 'linear-gradient(0deg, rgba(5,7,8,0.92) 0%, rgba(5,7,8,0.35) 60%, transparent 100%)' }}></div>
            <div className="absolute bottom-7 left-7 right-7 z-20">
              <div className="font-display" style={{ fontSize: 22, fontWeight: 700, color: C.cream, letterSpacing: '-0.02em' }}>Shot da Beleza</div>
              <div className="text-[11px] mt-1.5 uppercase tracking-[0.25em]" style={{ color: C.neon }}>O ritual começa antes do procedimento</div>
            </div>
          </div>
          <p className="text-xs mt-5" style={{ color: 'rgba(244,237,227,0.55)', lineHeight: 1.5 }}>
            "Amar a si mesmo é o começo de um romance para toda a vida." Cada cliente recebe seu Shot da Beleza no Living, com um bilhete escrito à mão.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ConsultaEstrategica });