// Sections components - Nubelle LP
const { useState, useEffect, useRef } = React;

// ====== WhatsApp helper ======
const WA_NUMBER = '5571992628880';
const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;
window.waLink = waLink; // expor para os outros arquivos JSX

// ====== TOKENS ======
const C = {
  ink: '#0E3B3A', // verde escuro Nubelle
  inkDeep: '#072A29',
  coral: '#E89A8E', // rosa coral
  coralDeep: '#D67D70',
  cream: '#F4EDE3',
  paper: '#FAF6F0',
  bone: '#EDE4D6',
  white: '#FFFFFF',
  charcoal: '#1A1A1A'
};

// ====== Floating WhatsApp ======
function FloatingCTA() {
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const onScroll = () => setShown(window.scrollY > 600);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a
      href={waLink('Olá! Vim do site da Nubelle e quero agendar minha consulta de depilação a laser.')}
      target="_blank" rel="noopener"
      className={`fixed bottom-6 right-6 z-50 transition-all duration-500 ${shown ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8 pointer-events-none'}`}
      style={{ background: C.coral, color: C.ink }}>
      
      <div className="flex items-center gap-3 px-5 py-4 rounded-full shadow-2xl hover:scale-105 transition-transform" style={{ boxShadow: '0 20px 50px -10px rgba(216,125,112,0.5)' }}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 5.55-13.56zm-5.55 12.21h-.01a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.65.67-2.43-.16-.25a6.6 6.6 0 1 1 12.24-3.5 6.6 6.6 0 0 1-6.64 6.59zm3.61-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1s-.51.64-.62.78c-.12.13-.23.15-.42.05-.2-.1-.84-.31-1.6-.99-.59-.52-.99-1.17-1.1-1.37-.12-.2-.01-.3.09-.4.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.38-.01a.74.74 0 0 0-.53.25c-.18.2-.7.69-.7 1.67 0 .98.71 1.93.81 2.07.1.13 1.4 2.13 3.4 2.99.47.2.84.33 1.13.42.48.15.91.13 1.25.08.38-.06 1.17-.48 1.34-.94.16-.46.16-.86.12-.94-.05-.09-.18-.14-.38-.24z" /></svg>
        <span className="font-medium tracking-tight">Agendar consulta</span>
      </div>
    </a>);

}

