// ===== DEPILAÇÃO A LASER · Seção dedicada =====
// CTA leva para a landing de depilação
function Depilacao() {
  const planos = [
    {
      n: 'I',
      name: 'Plano Essencial',
      sub: '1 região',
      body: 'A porta de entrada para experimentar a tecnologia Hakon 4D. Ideal para quem quer testar uma área específica antes de avançar.',
      pills: ['Buço', 'Axila', 'Virilha simples'],
    },
    {
      n: 'II',
      name: 'Plano Completo',
      sub: '4 regiões',
      body: 'O plano mais escolhido. Cobertura ampla com economia real e protocolo calibrado para evolução em conjunto.',
      pills: ['Pernas', 'Virilha completa', 'Axila', 'Buço'],
      highlight: true,
    },
    {
      n: 'III',
      name: 'Plano Total',
      sub: 'Corpo inteiro',
      body: 'Para quem quer parar de pensar nisso de vez. Todas as regiões em um só plano, com o melhor custo por sessão.',
      pills: ['Corpo todo', 'Rosto incluso', 'Manutenções'],
    },
  ];

  const diffs = [
    { k: '4D', t: '4 comprimentos de onda', d: 'Alexandrite, Diodo, Nd:YAG e SHR no mesmo equipamento. Cada pelo, fototipo e região tratado com a luz certa.' },
    { k: 'TODOS OS FOTOTIPOS', t: 'Pele negra e morena com segurança', d: 'Nd:YAG 1064nm, padrão-ouro para peles escuras. Sem risco de manchas quando aplicado com protocolo correto.' },
    { k: '−12°C', t: 'Ponteira resfriada', d: 'Conforto durante a aplicação. A maioria das pacientes descreve como morno, não como dor.' },
    { k: '12 MESES', t: 'Garantia Nubelle por escrito', d: 'Acompanhamento a cada 3 sessões e até 3 sessões de manutenção dentro do plano.' },
  ];

  return (
    <section id="depilacao" className="relative overflow-hidden py-24 md:py-32" style={{ background: C.inkDark, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 80% 30%, rgba(255,139,122,0.16) 0%, transparent 55%), radial-gradient(ellipse at 10% 90%, rgba(14,59,58,0.7) 0%, transparent 50%)`
      }}></div>
      <div className="absolute inset-0 opacity-[0.05] 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: '70px 70px',
        maskImage: 'radial-gradient(ellipse at center, black 25%, transparent 75%)'
      }}></div>
      <div className="scanline"></div>

      <div className="relative max-w-[1300px] mx-auto px-5 md:px-8">
        {/* topo */}
        <div className="grid md:grid-cols-12 gap-12 items-center">
          <div className="md:col-span-7">
            <Pill dark>Belle Depila 4D · destaque</Pill>
            <h2 className="font-display mt-6" style={{ fontSize: 'clamp(34px, 5vw, 68px)', lineHeight: 0.98, fontWeight: 700, letterSpacing: '-0.035em' }}>
              Depilação a laser <br />
              <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>com protocolo</em> <br />
              <span style={{ fontWeight: 300 }}>acompanhado a cada sessão.</span>
            </h2>
            <p className="mt-7 text-lg max-w-xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
              A maioria das clientes nota redução visível a partir da 3ª sessão. Esse resultado vem de protocolo calibrado, não de sorte. Diagnóstico real antes do primeiro disparo, reavaliação a cada 3 sessões e <strong style={{ color: C.neon }}>Garantia Nubelle de 12 meses</strong>.
            </p>

            <div className="mt-9 flex flex-col sm:flex-row gap-4">
              <PrimaryCTA href="https://nubellesalvador.com.br/dep-laser-4d/index.html" target="_blank" sub="Ver landing completa do protocolo">
                Conhecer Belle Depila 4D
              </PrimaryCTA>
              <GhostCTA href={waLink('Olá! Vim do site da Nubelle, da seção Depilação a Laser, e quero entender qual plano faz sentido para mim.')} target="_blank">
                Falar com a equipe
              </GhostCTA>
            </div>
          </div>

          <div className="md:col-span-5 relative">
            <div className="absolute inset-0 spin-slow opacity-30 pointer-events-none" style={{
              background: 'conic-gradient(from 0deg, transparent, rgba(255,139,122,0.5), transparent 25%)',
              borderRadius: '50%', filter: 'blur(60px)'
            }}></div>
            <div className="relative aspect-[4/5] rounded-[40px] overflow-hidden bob neon-glow" style={{
              background: 'radial-gradient(circle at 50% 30%, #14171d 0%, #050708 80%)',
              border: '1px solid rgba(255,139,122,0.22)'
            }}>
              <div className="absolute inset-0 opacity-[0.08] 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: '40px 40px',
                maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)'
              }}></div>
              <img src="assets/hero-model.png" alt="Depilação a laser Hakon 4D · Nubelle Salvador" className="absolute inset-0 w-full h-full object-contain object-bottom z-10" style={{ filter: 'drop-shadow(0 30px 40px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(255,139,122,0.18))' }} />
              <div className="absolute inset-0 z-20" style={{ background: 'linear-gradient(180deg, transparent 60%, rgba(5,7,8,0.85) 100%)', pointerEvents: 'none' }}></div>

              <div className="absolute top-[60%] -translate-y-1/2 right-4 p-3 rounded-2xl backdrop-blur-md z-30 max-w-[210px]" style={{ background: 'rgba(5,7,8,0.78)', border: '1px solid rgba(255,139,122,0.3)' }}>
                <div className="flex items-center gap-2.5">
                  <div className="w-9 h-9 rounded-full flex items-center justify-center neon-glow shrink-0" style={{ background: C.neon, color: C.inkDeep }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
                  </div>
                  <div className="min-w-0">
                    <div className="text-[10px] uppercase tracking-[0.2em]" style={{ color: C.neon }}>Hakon 4D</div>
                    <div className="text-[11px] leading-tight" style={{ color: C.cream }}>Tecnologia de ponta<br />em Salvador</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* diferenciais */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-20">
          {diffs.map((d, i) => (
            <div key={i} className="p-6 rounded-2xl" style={{ background: C.inkDeep, border: '1px solid rgba(255,139,122,0.18)' }}>
              <div className="font-display" style={{ fontSize: 22, fontWeight: 900, fontStyle: 'italic', color: C.neon, letterSpacing: '-0.02em' }}>{d.k}</div>
              <div className="font-display mt-3" style={{ fontSize: 15, fontWeight: 700, color: C.cream, letterSpacing: '-0.01em' }}>{d.t}</div>
              <p className="mt-2 text-sm" style={{ color: 'rgba(244,237,227,0.65)', lineHeight: 1.5 }}>{d.d}</p>
            </div>
          ))}
        </div>

        {/* planos */}
        <div className="mt-20">
          <div className="text-center mb-10">
            <Pill dark>3 planos · 1 protocolo</Pill>
            <h3 className="font-display mt-5 mx-auto max-w-2xl" style={{ fontSize: 'clamp(26px, 3.4vw, 40px)', lineHeight: 1.1, fontWeight: 700, letterSpacing: '-0.025em' }}>
              Escolha por <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>cobertura,</em> não por sessão avulsa.
            </h3>
          </div>

          <div className="grid md:grid-cols-3 gap-5">
            {planos.map((p, i) => (
              <div key={i} className="relative p-7 rounded-[28px] flex flex-col" style={{
                background: p.highlight ? 'rgba(255,139,122,0.08)' : C.inkDeep,
                border: p.highlight ? '1px solid rgba(255,139,122,0.45)' : '1px solid rgba(255,139,122,0.18)',
                boxShadow: p.highlight ? '0 0 0 1px rgba(255,139,122,0.4), 0 0 32px rgba(255,139,122,0.18)' : 'none'
              }}>
                {p.highlight && (
                  <div className="absolute -top-3 left-7 px-3 py-1 rounded-full text-[9px] uppercase tracking-[0.3em] font-semibold" style={{ background: C.neon, color: C.inkDeep }}>
                    Mais escolhido
                  </div>
                )}
                <div className="font-display text-3xl" style={{ color: C.coral, fontStyle: 'italic', fontWeight: 900 }}>{p.n}</div>
                <div className="font-display mt-3" style={{ fontSize: 22, fontWeight: 700, color: C.cream, letterSpacing: '-0.015em' }}>{p.name}</div>
                <div className="text-[11px] uppercase tracking-[0.3em] mt-1" style={{ color: C.neon }}>{p.sub}</div>
                <p className="mt-4 text-sm" style={{ color: 'rgba(244,237,227,0.7)', lineHeight: 1.55 }}>{p.body}</p>
                <ul className="mt-5 space-y-2 flex-1">
                  {p.pills.map((it, j) => (
                    <li key={j} className="flex items-center gap-2 text-sm" style={{ color: 'rgba(244,237,227,0.85)' }}>
                      <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ background: C.coral }}></span>
                      {it}
                    </li>
                  ))}
                </ul>
                <a href="https://nubellesalvador.com.br/dep-laser-4d/index.html" target="_blank" rel="noopener" className="mt-7 inline-flex items-center gap-2 text-xs uppercase tracking-[0.25em] font-semibold transition hover:gap-3" style={{ color: C.neon }}>
                  Ver detalhes do plano →
                </a>
              </div>
            ))}
          </div>

          <div className="mt-12 text-center">
            <PrimaryCTA href="https://nubellesalvador.com.br/dep-laser-4d/index.html" target="_blank" sub="Tabelas, garantia e detalhes técnicos">
              Ver landing completa de Depilação 4D
            </PrimaryCTA>
            <p className="mt-5 text-xs" style={{ color: 'rgba(244,237,227,0.5)' }}>
              Você verá tabela detalhada por região, garantia por escrito e comparativos com outras tecnologias.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Depilacao });