// Pricing, Cost comparison, Social proof, FAQ, Final CTA, Footer
const { useState: useState3, useEffect: useEffect3 } = React;

// ====== PRICING ======
function Pricing() {
  const plans = [
  {
    key: 'unica',
    tag: '✦ flexível',
    name: 'Sessão Única',
    forWho: 'Para quem quer experimentar antes de se comprometer, ou já fez tratamento em outra clínica e busca manutenção pontual.',
    vantagens: [
    ['Liberdade total', 'Você paga conforme o uso, uma sessão de cada vez. Sem plano, sem fidelização.'],
    ['Mesmo equipamento', 'Hakon 4D, ponteira a −12°C, profissional especializada — exatamente como nos planos.'],
    ['Conhecer a Nubelle', 'Muitas clientes começam por aqui. Veem a entrega, e voltam para fechar o tratamento completo.']],

    cta: 'Quero uma sessão'
  },
  {
    key: 'ciclo',
    tag: '◈ comprometimento parcial',
    name: 'Ciclo Inicial · 5 sessões',
    forWho: 'Para quem quer começar com método, mas prefere fracionar o compromisso — e ter a opção de continuar com o tratamento completo depois.',
    vantagens: [
    ['Mais econômico que sessão única', 'Cada sessão sai por menos do que comprar avulsa. Comprometimento é recompensado.'],
    ['Conversível ao Ritual Completo', 'Até a 5ª sessão, você pode migrar e pagar as 5 restantes pelo mesmo preço unitário do Ciclo. Quem migra ainda destrava Garantia Nubelle e Protocolo Vivo.'],
    ['Acompanhamento técnico', 'Sua evolução é monitorada. Se algo precisa ser ajustado, ajustamos.']],

    cta: 'Quero o Ciclo Inicial'
  },
  {
    key: 'ritual',
    tag: '◉ tratamento completo',
    name: 'Ritual Completo · 10 sessões',
    forWho: 'Para quem quer resolver de vez. Tratamento completo, com método, garantia, acompanhamento e a melhor relação custo-resultado da casa.',
    vantagens: [
    ['Opção mais econômica', 'O menor preço por sessão da clínica. Quanto maior o compromisso, melhor a entrega.'],
    ['Protocolo Vivo + Garantia Nubelle', 'Reavaliação técnica a cada 3 sessões. E após concluir, 12 meses para fazer até 3 manutenções sem custo se algum pelo voltar.'],
    ['Combos e Cashback', 'Acesso aos combos multiárea (até −22% no PIX) e ao Programa Cashback Nubelle.']],

    cta: 'Quero o Ritual Completo',
    featured: true
  }];


  // 3 áreas exemplo
  const areas = [
  { name: 'Axilas', desc: 'Região axilar completa', single: 'R$ 68', cycle: 'R$ 297', ritual: 'R$ 457', parc: '5× R$ 91,40', off: 27 },
  { name: 'Virilha Completa', desc: 'Inclui baixo ventre', single: 'R$ 191', cycle: 'R$ 837', ritual: 'R$ 1.285', parc: '10× R$ 128,50', off: 33 },
  { name: 'Meia Perna', desc: 'Região axilar completa', single: 'R$ 235', cycle: 'R$ 1.027', ritual: 'R$ 1.607', parc: '10× R$ 160,70', off: 32 }];


  // 3 combos mais pedidos
  const combos = [
  { name: 'Leveza Total', sub: 'Perna Completa + Buço (brinde)', from: 'R$ 2.491', parc: '12× R$ 253' },
  { name: 'Zona Livre', sub: 'Virilha Completa + Perianal + Axilas (brinde)', from: 'R$ 2.177', parc: '12× R$ 221' },
  { name: 'Braços Livres', sub: 'Braços Inteiros + Axilas (brinde)', from: 'R$ 1.633', parc: '12× R$ 166' }];


  return (
    <section id="planos" className="relative py-24 md:py-32 overflow-hidden" style={{ background: C.cream, color: C.ink }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8">

        {/* Header */}
        <div className="text-center max-w-3xl mx-auto mb-16">
          <div className="text-xs uppercase tracking-[0.25em] mb-4" style={{ color: C.coralDeep }}>três formas de começar</div>
          <h2 className="font-display" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 1.02, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Escolha como <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>quer começar.</em><br />
            <span style={{ fontWeight: 300, color: 'rgba(14,59,58,0.7)' }}>Cada caminho serve a um momento.</span>
          </h2>
        </div>

        {/* 3 PLANOS — cards explicativos */}
        <div className="grid md:grid-cols-3 gap-5 mb-20 items-stretch">
          {plans.map((p) => {
            const featured = p.featured;
            return (
              <div key={p.key} className="relative p-8 md:p-9 rounded-3xl flex flex-col transition-all hover:-translate-y-1" style={{
                background: featured ? C.ink : C.white,
                color: featured ? C.cream : C.ink,
                border: featured ? '1px solid rgba(232,154,142,0.25)' : `1px solid ${C.bone}`,
                boxShadow: featured ? '0 30px 70px -20px rgba(14,59,58,0.5), 0 0 0 1px rgba(232,154,142,0.08)' : '0 2px 12px rgba(14,59,58,0.04)'
              }}>
                {featured &&
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1.5 rounded-full text-[10px] uppercase tracking-[0.25em] font-medium" style={{ background: C.coral, color: C.ink }}>
                    Recomendado
                  </div>
                }

                <div className="text-[10px] uppercase tracking-[0.25em] mb-4" style={{ color: featured ? C.coral : C.coralDeep }}>{p.tag}</div>
                <h3 className="font-display text-2xl md:text-[28px] mb-4" style={{ fontWeight: 700, lineHeight: 1.05, letterSpacing: '-0.015em' }}>{p.name}</h3>

                <p className="text-[14.5px] mb-7" style={{ color: featured ? 'rgba(244,237,227,0.78)' : 'rgba(14,59,58,0.72)', lineHeight: 1.55 }}>
                  {p.forWho}
                </p>

                <ul className="space-y-5 mb-8 flex-1">
                  {p.vantagens.map(([t, d]) =>
                  <li key={t}>
                      <div className="flex gap-3 items-start mb-1">
                        <span className="mt-1 shrink-0 w-1 h-1 rounded-full" style={{ background: featured ? C.coral : C.coralDeep, boxShadow: featured ? '0 0 6px var(--neon)' : 'none' }}></span>
                        <div className="font-medium text-[14px]" style={{ color: featured ? C.cream : C.ink }}>{t}</div>
                      </div>
                      <div className="text-[13px] pl-4" style={{ color: featured ? 'rgba(244,237,227,0.6)' : 'rgba(14,59,58,0.55)', lineHeight: 1.5 }}>{d}</div>
                    </li>
                  )}
                </ul>

                <a href={waLink(`Olá! Vim do site da Nubelle e quero ${p.cta.toLowerCase()} de depilação a laser.`)} target="_blank" rel="noopener" className="block text-center py-4 rounded-full text-sm font-medium transition hover:scale-[1.02]" style={{
                  background: featured ? C.coral : C.ink,
                  color: featured ? C.ink : C.cream,
                  fontWeight: 600
                }}>{p.cta} →</a>
              </div>);

          })}
        </div>

        {/* RITUAL COMPLETO — Stack de Valor com simulação real */}
        <div className="relative rounded-[32px] overflow-hidden mb-20 ritual-stack" style={{ background: C.ink, color: C.cream }}>
          {/* halo decorativo */}
          <div className="absolute -top-32 -right-32 w-96 h-96 rounded-full opacity-20 spin-slow pointer-events-none" style={{
            background: 'conic-gradient(from 0deg, transparent, rgba(232,154,142,0.6), transparent 40%)',
            filter: 'blur(60px)'
          }}></div>

          <div className="relative p-10 md:p-14">
            {/* eyebrow + título */}
            <div className="flex items-start justify-between flex-wrap gap-4 mb-3">
              <div className="text-[10px] uppercase tracking-[0.3em]" style={{ color: C.coral }}>◉ ritual completo · 10 sessões</div>
              <div className="text-[10px] uppercase tracking-[0.25em]" style={{ color: 'rgba(244,237,227,0.5)' }}>simulação · tratamento de R$ 2.000</div>
            </div>

            <h3 className="font-display max-w-3xl" style={{ fontSize: 'clamp(32px, 4vw, 52px)', lineHeight: 1, fontWeight: 700, letterSpacing: '-0.025em' }}>
              O que você leva <em style={{ color: C.coral, fontStyle: 'italic', fontWeight: 900 }}>a mais</em> <br />
              quando faz o tratamento completo.
            </h3>

            <p className="text-[15px] mt-6 max-w-2xl" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.6 }}>
              Veja, em números, o que está incluso num Ritual Completo de R$ 2.000 — antes de qualquer desconto. Tudo isto faz parte. Não é opcional, não é venda casada.
            </p>

            {/* Stack itens */}
            <div className="mt-12 grid md:grid-cols-12 gap-y-3 gap-x-6">
              {[
              { label: 'Consulta + diagnóstico clínico', value: 'R$ 189', muted: 'incluso · valor avulso' },
              { label: 'Protocolo Vivo · 3 reavaliações técnicas', value: 'R$ 567', muted: 'incluso · 3× R$ 189' },
              { label: 'Garantia Nubelle · até 3 manutenções/12m', value: 'até R$ 600', muted: 'incluso · ativa após conclusão' },
              { label: 'Programa Cashback Nubelle (até 10%)', value: 'até R$ 200', muted: 'creditado em compras futuras' },
              { label: 'Desconto PIX + Combos (até 22%)', value: 'até R$ 440', muted: 'aplicável neste tratamento' }].
              map((it, i) =>
              <React.Fragment key={it.label}>
                  <div className="md:col-span-7 flex items-center gap-4 py-4 stack-row" style={{ borderTop: i === 0 ? 'none' : '1px solid rgba(232,154,142,0.12)' }}>
                    <div className="font-display shrink-0 w-9 text-coral" style={{ fontSize: 18, fontWeight: 900, fontStyle: 'italic', color: 'rgba(232,154,142,0.4)', letterSpacing: '-0.02em' }}>0{i + 1}</div>
                    <div className="text-[14.5px]" style={{ color: 'rgba(244,237,227,0.92)' }}>{it.label}</div>
                  </div>
                  <div className="md:col-span-3 flex items-center py-4 stack-row" style={{ borderTop: i === 0 ? 'none' : '1px solid rgba(232,154,142,0.12)' }}>
                    <span className="text-[11px] uppercase tracking-[0.2em]" style={{ color: 'rgba(244,237,227,0.45)' }}>{it.muted}</span>
                  </div>
                  <div className="md:col-span-2 flex items-center justify-end py-4 stack-row" style={{ borderTop: i === 0 ? 'none' : '1px solid rgba(232,154,142,0.12)' }}>
                    <span className="font-display text-xl md:text-2xl" style={{ fontWeight: 700, color: C.coral, letterSpacing: '-0.015em' }}>{it.value}</span>
                  </div>
                </React.Fragment>
              )}

              {/* total */}
              <div className="md:col-span-7 flex items-center gap-4 pt-7 mt-3" style={{ borderTop: '1px solid rgba(232,154,142,0.3)' }}>
                <div className="text-[10px] uppercase tracking-[0.3em] mb-1" style={{ color: C.coral }}>valor agregado</div>
              </div>
              <div className="md:col-span-3 pt-7 mt-3" style={{ borderTop: '1px solid rgba(232,154,142,0.3)' }}></div>
              <div className="md:col-span-2 flex items-center justify-end pt-7 mt-3" style={{ borderTop: '1px solid rgba(232,154,142,0.3)' }}>
                <span className="font-display" style={{ fontSize: 32, fontWeight: 900, fontStyle: 'italic', color: C.cream, letterSpacing: '-0.025em' }}>+ R$ 1.996</span>
              </div>
            </div>

            <p className="text-[13px] mt-10 max-w-2xl" style={{ color: 'rgba(244,237,227,0.55)', lineHeight: 1.6 }}>
              Em outras palavras: o tratamento custa R$ 2.000, mas você sai com quase o dobro em valor real. Isto é o que separa um pacote vendido por sessão de um <em>tratamento conduzido</em>.
            </p>
          </div>
        </div>

        {/* 3 ÁREAS EXEMPLO */}
        <div className="mb-16">
          <div className="flex items-end justify-between flex-wrap gap-4 mb-8">
            <div>
              <div className="text-xs uppercase tracking-[0.25em] mb-3" style={{ color: C.coralDeep }}>preço por área · referência</div>
              <h3 className="font-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Três áreas, três caminhos.
              </h3>
            </div>
            <p className="text-sm max-w-md" style={{ color: 'rgba(14,59,58,0.65)', lineHeight: 1.55 }}>
              Veja como o Ritual Completo é o <em>menor preço por sessão</em>. Quanto mais comprometimento, melhor a relação.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-5">
            {areas.map((a) =>
            <div key={a.name} className="rounded-3xl overflow-hidden" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
                <div className="p-7 pb-5" style={{ borderBottom: `1px solid ${C.bone}` }}>
                  <h4 className="font-display text-xl md:text-2xl" style={{ fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.05 }}>{a.name}</h4>
                  <div className="text-[13px] mt-1" style={{ color: 'rgba(14,59,58,0.55)' }}>{a.desc}</div>
                </div>
                <div className="px-7 py-5 space-y-4">
                  {[
                ['1 sessão', 'Sessão Única', a.single, null],
                ['5 sessões', 'Ciclo Inicial', a.cycle, null],
                ['10 sessões', 'Ritual Completo', a.ritual, a.parc]].
                map(([qty, label, price, parc], i) => {
                  const isRitual = i === 2;
                  return (
                    <div key={qty} className="flex items-baseline justify-between gap-4">
                        <div>
                          <div className="text-[11px] uppercase tracking-[0.18em]" style={{ color: 'rgba(14,59,58,0.5)' }}>{qty}</div>
                          <div className="text-[14px] font-medium flex items-center gap-2" style={{ color: C.ink }}>
                            {label}
                            {isRitual && <span className="text-[10px] uppercase tracking-[0.15em] px-2 py-0.5 rounded-full" style={{ background: C.coral, color: C.ink, fontWeight: 600 }}>até {a.off}% OFF</span>}
                          </div>
                        </div>
                        <div className="text-right">
                          <div className="font-display text-lg" style={{ fontWeight: isRitual ? 900 : 600, color: isRitual ? C.coralDeep : C.ink, letterSpacing: '-0.015em' }}>{price}</div>
                          {parc && <div className="text-[11px] mt-0.5" style={{ color: 'rgba(14,59,58,0.55)' }}>{parc} sem juros</div>}
                        </div>
                      </div>);

                })}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* 3 COMBOS MAIS PEDIDOS */}
        <div className="mb-12">
          <div className="flex items-end justify-between flex-wrap gap-4 mb-8">
            <div>
              <div className="text-xs uppercase tracking-[0.25em] mb-3" style={{ color: C.coralDeep }}>combos mais pedidos · exclusivos do Ritual Completo</div>
              <h3 className="font-display" style={{ fontSize: 'clamp(28px, 3.5vw, 44px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Áreas que andam <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>juntas.</em>
              </h3>
            </div>
            <p className="text-sm max-w-md" style={{ color: 'rgba(14,59,58,0.65)', lineHeight: 1.55 }}>
              Combos têm uma área inclusa como brinde e desconto adicional sobre a soma. Cada combo já vem com Protocolo Vivo + Garantia Nubelle.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-5">
            {combos.map((c) =>
            <div key={c.name} className="relative p-7 rounded-3xl combo-card overflow-hidden" style={{ background: C.ink, color: C.cream, border: '1px solid rgba(232,154,142,0.2)' }}>
                {/* halo coral */}
                <div className="absolute -top-12 -right-12 w-40 h-40 rounded-full pointer-events-none" style={{ background: 'radial-gradient(circle, rgba(232,154,142,0.18), transparent 70%)' }}></div>

                <div className="relative">
                  <div className="text-[10px] uppercase tracking-[0.3em] mb-3" style={{ color: C.coral }}>combo</div>
                  <h4 className="font-display text-2xl md:text-[26px] mb-2" style={{ fontWeight: 700, letterSpacing: '-0.015em', lineHeight: 1.05 }}>{c.name}</h4>
                  <p className="text-[13px] mb-7" style={{ color: 'rgba(244,237,227,0.65)', lineHeight: 1.5 }}>{c.sub}</p>

                  <div className="pt-5" style={{ borderTop: '1px solid rgba(232,154,142,0.18)' }}>
                    <div className="text-[10px] uppercase tracking-[0.25em]" style={{ color: 'rgba(244,237,227,0.5)' }}>a partir de · pix</div>
                    <div className="font-display mt-1" style={{ fontSize: 36, fontWeight: 900, fontStyle: 'italic', color: C.coral, letterSpacing: '-0.025em', lineHeight: 1 }}>{c.from}</div>
                    <div className="text-[12px] mt-2" style={{ color: 'rgba(244,237,227,0.6)' }}>ou {c.parc} sem juros</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* CTA — outras áreas e planos */}
        <div className="text-center">
          <a href={waLink('Olá! Vim do site da Nubelle e quero consultar preço de outras áreas e planos de depilação a laser.')} target="_blank" rel="noopener" className="inline-flex items-center gap-3 px-8 py-4 rounded-full transition-all hover:scale-[1.02]" style={{ background: 'transparent', color: C.ink, border: `1.5px solid ${C.ink}` }}>
            <span className="font-display tracking-tight" style={{ fontWeight: 600, fontSize: '15px' }}>Consultar outras áreas e planos</span>
            <span>→</span>
          </a>

          <p className="mt-8 text-[12.5px] max-w-2xl mx-auto" style={{ color: 'rgba(14,59,58,0.55)', lineHeight: 1.6 }}>
            <span className="uppercase tracking-[0.2em] text-[10.5px]" style={{ color: C.coralDeep, fontWeight: 600 }}>Preços de referência ·</span> valores praticados durante a <strong style={{ color: C.ink }}>campanha de lançamento</strong>, sujeitos a alteração a qualquer momento por se tratar de promoção limitada. Para preço atualizado e disponibilidade, consulte nossa equipe.
          </p>
        </div>
      </div>

      <style>{`
        .ritual-stack { box-shadow: 0 40px 100px -30px rgba(14,59,58,0.4); }
        .stack-row { transition: background 0.3s; }
        .stack-row:hover { background: rgba(232,154,142,0.04); }
        .combo-card { transition: transform 0.3s, box-shadow 0.4s; }
        .combo-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -10px rgba(14,59,58,0.4), 0 0 40px rgba(232,154,142,0.15); }
      `}</style>
    </section>);

}

// ====== Cost Comparison ======
function CostComparison() {
  const items = [
  { who: 'Lâmina descartável', sub: 'troca a cada 2–3 usos · 2 anos', cost: 'R$ 420', hours: '26h' },
  { who: 'Cera no salão', sub: 'a cada 3 semanas · 2 anos', cost: 'R$ 1.430', hours: '35h' },
  { who: 'Cremes pós-depilação', sub: 'manchas, foliculite, ardência', cost: 'R$ 360', hours: '—' },
  { who: 'Roupas que ficaram no armário', sub: 'evitadas no dia da depilação', cost: 'incalculável', hours: '—' }];


  return (
    <section className="relative py-24 md:py-32 overflow-hidden" style={{ background: C.ink, color: C.cream }}>
      {/* fundo decorativo */}
      <div className="absolute inset-0 opacity-[0.06] pointer-events-none" style={{
        backgroundImage: 'linear-gradient(rgba(255,139,122,0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,139,122,0.4) 1px, transparent 1px)',
        backgroundSize: '80px 80px',
        maskImage: 'radial-gradient(ellipse at 30% 50%, black 30%, transparent 80%)'
      }}></div>
      <div className="absolute -top-32 right-0 w-[600px] h-[600px] rounded-full opacity-20 spin-slow pointer-events-none" style={{
        background: 'conic-gradient(from 0deg, transparent, rgba(255,139,122,0.5), transparent 30%)',
        filter: 'blur(80px)'
      }}></div>

      <div className="relative max-w-[1400px] mx-auto px-5 md:px-8 grid md:grid-cols-12 gap-12 items-center">

        {/* IMAGEM — coluna esquerda, com movimento */}
        <div className="md:col-span-5 relative order-2 md:order-1">
          {/* halo cônico girando */}
          <div className="absolute -inset-6 spin-slow opacity-40 pointer-events-none" style={{
            background: 'conic-gradient(from 180deg, transparent, rgba(255,139,122,0.5), transparent 35%, rgba(122,159,255,0.3), transparent 70%)',
            borderRadius: '40px',
            filter: 'blur(60px)'
          }}></div>

          <div className="relative aspect-[4/5] rounded-[28px] overflow-hidden cost-image-frame neon-glow" style={{
            background: '#050708',
            border: '1px solid rgba(255,139,122,0.22)',
            boxShadow: '0 30px 70px -20px rgba(0,0,0,0.7)'
          }}>
            {/* a foto, com motion blur sutil em loop sugerindo "tempo passando" */}
            <div className="absolute inset-0 cost-image-motion">
              <img src="assets/sem-perceber-mulher.png" alt="Tempo investido na depilação tradicional" className="w-full h-full object-cover" style={{
                filter: 'saturate(0.65) contrast(1.05) brightness(0.85)'
              }} />
            </div>

            {/* duotone overlay coral/teal */}
            <div className="absolute inset-0 mix-blend-color pointer-events-none" style={{
              background: `linear-gradient(180deg, rgba(255,139,122,0.25) 0%, rgba(14,59,58,0.4) 100%)`
            }}></div>

            {/* gradient bottom para legibilidade */}
            <div className="absolute inset-x-0 bottom-0 h-2/3 pointer-events-none" style={{
              background: 'linear-gradient(180deg, transparent 0%, rgba(5,7,8,0.3) 40%, rgba(5,7,8,0.95) 100%)'
            }}></div>

            {/* scanline horizontal varrendo */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
              <div className="cost-scanline"></div>
            </div>

            {/* grid sutil */}
            <div className="absolute inset-0 opacity-[0.08] pointer-events-none" style={{
              backgroundImage: 'linear-gradient(rgba(255,139,122,0.6) 1px, transparent 1px)',
              backgroundSize: '100% 6px',
              mixBlendMode: 'overlay'
            }}></div>

            {/* contador de horas ticking — canto superior direito */}
            <div className="absolute top-5 right-5 z-10 px-3 py-2 rounded-xl backdrop-blur-md" style={{ background: 'rgba(5,7,8,0.6)', border: '1px solid rgba(255,139,122,0.2)' }}>
              <div className="text-[8px] uppercase tracking-[0.3em] mb-1" style={{ color: 'rgba(244,237,227,0.5)' }}>tempo total · 2 anos</div>
              <div className="font-display flex items-baseline gap-1" style={{ color: 'var(--neon)', fontWeight: 900, letterSpacing: '-0.02em' }}>
                <span className="cost-tick" style={{ fontSize: 28, lineHeight: 1, fontStyle: 'italic' }}>61h</span>
                <span className="text-[10px] opacity-60">·</span>
                <span className="text-[10px] opacity-60">2 dias e meio</span>
              </div>
            </div>

            {/* legenda inferior */}
            <div className="absolute bottom-5 left-5 right-5 z-10">
              <div className="text-[10px] uppercase tracking-[0.3em] mb-2" style={{ color: 'var(--neon)' }}>● o ciclo invisível</div>
              <div className="font-display text-2xl md:text-[28px] leading-[1] tracking-tight" style={{ color: C.cream, fontWeight: 700, letterSpacing: '-0.02em' }}>
                Quanto tempo já se foi <br />
                <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>esperando passar?</em>
              </div>
            </div>

            {/* partículas flutuando — sugerindo tempo escapando */}
            <svg className="absolute inset-0 w-full h-full pointer-events-none z-[5]" viewBox="0 0 400 500" preserveAspectRatio="none">
              <defs><filter id="cost-particle"><feGaussianBlur stdDeviation="2" /></filter></defs>
              {Array.from({ length: 8 }).map((_, i) =>
              <circle key={i} r="2" fill="#FF8B7A" opacity="0.7" filter="url(#cost-particle)">
                  <animate attributeName="cy" values="500;-20" dur={`${8 + i * 1.2}s`} repeatCount="indefinite" begin={`${i * 0.8}s`} />
                  <animate attributeName="cx" values={`${50 + i * 40};${30 + i * 45}`} dur={`${8 + i * 1.2}s`} repeatCount="indefinite" begin={`${i * 0.8}s`} />
                  <animate attributeName="opacity" values="0;0.7;0.7;0" dur={`${8 + i * 1.2}s`} repeatCount="indefinite" begin={`${i * 0.8}s`} />
                </circle>
              )}
            </svg>
          </div>

          {/* badge — anos perdidos */}
          <div className="absolute -bottom-3 -right-3 px-4 py-2 rounded-full text-[10px] uppercase tracking-[0.25em] z-30 neon-glow" style={{ background: '#0E3B3A', color: 'var(--neon)', border: '1px solid rgba(255,139,122,0.3)' }}>
            ◐ enquanto isto, a vida acontece
          </div>
        </div>

        {/* CONTEÚDO — coluna direita */}
        <div className="md:col-span-7 order-1 md:order-2">
          <div className="text-xs uppercase tracking-[0.3em] mb-5" style={{ color: 'var(--neon)' }}>● o que você gasta hoje · sem perceber</div>
          <h2 className="font-display" style={{ fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 0.98, fontWeight: 700, letterSpacing: '-0.025em' }}>
            Antes de decidir, <br />
            veja o que a depilação <br />
            tradicional <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>já custa.</em>
          </h2>

          <p className="mt-7 text-[15.5px] max-w-xl" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.6 }}>
            Não é só o boleto da cera. É o tempo, a manchinha que volta, o pelo encravado, a roupa que ficou no armário porque a virilha estava irritada. Tudo em silêncio, todo mês.
          </p>

          {/* lista de itens */}
          <div className="mt-12 space-y-3">
            {items.map((it, i) =>
            <div key={it.who} className="cost-row group relative grid grid-cols-12 gap-4 items-center py-5 px-5 rounded-2xl" style={{
              background: 'rgba(244,237,227,0.03)',
              border: '1px solid rgba(255,139,122,0.08)',
              transition: 'all 0.3s'
            }}>
                <div className="col-span-1">
                  <div className="font-display text-coral italic" style={{ fontSize: 16, fontWeight: 900, color: 'rgba(255,139,122,0.5)', letterSpacing: '-0.02em' }}>0{i + 1}</div>
                </div>
                <div className="col-span-7 md:col-span-6">
                  <div className="text-[15px] font-medium" style={{ color: C.cream }}>{it.who}</div>
                  <div className="text-[12px] mt-0.5" style={{ color: 'rgba(244,237,227,0.5)' }}>{it.sub}</div>
                </div>
                <div className="col-span-2 text-right">
                  <div className="text-[10px] uppercase tracking-[0.2em]" style={{ color: 'rgba(244,237,227,0.4)' }}>custo</div>
                  <div className="font-display text-lg" style={{ fontWeight: 700, color: 'var(--neon)', letterSpacing: '-0.015em' }}>{it.cost}</div>
                </div>
                <div className="col-span-2 md:col-span-3 text-right">
                  <div className="text-[10px] uppercase tracking-[0.2em]" style={{ color: 'rgba(244,237,227,0.4)' }}>tempo</div>
                  <div className="font-display text-lg" style={{ fontWeight: 700, color: C.cream, letterSpacing: '-0.015em' }}>{it.hours}</div>
                </div>
              </div>
            )}
          </div>

          {/* totalizador */}
          <div className="mt-6 relative p-6 rounded-2xl overflow-hidden" style={{
            background: 'linear-gradient(135deg, rgba(255,139,122,0.12), rgba(255,139,122,0.04))',
            border: '1px solid rgba(255,139,122,0.3)'
          }}>
            <div className="absolute -top-10 -right-10 w-32 h-32 rounded-full opacity-30 pointer-events-none" style={{
              background: 'radial-gradient(circle, var(--neon), transparent 70%)'
            }}></div>
            <div className="relative grid md:grid-cols-12 gap-4 items-center">
              <div className="md:col-span-7">
                <div className="text-[10px] uppercase tracking-[0.3em] mb-1" style={{ color: 'var(--neon)' }}>● 2 anos sem laser</div>
                <div className="font-display" style={{ fontSize: 22, fontWeight: 700, color: C.cream, letterSpacing: '-0.015em', lineHeight: 1.15 }}>
                  Mais de R$ 2.200 e 61 horas — repetindo o mesmo ciclo.
                </div>
              </div>
              <div className="md:col-span-5 md:text-right">
                <div className="text-[10px] uppercase tracking-[0.3em] mb-1" style={{ color: 'rgba(244,237,227,0.5)' }}>vs. ritual completo</div>
                <div className="font-display text-2xl" style={{ fontWeight: 900, fontStyle: 'italic', color: 'var(--neon)', letterSpacing: '-0.025em' }}>
                  10 sessões. <span style={{ color: C.cream, fontStyle: 'normal', fontWeight: 700 }}>1 vez.</span>
                </div>
              </div>
            </div>
          </div>

          <p className="mt-6 text-[13.5px] italic" style={{ color: 'rgba(244,237,227,0.55)' }}>
            E as manchas, foliculite, encravados, irritação? O Ritual trata o ciclo, não só o pelo.
          </p>
        </div>
      </div>

      <style>{`
        .cost-image-frame { transition: transform 0.6s; }
        .cost-image-frame:hover { transform: translateY(-6px); }
        .cost-image-motion { animation: cost-bob 14s ease-in-out infinite; }
        @keyframes cost-bob {
          0%, 100% { transform: scale(1.04) translateY(0); }
          50% { transform: scale(1.06) translateY(-8px); }
        }
        .cost-scanline {
          position: absolute; left: 0; right: 0; height: 120px; top: -120px;
          background: linear-gradient(180deg, transparent 0%, rgba(255,139,122,0.18) 50%, transparent 100%);
          animation: cost-scan 6s linear infinite;
        }
        @keyframes cost-scan {
          0% { top: -120px; }
          100% { top: 100%; }
        }
        .cost-tick { animation: cost-pulse 2.5s ease-in-out infinite; }
        @keyframes cost-pulse {
          0%, 100% { opacity: 1; text-shadow: 0 0 12px rgba(255,139,122,0.5); }
          50% { opacity: 0.75; text-shadow: 0 0 20px rgba(255,139,122,0.8); }
        }
        .cost-row:hover {
          background: rgba(255,139,122,0.06) !important;
          border-color: rgba(255,139,122,0.25) !important;
          transform: translateX(4px);
        }
      `}</style>
    </section>);

}

Object.assign(window, { Pricing, CostComparison });