// ====== HERO ======
function Hero() {
  React.useEffect(() => {
    const sec = document.getElementById('hero-sec');
    if (!sec) return;
    const onMove = (e) => {
      const r = sec.getBoundingClientRect();
      sec.style.setProperty('--mx', `${e.clientX - r.left}px`);
      sec.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    sec.addEventListener('mousemove', onMove);
    return () => sec.removeEventListener('mousemove', onMove);
  }, []);
  return (
    <section id="hero-sec" className="relative overflow-hidden grain spotlight" style={{ background: '#050708', color: C.cream, "--mx": "1489px", "--my": "280px" }}>
      {/* layered glows */}
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 18% 78%, rgba(255,139,122,0.20) 0%, transparent 48%), radial-gradient(ellipse at 82% 18%, rgba(14,59,58,0.7) 0%, transparent 50%)`
      }}></div>
      {/* grid */}
      <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: '80px 80px',
        maskImage: 'radial-gradient(ellipse at 60% 40%, black 25%, transparent 75%)'
      }}></div>
      <div className="scanline"></div>

      {/* TOP BAR — logo + agendar */}
      <div className="relative z-20 max-w-[1400px] mx-auto px-5 md:px-8 pt-6 md:pt-8 flex items-center justify-between">
        <a href="#hero-sec" className="flex items-center gap-3 transition hover:opacity-90">
          <img src="assets/nubelle-logo-rosa.png" alt="Nubelle Salvador" className="h-9 md:h-11 w-auto" style={{ width: "80px", height: "80px" }} />
        </a>
        <a href={waLink('Olá! Vim do site da Nubelle e quero agendar minha consulta de depilação a laser.')} target="_blank" rel="noopener" className="group inline-flex items-center gap-2 md:gap-3 px-4 md:px-5 py-2.5 md:py-3 rounded-full text-sm transition hover:scale-[1.04]" style={{ background: 'var(--neon)', color: '#051a1a', boxShadow: '0 8px 24px -6px rgba(255,139,122,0.5)' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" className="hidden sm:block"><path d="M17.6 6.32A7.85 7.85 0 0 0 12.05 4a7.94 7.94 0 0 0-6.88 11.9L4 20l4.2-1.1a7.93 7.93 0 0 0 3.84.98h.01a7.94 7.94 0 0 0 5.55-13.56zm-5.55 12.21h-.01a6.6 6.6 0 0 1-3.36-.92l-.24-.14-2.5.65.67-2.43-.16-.25a6.6 6.6 0 1 1 12.24-3.5 6.6 6.6 0 0 1-6.64 6.59zm3.61-4.93c-.2-.1-1.17-.58-1.35-.64-.18-.07-.31-.1-.45.1s-.51.64-.62.78c-.12.13-.23.15-.42.05-.2-.1-.84-.31-1.6-.99-.59-.52-.99-1.17-1.1-1.37-.12-.2-.01-.3.09-.4.09-.09.2-.23.3-.35.1-.12.13-.2.2-.33.06-.13.03-.25-.02-.35-.05-.1-.45-1.08-.62-1.48-.16-.39-.33-.34-.45-.34l-.38-.01a.74.74 0 0 0-.53.25c-.18.2-.7.69-.7 1.67 0 .98.71 1.93.81 2.07.1.13 1.4 2.13 3.4 2.99.47.2.84.33 1.13.42.48.15.91.13 1.25.08.38-.06 1.17-.48 1.34-.94.16-.46.16-.86.12-.94-.05-.09-.18-.14-.38-.24z" /></svg>
          <span className="font-display tracking-tight" style={{ fontWeight: 700 }}>Agendar agora</span>
        </a>
      </div>

      {/* hero grid */}
      <div className="relative z-10 max-w-[1400px] mx-auto px-5 md:px-8 pt-8 pb-24 md:pt-12 md:pb-32 grid md:grid-cols-12 gap-10 items-center">
        <div className="md:col-span-7">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-xs tracking-[0.3em] uppercase mb-8" style={{ background: 'rgba(255,139,122,0.06)', color: 'var(--neon)', border: '1px solid rgba(255,139,122,0.3)' }}>
            <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--neon)', boxShadow: '0 0 12px var(--neon)' }}></span>
            Rio Vermelho · Salvador-BA
          </div>
          <h1 className="font-display tracking-tight" style={{ fontSize: 'clamp(40px, 6vw, 84px)', lineHeight: 0.95, fontWeight: 700, letterSpacing: '-0.035em' }}>
            Depilação a laser <br />
            <span className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>com protocolo</span> <br />
            <span style={{ fontWeight: 300 }}>acompanhado a <br />cada sessão.</span>
          </h1>
          <p className="mt-8 text-lg md:text-xl max-w-xl" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.55 }}>
            Porque resultado não é sorte, é método. Diagnóstico real, protocolo personalizado e <span style={{ color: 'var(--neon)' }}>Garantia Nubelle de 12 meses</span>.
          </p>

          <div className="mt-10 flex flex-col sm:flex-row gap-4">
            <a href={waLink('Olá! Vim do site da Nubelle e quero descobrir meu protocolo de depilação a laser.')} target="_blank" rel="noopener" className="group inline-flex items-center justify-between gap-4 px-7 py-5 rounded-full transition hover:scale-[1.03] neon-glow" style={{ background: 'var(--neon)', color: '#051a1a' }}>
              <div className="text-left">
                <div className="font-medium tracking-tight">Quero descobrir meu protocolo</div>
                <div className="text-xs opacity-70">Consulta R$189 · sem custo nesta campanha</div>
              </div>
              <span className="w-9 h-9 rounded-full flex items-center justify-center transition group-hover:translate-x-1" style={{ background: '#051a1a', color: 'var(--neon)' }}>→</span>
            </a>
            <a href="#duvidas" className="inline-flex items-center justify-center gap-2 px-7 py-5 rounded-full transition hover:bg-white/5" style={{ border: '1px solid rgba(255,139,122,0.4)', color: C.cream }}>
              Tenho dúvidas antes
            </a>
          </div>

          {/* trust strip */}
          <div className="mt-12 flex flex-wrap gap-x-8 gap-y-3 text-sm" style={{ color: 'rgba(244,237,227,0.6)' }}>
            <div className="flex items-center gap-2"><Star /> 5.0 no Google</div>
            <div className="flex items-center gap-2"><Star /> 150+ avaliações</div>
            <div className="flex items-center gap-2"><Star /> Tecnologia Hakon 4D</div>
          </div>
        </div>

        {/* visual right, foto modelo + Hakon */}
        <div className="md:col-span-5 relative">
          {/* halo cônico atrás */}
          <div className="absolute inset-0 spin-slow opacity-40 pointer-events-none" style={{
            background: 'conic-gradient(from 0deg, transparent, rgba(255,139,122,0.55), transparent 25%)',
            borderRadius: '50%',
            filter: 'blur(60px)'
          }}></div>
          {/* glow radial centralizado atrás da modelo */}
          <div className="absolute inset-0 pointer-events-none" style={{
            background: 'radial-gradient(ellipse at 50% 35%, rgba(255,139,122,0.22) 0%, transparent 55%)',
            filter: 'blur(20px)'
          }}></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)'
          }}>
            {/* grid sutil dentro do card */}
            <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>

            {/* feixe de laser ascendente */}
            <svg className="absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
              <defs>
                <radialGradient id="floor-glow" cx="50%" cy="100%" r="50%">
                  <stop offset="0%" stopColor="#FF8B7A" stopOpacity="0.4" />
                  <stop offset="100%" stopColor="#FF8B7A" stopOpacity="0" />
                </radialGradient>
                <filter id="hero-glow"><feGaussianBlur stdDeviation="3" /></filter>
              </defs>
              <ellipse cx="200" cy="500" rx="220" ry="60" fill="url(#floor-glow)" />
              {/* dots de luz subindo */}
              {Array.from({ length: 8 }).map((_, i) =>
              <circle key={i} cx={70 + i * 40} cy={460 - i * 20} r="1.8" fill="#FF8B7A" opacity={0.5 + i % 3 * 0.15} filter="url(#hero-glow)">
                  <animate attributeName="cy" values={`${460 - i * 20};${300 - i * 20};${460 - i * 20}`} dur={`${4 + i * 0.3}s`} repeatCount="indefinite" />
                  <animate attributeName="opacity" values="0;0.9;0" dur={`${4 + i * 0.3}s`} repeatCount="indefinite" />
                </circle>
              )}
            </svg>

            {/* modelo */}
            <img src="assets/hero-model.png" alt="Hakon 4D" 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.15))' }} />

            {/* gradient inferior para card flutuante ler */}
            <div className="absolute inset-0 pointer-events-none z-20" style={{ background: 'linear-gradient(180deg, transparent 60%, rgba(5,7,8,0.85) 100%)' }}></div>

            {/* card ponteira, 65% da altura, abaixo do meio */}
            <div className="absolute top-[65%] -translate-y-1/2 right-4 p-3 rounded-2xl backdrop-blur-md z-30 max-w-[200px]" 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: 'var(--neon)', color: '#051a1a' }}>
                  <svg width="16" height="16" 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: 'var(--neon)' }}>Ponteira −12°C</div>
                  <div className="text-[11px] leading-tight" style={{ color: C.cream }}>Conforto durante<br />a aplicação</div>
                </div>
              </div>
            </div>
          </div>
          {/* floating chip, canto superior esquerdo */}
          <div className="absolute -top-4 -left-4 px-4 py-3 rounded-2xl shadow-2xl neon-glow z-40" style={{ background: '#0E3B3A', color: 'var(--neon)', transform: 'rotate(-3deg)' }}>
            <div className="text-[10px] uppercase tracking-wider opacity-70">tecnologia</div>
            <div className="font-display text-xl" style={{ fontWeight: 900, fontStyle: 'italic' }}>Hakon 4D</div>
          </div>
          {/* floating chip, sobrepondo a borda inferior */}
          <div className="absolute -bottom-6 -right-2 px-5 py-4 rounded-2xl shadow-2xl z-40" style={{ background: C.cream, color: C.ink, transform: 'rotate(2deg)', textAlign: "right" }}>
            <div className="flex gap-1 mb-1">
              {[1, 2, 3, 4, 5].map((i) => <span key={i} style={{ color: C.coralDeep }}>★</span>)}
            </div>
            <div className="text-xs">"Todo o medo de laser foi embora."</div>
            <div className="text-[10px] opacity-60 mt-1">— Susana S.</div>
          </div>
        </div>
      </div>

      {/* marquee */}
      <div className="relative border-t border-b py-5 overflow-hidden" style={{ borderColor: 'rgba(244,237,227,0.1)' }}>
        <div className="flex gap-12 whitespace-nowrap animate-marquee" style={{}}>
          {Array(3).fill(0).map((_, i) =>
          <div key={i} className="flex gap-12 items-center text-2xl md:text-3xl" style={{ color: 'rgba(244,237,227,0.4)' }}>
              <span style={{ fontStyle: 'italic' }}>protocolo vivo</span>
              <span style={{ color: C.coral }}>✦</span>
              <span>Garantia 12 meses</span>
              <span style={{ color: C.coral }}>✦</span>
              <span style={{ fontStyle: 'italic' }}>todos os fototipos</span>
              <span style={{ color: C.coral }}>✦</span>
              <span>4 comprimentos de onda</span>
              <span style={{ color: C.coral }}>✦</span>
              <span style={{ fontStyle: 'italic' }}>Cashback Nubelle</span>
              <span style={{ color: C.coral }}>✦</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Star() {
  return <svg width="14" height="14" viewBox="0 0 24 24" fill={C.coral}><path d="M12 2l2.9 6.9L22 10l-5.5 4.7 1.7 7.3L12 18.3 5.8 22l1.7-7.3L2 10l7.1-1.1L12 2z" /></svg>;
}

// ====== STORY / Identification ======
function Story() {
  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">
        <div className="text-xs uppercase tracking-[0.25em] mb-6" style={{ color: C.coralDeep }}>uma história que se repete</div>

        <div className="grid md:grid-cols-12 gap-10 items-start">
          {/* COLUNA TEXTUAL — headline + corpo */}
          <div className="md:col-span-7">
            <h2 className="font-display" style={{ fontSize: 'clamp(34px, 4.5vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 700 }}>
              Ela fez <em style={{ color: C.coralDeep, fontStyle: 'italic', fontWeight: 900 }}>8 sessões.</em> <br />
              Quando terminou, os pelos voltaram.
            </h2>

            <div className="mt-10 space-y-5 text-lg" style={{ color: 'rgba(14,59,58,0.78)', lineHeight: 1.6 }}>
              <p>Ficou a pergunta: <em>o laser não funciona, ou só aquele protocolo não funcionou?</em></p>
              <p className="font-medium" style={{ color: C.ink, fontSize: '1.4em' }}>
                O laser funcionou. O protocolo falhou.
              </p>
              <p>Isso acontece quando alguém vende sessão em vez de tratamento. Na Nubelle, sua pele é <strong style={{ color: C.ink }}>avaliada antes do primeiro disparo</strong>, e reavaliada a cada 3 sessões.</p>
            </div>
          </div>

          {/* COLUNA MÉTODO — soberana, animada */}
          <div className="md:col-span-5">
            <div className="sticky top-8 group relative p-8 rounded-3xl overflow-hidden method-card method-float" style={{ background: C.ink, color: C.cream, border: '1px solid rgba(232,154,142,0.25)', boxShadow: '0 30px 80px -20px rgba(14,59,58,0.45), 0 0 0 1px rgba(232,154,142,0.08)' }}>
              {/* halo cônico girando */}
              <div className="absolute -inset-12 spin-slow opacity-25 pointer-events-none" style={{
                background: 'conic-gradient(from 90deg, transparent, rgba(232,154,142,0.6), transparent 35%)',
                filter: 'blur(40px)'
              }}></div>
              {/* shimmer line passando */}
              <div className="absolute inset-0 pointer-events-none method-shimmer"></div>
              {/* grid sutil */}
              <div className="absolute inset-0 opacity-[0.05] pointer-events-none" style={{
                backgroundImage: 'linear-gradient(rgba(232,154,142,0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(232,154,142,0.6) 1px, transparent 1px)',
                backgroundSize: '40px 40px'
              }}></div>

              <div className="relative">
                <div className="text-xs uppercase tracking-[0.25em] mb-6 flex items-center gap-2" style={{ color: C.coral }}>
                  <span className="w-1.5 h-1.5 rounded-full bg-[var(--coral,#E89A8E)] pulse-dot" style={{ background: C.coral }}></span>
                  o método nubelle
                </div>
                <ol className="space-y-6">
                  {[
                  ['01', 'Diagnóstico', 'Fototipo, pelo, histórico e sensibilidade.'],
                  ['02', 'Protocolo', 'Plano calibrado para você, não a receita da casa.'],
                  ['03', 'Acompanhamento', 'Reavaliação técnica a cada 3 sessões.'],
                  ['04', 'Garantia', '12 meses · até 3 sessões de manutenção.']].
                  map(([n, t, d], i) =>
                  <li key={n} className="flex gap-4 method-item" style={{ animationDelay: `${i * 0.15}s` }}>
                      <div className="font-serif text-2xl shrink-0" style={{ color: C.coral }}>{n}</div>
                      <div>
                        <div className="font-medium">{t}</div>
                        <div className="text-sm mt-1" style={{ color: 'rgba(244,237,227,0.7)' }}>{d}</div>
                      </div>
                    </li>
                  )}
                </ol>
              </div>
            </div>
          </div>
        </div>

        {/* CITAÇÃO FINAL com riscado elegante */}
        <div className="mt-20 text-center max-w-3xl mx-auto">
          <p className="font-display italic" style={{ color: C.ink, fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.2, letterSpacing: '-0.015em', fontWeight: 500 }}>
            Você não merece <span className="strike-elegante">mais um pacote.</span> <br />
            Você merece <em style={{ fontWeight: 900, color: C.coralDeep, fontStyle: 'italic' }}>a última vez que vai precisar pensar nisso.</em>
          </p>
        </div>
      </div>

      <style>{`
        .method-shimmer::before {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(115deg, transparent 30%, rgba(232,154,142,0.18) 50%, transparent 70%);
          animation: methodShimmer 6s ease-in-out infinite;
        }
        @keyframes methodShimmer {
          0%, 100% { transform: translateX(-100%); opacity: 0; }
          50% { transform: translateX(100%); opacity: 1; }
        }
        .method-card:hover { box-shadow: 0 40px 100px -20px rgba(14,59,58,0.6), 0 0 80px rgba(232,154,142,0.3); transition: box-shadow 0.6s; }
        .method-float {
          animation: methodFloat 7s ease-in-out infinite;
        }
        @keyframes methodFloat {
          0%, 100% { transform: translateY(0) rotate(0deg); }
          50% { transform: translateY(-8px) rotate(-0.3deg); }
        }
        .method-item {
          opacity: 0;
          transform: translateY(8px);
          animation: methodItem 0.7s ease forwards;
        }
        @keyframes methodItem {
          to { opacity: 1; transform: translateY(0); }
        }
        .pulse-dot {
          animation: pulseDot 1.8s ease-in-out infinite;
          box-shadow: 0 0 8px ${C.coral};
        }
        @keyframes pulseDot {
          0%, 100% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.5); opacity: 0.6; }
        }
        .strike-elegante {
          position: relative;
          color: rgba(14,59,58,0.45);
          display: inline-block;
        }
        .strike-elegante::after {
          content: '';
          position: absolute;
          left: -2%;
          right: -2%;
          top: 52%;
          height: 2px;
          background: linear-gradient(90deg, transparent 0%, ${C.coralDeep} 15%, ${C.coralDeep} 85%, transparent 100%);
          transform: rotate(-2deg);
          transform-origin: center;
          animation: strikeIn 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
          transform: scaleX(0) rotate(-2deg);
        }
        @keyframes strikeIn {
          0% { transform: scaleX(0) rotate(-2deg); transform-origin: left; }
          100% { transform: scaleX(1) rotate(-2deg); transform-origin: left; }
        }
      `}</style>
    </section>);

}

// ====== Method (3 steps with imagery) ======
function Method() {
  const steps = [
  { n: '01', label: 'Consulta', title: 'Sua pele passa por um diagnóstico real', body: 'Fototipo, histórico de manchas, tipo de pelo, sensibilidade, exposição solar. Não é triagem. É diagnóstico.' },
  { n: '02', label: 'Protocolo', title: 'Seu protocolo é montado para você', body: 'Fototipo, histórico de manchas, tipo de pelo, sensibilidade, exposição solar. Não é triagem. É diagnóstico.' },
  { n: '03', label: 'Evolução', title: 'A cada 3 sessões, ajuste técnico', body: 'Sua evolução é acompanhada. Sensibilidade ao desconforto também é monitorada, varia por dia e por ciclo.' }];

  return (
    <section id="metodo" className="relative py-24 md:py-32 overflow-hidden" style={{ background: C.cream }}>
      <div className="max-w-[1400px] mx-auto px-5 md:px-8">
        <div className="grid md:grid-cols-12 gap-8 items-end mb-16">
          <div className="md:col-span-7">
            <div className="text-xs uppercase tracking-[0.25em] mb-4" style={{ color: C.coralDeep }}>como funciona</div>
            <h2 className="font-serif" style={{ fontSize: 'clamp(34px, 4.5vw, 56px)', lineHeight: 1.05, color: C.ink, fontWeight: 400 }}>
              O mercado vende sessão. <br />
              <em style={{ color: C.coralDeep }}>A Nubelle conduz protocolo.</em>
            </h2>
          </div>
          <div className="md:col-span-5">
            <p className="text-lg" style={{ color: 'rgba(14,59,58,0.7)', lineHeight: 1.55 }}>
              A maioria das nossas clientes nota redução visível a partir da <strong style={{ color: C.ink }}>3ª sessão</strong>. Muitas chegam à 7ª e já pararam de depender da depilação tradicional. Esse resultado vem de protocolo calibrado, não de sorte.
            </p>
          </div>
        </div>

        <div className="grid md:grid-cols-3 gap-5">
          {steps.map((s, i) =>
          <div key={s.n} className="group relative p-8 rounded-3xl transition-all hover:-translate-y-1" style={{ background: C.white, border: `1px solid ${C.bone}` }}>
              <div className="flex items-start justify-between mb-8">
                <div className="font-serif text-5xl" style={{ color: C.coral, fontWeight: 300 }}>{s.n}</div>
                <span className="text-xs uppercase tracking-[0.2em] px-3 py-1.5 rounded-full" style={{ background: C.bone, color: C.ink }}>{s.label}</span>
              </div>
              <h3 className="font-serif text-2xl mb-3" style={{ color: C.ink, lineHeight: 1.15, fontWeight: 500 }}>{s.title}</h3>
              <p style={{ color: 'rgba(14,59,58,0.65)', lineHeight: 1.55 }}>{s.body}</p>
              <div className="mt-8 h-1 w-12 rounded-full transition-all group-hover:w-24" style={{ background: C.coral }}></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { FloatingCTA, Hero, Story, Method, C });