/* MeuLook — Page Sections */

/* ---- HERO ---- */
const HeroSection = ({ tweaks }) => (
  <section id="hero">
    <FloatingOrbs colors={[tweaks.accentColor || '#FF2D78', '#8B5CF6', '#FFB800', '#06D6A0', '#FF6B6B']} count={5} />
    <div className="hero-mesh"></div>
    <div className="container">
      <div className="hero-wrap">
        <div className="hero-badge reveal">
          <span className="pulse-dot"></span>
          Coloração Pessoal por IA + Especialistas
        </div>
        <h1 className="hero-title reveal d1">
          As cores certas existem. Elas vão{' '}
          <span className="gradient-text shimmer">transformar</span>
          <br />seu rosto, seu estilo e sua autoestima
        </h1>
        <p className="hero-sub reveal d2">
          Chega de comprar roupas que "não ficam bem" sem entender por quê.
          Receba <strong>sua paleta personalizada completa</strong>: roupas, cabelo, maquiagem e acessórios. Entregue em até 24h.
        </p>
        <div className="hero-ctas reveal d3">
          <GradientButton href="#price" size="lg">
            <Icon name="sparkles" size={20} stroke="#fff" />
            Quero Descobrir Minhas Cores
          </GradientButton>
          <GradientButton href="#steps" variant="outline" size="md">
            Como funciona?
          </GradientButton>
        </div>
        <div className="hero-trust reveal d4">
          <TrustItem icon="zap">Entrega em <strong>até 24h</strong></TrustItem>
          <TrustItem icon="shield">Garantia de <strong>7 dias</strong></TrustItem>
          <TrustItem icon="palette">IA + <strong>Especialistas</strong></TrustItem>
          <TrustItem icon="lock">Pagamento <strong>seguro</strong></TrustItem>
        </div>
      </div>
    </div>
    <div className="hero-scroll-cue">
      <span>Role para descobrir</span>
      <div className="scroll-line"></div>
    </div>
  </section>
);

/* ---- PRICE STRIP (MARQUEE) ---- */
const PriceStrip = () => (
  <div className="price-strip-marquee">
    <div className="marquee-track">
      {[1,2,3].map(i => (
        <div key={i} className="marquee-group">
          <span className="marquee-item"><Sparkle size={12} color="#FF2D78" /> OFERTA DE LANÇAMENTO</span>
          <span className="marquee-item marquee-price">a partir de R$29,80</span>
          <span className="marquee-item"><Sparkle size={12} color="#8B5CF6" /> ENTREGA EM 24H</span>
          <span className="marquee-item">GARANTIA 7 DIAS</span>
          <span className="marquee-item"><Sparkle size={12} color="#FFB800" /> A PARTIR DE R$29,80</span>
          <span className="marquee-item">3 PLANOS DISPONÍVEIS</span>
        </div>
      ))}
    </div>
  </div>
);

/* ---- PAIN SECTION ---- */
const PainSection = () => {
  const pains = [
    { bad: 'Compra roupas lindas que ficam no fundo do armário, mas nada combina.', good: 'Com sua paleta, cada peça funciona. Armário com aproveitamento total.' },
    { bad: 'Fica pálida ou apagada com cores que ficam ótimas nas outras.', good: 'Seu rosto brilha. Olheiras somem e você parece mais jovem.' },
    { bad: 'Gasta em maquiagem mas nunca consegue o rosto iluminado.', good: 'Maquiagem que realmente ilumina sua pele, na vida real.' },
    { bad: 'Sente que sua imagem não reflete quem você realmente é.', good: 'Você se olha no espelho e reconhece a mulher que sempre quis ser.' }
  ];
  return (
    <section id="pain" className="section-light">
      <div className="container">
        <SectionHeader
          tag="Você já sentiu isso?"
          tagIcon={<Icon name="heart" size={14} />}
          title='As cores <span class="gradient-text">erradas</span> estão sabotando sua beleza'
          subtitle="Não é culpa sua. Ninguém te ensinou que cada pessoa tem uma paleta de cores única."
        />
        <div className="pain-grid">
          {pains.map((p, i) => (
            <div key={i} className={`pain-card reveal d${i + 1}`}>
              <div className="pain-bad">
                <div className="pain-icon-wrap bad"><Icon name="x" size={18} strokeWidth={3} /></div>
                <p>{p.bad}</p>
              </div>
              <div className="pain-divider"><span className="pain-arrow">→</span></div>
              <div className="pain-good">
                <div className="pain-icon-wrap good"><Icon name="check" size={18} strokeWidth={3} /></div>
                <p>{p.good}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---- TRANSFORM SECTION ---- */
const TransformSection = () => {
  const cards = [
    { icon: 'sun', title: 'Seu rosto ganha luz e juventude', desc: 'As cores certas funcionam como um "filtro natural" que suaviza olheiras, ilumina a pele e destaca seus traços mais bonitos.' },
    { icon: 'shirt', title: 'Seu guarda-roupa faz sentido', desc: 'Cada peça combina entre si. Você monta looks sem esforço e para de desperdiçar dinheiro.' },
    { icon: 'chat', title: 'Você transmite a mensagem certa', desc: 'As cores comunicam poder, delicadeza, criatividade: o que você quiser expressar.' },
    { icon: 'heart', title: 'Sua autoestima se transforma', desc: 'Quando você se vê bonita no espelho, você se sente bonita na vida. Investimento para sempre.' }
  ];
  return (
    <section id="transform" className="section-pink">
      <div className="container">
        <SectionHeader
          tag="A virada"
          tagIcon={<Icon name="star" size={14} />}
          title='Quando você descobre suas cores, <span class="drawn-line">tudo muda</span>'
          subtitle="Não é exagero. É o que acontece com cada mulher que recebe sua paleta personalizada."
        />
        <div className="transform-grid">
          {cards.map((c, i) => (
            <div key={i} className={`transform-card reveal d${i + 1}`}>
              <div className="card-icon-box"><Icon name={c.icon} size={26} /></div>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
            </div>
          ))}
        </div>
        <PaletteBar />
        <p className="palette-hint reveal">Toque para expandir. Sua paleta terá as cores exatas para o seu tipo único</p>
      </div>
    </section>
  );
};

/* ---- STEPS SECTION ---- */
const StepsSection = () => {
  const steps = [
    { num: '1', title: 'Faça seu pedido', desc: 'Finalize com pagamento seguro. Em minutos, você recebe no e-mail o link com todas as instruções.' },
    { num: '2', title: 'Envie 2 fotos simples', desc: 'Luz natural, sem maquiagem pesada. Você tira com seu celular em menos de 5 minutos.' },
    { num: '3', title: 'Receba em até 24h', desc: 'Nossa IA analisa suas características únicas e nossa equipe refina cada detalhe. Pronto!' }
  ];
  return (
    <section id="steps" className="section-light">
      <div className="container">
        <SectionHeader
          tag="Simples assim"
          tagIcon={<Icon name="check" size={14} />}
          title="Como funciona"
          subtitle="3 passos para a transformação mais rápida e acessível da sua vida."
        />
        <div className="steps-row">
          {steps.map((s, i) => (
            <div key={i} className={`step reveal d${i + 1}`}>
              <div className="step-num">{s.num}</div>
              {i < 2 && <div className="step-connector"></div>}
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---- RECEIVES SECTION ---- */
const ReceivesSection = () => {
  const items = [
    { icon: 'palette', title: 'Cartela de Cores Definitiva', desc: 'Paleta visual completa com todas as cores que harmonizam com você.' },
    { icon: 'shirt', title: 'Guia de Cores para Roupas', desc: 'Quais tons usar perto do rosto, em peças-chave e como combinar looks.' },
    { icon: 'star', title: 'Paleta de Maquiagem Ideal', desc: 'Tons de base, blush, batom e sombra que valorizam sua pele.' },
    { icon: 'scissors', title: 'Cores de Cabelo que Iluminam', desc: 'Do loiro ao ruivo: quais tonalidades funcionam para você.' },
    { icon: 'gem', title: 'Metais e Acessórios Certos', desc: 'Ouro, prata, rosé ou mix? Descubra o que destaca sua beleza.' },
    { icon: 'ban', title: 'Cores para Evitar', desc: 'Entenda quais tons te apagam. Nunca mais erre.' }
  ];
  return (
    <section id="receives" className="section-dark">
      <FloatingOrbs colors={['#FF2D78', '#8B5CF6']} count={3} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <SectionHeader
          light={false}
          tag="O que você recebe"
          tagIcon={<Icon name="download" size={14} />}
          title='Seu guia completo de cores: <span style="color:var(--pink)">para a vida toda</span>'
          subtitle="Tudo incluído na sua Análise de Coloração Pessoal:"
        />
        <div className="receives-grid">
          {items.map((item, i) => (
            <div key={i} className={`receive-item reveal d${(i % 5) + 1}`}>
              <div className="receive-icon"><Icon name={item.icon} size={22} /></div>
              <div>
                <h4>{item.title}</h4>
                <p>{item.desc}</p>
              </div>
            </div>
          ))}
        </div>
        <SeasonsBar />
        <div className="skin-tones reveal">
          {['#FADADD','#E8C4A0','#C9A96E','#8B5E3C','#4A3728','#2C1810'].map((c, i) => (
            <div key={i} className="tone-circle" style={{ background: c }}></div>
          ))}
        </div>
        <p className="tone-hint">Analisamos e valorizamos todos os tons de pele</p>
      </div>
    </section>
  );
};

/* ---- UPLOAD SECTION ---- */
const UploadSection = () => {
  const [files, setFiles] = React.useState([]);
  const [dragging, setDragging] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const fileRef = React.useRef(null);

  const handleFiles = (newFiles) => {
    const images = Array.from(newFiles).filter(f => f.type.startsWith('image/')).slice(0, 2);
    if (images.length === 0) return;
    const previews = images.map(f => ({ name: f.name, url: URL.createObjectURL(f), size: f.size }));
    setFiles(prev => [...prev, ...previews].slice(0, 2));
  };

  const startUpload = () => {
    setUploading(true);
    setProgress(0);
    const interval = setInterval(() => {
      setProgress(p => {
        if (p >= 100) { clearInterval(interval); return 100; }
        return p + Math.random() * 8 + 2;
      });
    }, 150);
  };

  return (
    <section id="upload" className="section-pink">
      <div className="container">
        <SectionHeader
          tag="Envie suas fotos"
          tagIcon={<Icon name="camera" size={14} />}
          title='Sua análise começa <span class="gradient-text">aqui</span>'
          subtitle="Envie 2 fotos simples seguindo nosso guia. Luz natural, sem maquiagem pesada."
        />
        <div className="upload-area reveal">
          <div
            className={`upload-dropzone ${dragging ? 'dragging' : ''} ${files.length > 0 ? 'has-files' : ''}`}
            onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
            onDragLeave={() => setDragging(false)}
            onDrop={(e) => { e.preventDefault(); setDragging(false); handleFiles(e.dataTransfer.files); }}
            onClick={() => fileRef.current?.click()}
          >
            <input ref={fileRef} type="file" accept="image/*" multiple style={{ display: 'none' }} onChange={e => handleFiles(e.target.files)} />
            {files.length === 0 ? (
              <div className="upload-placeholder">
                <div className="upload-icon-big"><Icon name="camera" size={40} stroke="var(--pink)" /></div>
                <h3>Arraste suas fotos aqui</h3>
                <p>ou toque para selecionar do celular</p>
                <div className="upload-specs">
                  <span><Icon name="image" size={14} /> JPG, PNG</span>
                  <span><Icon name="check" size={14} /> Máx. 2 fotos</span>
                </div>
              </div>
            ) : (
              <div className="upload-previews">
                {files.map((f, i) => (
                  <div key={i} className="upload-preview">
                    <img src={f.url} alt={f.name} />
                    <button className="upload-remove" onClick={(e) => { e.stopPropagation(); setFiles(files.filter((_, j) => j !== i)); }}>
                      <Icon name="x" size={14} strokeWidth={3} />
                    </button>
                  </div>
                ))}
                {files.length < 2 && (
                  <div className="upload-add-more">
                    <Icon name="camera" size={24} stroke="var(--pink)" />
                    <span>+ Adicionar foto</span>
                  </div>
                )}
              </div>
            )}
          </div>
          {files.length > 0 && !uploading && (
            <GradientButton onClick={startUpload} size="lg" style={{ width: '100%', marginTop: 16 }}>
              <Icon name="upload" size={20} stroke="#fff" />
              Enviar para Análise ({files.length}/2 fotos)
            </GradientButton>
          )}
          {uploading && (
            <div className="upload-progress">
              <div className="progress-bar">
                <div className="progress-fill" style={{ width: `${Math.min(progress, 100)}%` }}></div>
              </div>
              <p>{progress >= 100 ? 'Fotos salvas! Agora escolha seu plano.' : 'Enviando suas fotos...'}</p>
              {progress >= 100 && (
                <a href="#price" onClick={e => { e.preventDefault(); document.getElementById('price')?.scrollIntoView({behavior:'smooth'}); }}
                   style={{display:'block',marginTop:16,padding:'14px 32px',background:'var(--gradient)',color:'#fff',borderRadius:100,fontWeight:700,textAlign:'center',cursor:'pointer',textDecoration:'none'}}>
                  Ver Planos e Finalizar Análise →
                </a>
              )}
            </div>
          )}
        </div>
        <div className="upload-tips reveal">
          <div className="tip"><Icon name="sun" size={18} stroke="var(--pink)" /> <span>Use luz natural</span></div>
          <div className="tip"><Icon name="camera" size={18} stroke="var(--pink)" /> <span>Rosto visível</span></div>
          <div className="tip"><Icon name="x" size={18} stroke="var(--pink)" /> <span>Sem filtros</span></div>
        </div>
      </div>
    </section>
  );
};

/* ---- TESTIMONIALS ---- */
const TestimonialsSection = () => {
  const testimonials = [
    { name: 'Renata M.', location: 'São Paulo, SP', quote: '"Eu chorei. Sempre achei que preto me favorecia e descobri que estava me apagando há 20 anos. Usei minha primeira blusa coral e meu marido perguntou se eu tinha feito algum procedimento!"' },
    { name: 'Camila S.', location: 'Belo Horizonte, MG', quote: '"Economizei mais de R$1.000 só parando de comprar errado. Agora vou às compras com minha paleta no celular e só levo o que funciona."' },
    { name: 'Juliana T.', location: 'Curitiba, PR', quote: '"Achava que era frescura até ver o antes e depois da minha irmã. Parece que finalmente entendi o manual de instruções do meu próprio rosto."' },
    { name: 'Fernanda L.', location: 'Recife, PE', quote: '"Sempre fui a \'sem sal\' das amigas. Descobri que sou Inverno Profundo e que cores vibrantes são minha cara. Nas últimas fotos, EU roubo a cena!"' }
  ];
  return (
    <section id="tests" className="section-light">
      <div className="container">
        <SectionHeader
          tag="Histórias reais"
          tagIcon={<Icon name="heart" size={14} />}
          title="O que nossas clientes dizem"
          subtitle="Mulheres que descobriram o poder de usar as cores certas."
        />
        <div className="test-grid">
          {testimonials.map((t, i) => (
            <TestimonialCard key={i} {...t} delay={(i % 4) + 1} />
          ))}
        </div>
      </div>
    </section>
  );
};

function PricingSection() {
  React.useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .pricing-section { padding: 80px 0; background: var(--bg-pink, #FFF0F5); }
      .pricing-section .section-title { font-family: var(--font-display, 'Outfit', sans-serif); font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; color: var(--dark, #1A1025); text-align: center; }
      .pricing-section .section-subtitle { font-size: 1.05rem; color: var(--gray, #7A7189); margin-top: 14px; text-align: center; }
      .plans-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; align-items:start; margin-top:48px; }
      .plan-card { background:#fff; border-radius:20px; padding:32px 28px; box-shadow:var(--shadow-card); position:relative; transition:transform .3s; }
      .plan-card:hover { transform:translateY(-4px); }
      .plan-card.popular { box-shadow:0 0 0 2px var(--pink), 0 8px 40px rgba(255,45,120,0.15); transform:scale(1.04); }
      .plan-card.popular:hover { transform:scale(1.04) translateY(-4px); }
      .plan-badge { display:inline-block; background:var(--gradient); color:#fff; font-size:.75rem; font-weight:700; padding:4px 14px; border-radius:100px; margin-bottom:16px; }
      .plan-discount { display:inline-block; background:#FFF0F5; color:var(--pink); font-size:.8rem; font-weight:700; padding:3px 10px; border-radius:100px; margin-left:8px; }
      .plan-name { font-size:1.3rem; font-weight:800; margin-bottom:8px; }
      .plan-from { color:var(--gray-light); font-size:.85rem; margin-bottom:4px; }
      .plan-price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:20px; }
      .plan-currency { font-size:1.2rem; font-weight:700; color:var(--pink); }
      .plan-amount { font-size:2.8rem; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
      .plan-items { list-style:none; margin-bottom:28px; display:flex; flex-direction:column; gap:10px; }
      .plan-item { display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--dark2); }
      .plan-check { width:20px; height:20px; min-width:20px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; }
      .plan-btn { display:block; width:100%; text-align:center; padding:16px; background:var(--gradient); color:#fff; border-radius:100px; font-weight:700; font-size:1rem; transition:opacity .2s,transform .2s; }
      .plan-btn:hover { opacity:.9; transform:translateY(-1px); }
      .plans-guarantee { text-align:center; margin-top:28px; color:var(--gray); font-size:.9rem; }
      @media(max-width:768px) { .plans-grid { grid-template-columns:1fr; gap:16px; } .plan-card.popular { transform:none; } }
      @media(max-width:480px) { .pricing-section { padding: 48px 0; } .plans-grid { margin-top:28px; } .plan-card { padding:24px 20px; } .plan-amount { font-size:2.4rem; } .plan-name { font-size:1.15rem; } .plan-btn { padding:14px; font-size:.92rem; } }
    `;
    document.head.appendChild(style);
    return () => { document.head.removeChild(style); };
  }, []);

  const plans = [
    {
      name: 'Essencial',
      from: 'De: R$59,60',
      price: '29,80',
      popular: false,
      href: 'upload.html?plan=essencial',
      items: [
        'Cartela de cores personalizada completa',
        'Cores para evitar (e por quê)',
        'Análise por IA + revisão de especialistas',
        'Entrega em até 48h por e-mail',
        'Garantia incondicional de 7 dias'
      ]
    },
    {
      name: 'Completo',
      from: 'De: R$119,60',
      price: '59,80',
      popular: true,
      href: 'upload.html?plan=completo',
      items: [
        'Tudo do Essencial incluído',
        'Guia completo de roupas e maquiagem',
        'Paleta de cabelo personalizada',
        'Metais e acessórios ideais',
        'Entrega em até 24h por e-mail',
        '1 revisão gratuita em 30 dias'
      ]
    },
    {
      name: 'Premium',
      from: 'De: R$195,60',
      price: '97,80',
      popular: false,
      href: 'upload.html?plan=premium',
      items: [
        'Tudo do Completo incluído',
        'Consultoria ao vivo por vídeo 30min',
        'Guia de compras personalizado',
        'Entrega prioritária em até 12h',
        '3 revisões gratuitas em 90 dias',
        'Acesso ao grupo VIP'
      ]
    }
  ];

  return (
    <section className="pricing-section" id="price">
      <div className="container">
        <h2 className="section-title">Escolha seu plano</h2>
        <p className="section-subtitle">Descubra as cores que vão transformar seu visual</p>
        <div className="plans-grid">
          {plans.map((plan, i) => (
            <div key={i} className={`plan-card ${plan.popular ? 'popular' : ''}`}>
              {plan.popular && <div className="plan-badge">⭐ MAIS POPULAR</div>}
              <div className="plan-name">
                {plan.name}
                <span className="plan-discount">50% OFF</span>
              </div>
              <div className="plan-from">{plan.from}</div>
              <div className="plan-price-row">
                <span className="plan-currency">R$</span>
                <span className="plan-amount">{plan.price}</span>
              </div>
              <ul className="plan-items">
                {plan.items.map((item, j) => (
                  <li key={j} className="plan-item">
                    <span className="plan-check">
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
              <a href={plan.href} target="_blank" rel="noopener noreferrer" className="plan-btn">QUERO ESTE PLANO</a>
            </div>
          ))}
        </div>
        <div className="plans-guarantee">🔒 Pagamento 100% seguro · Garantia de 7 dias</div>
      </div>
    </section>
  );
}


/* ---- GUARANTEE ---- */
const GuaranteeSection = () => (
  <section id="guarantee" className="section-pink">
    <div className="container">
      <div className="guarantee-box reveal">
        <div className="guarantee-badge">
          <div className="guarantee-badge-inner">
            <span className="guarantee-num">7</span>
            <span className="guarantee-label">Dias de<br/>Garantia</span>
          </div>
        </div>
        <div className="guarantee-text">
          <h3>Garantia Incondicional de 7 Dias</h3>
          <p>Se por qualquer motivo você não ficar encantada com sua análise, basta enviar um e-mail em até 7 dias e devolvemos <strong>100% do seu dinheiro</strong>, sem perguntas.</p>
          <p className="guarantee-promise">Ou você ama, ou seu dinheiro de volta. Simples assim.</p>
        </div>
      </div>
    </div>
  </section>
);

function NewsletterSection() {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);

  React.useEffect(() => {
    if (document.getElementById('newsletter-styles')) return;
    const style = document.createElement('style');
    style.id = 'newsletter-styles';
    style.textContent = `
      .newsletter-section { padding: 80px 20px; }
      .nl-section-wrap { max-width: 680px; margin: 0 auto; }
      .nl-card { background: #fff; border-radius: 24px; box-shadow: 0 4px 40px rgba(255,45,120,0.08); overflow: hidden; margin-bottom: 48px; position: relative; }
      .nl-card-top { height: 8px; background: var(--gradient); position: relative; overflow: hidden; }
      .nl-card-top-sparkle { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; opacity: 0.8; font-size: 0.7rem; }
      .nl-card-body { padding: 40px 48px; text-align: center; }
      .nl-icon { width: 56px; height: 56px; background: var(--gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 20px rgba(255,45,120,0.25); }
      .nl-title { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800; margin-bottom: 8px; color: var(--dark, #1A1025); line-height: 1.25; }
      .nl-sub { color: var(--gray, #7A7189); margin-bottom: 28px; font-size: 0.95rem; font-family: 'DM Sans', sans-serif; }
      .nl-form { display: flex; gap: 0; max-width: 440px; margin: 0 auto; border-radius: 100px; overflow: hidden; box-shadow: 0 4px 20px rgba(255,45,120,0.15); }
      .nl-input { flex: 1; border: none; outline: none; padding: 16px 20px; font-size: 0.95rem; font-family: inherit; background: #fff; color: var(--dark, #1A1025); }
      .nl-input::placeholder { color: #B8B0C4; }
      .nl-btn { padding: 16px 28px; background: var(--gradient); color: #fff; border: none; font-weight: 700; font-size: 0.95rem; cursor: pointer; white-space: nowrap; font-family: 'Outfit', sans-serif; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
      .nl-btn:disabled { opacity: 0.7; cursor: not-allowed; }
      .nl-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: nl-spin 0.8s linear infinite; }
      @keyframes nl-spin { to { transform: rotate(360deg); } }
      .nl-hint { text-align: center; color: #B8B0C4; font-size: 0.8rem; margin-top: 12px; font-family: 'DM Sans', sans-serif; }
      .nl-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
      .nl-check { width: 52px; height: 52px; background: var(--gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: nl-pop 0.4s ease; }
      @keyframes nl-pop { 0%{transform:scale(0)} 70%{transform:scale(1.15)} 100%{transform:scale(1)} }
      .nl-success-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--dark, #1A1025); }
      .nl-success-sub { color: var(--gray, #7A7189); font-size: 0.9rem; }
      .insta-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
      .insta-ig-icon { width: 32px; height: 32px; background: var(--gradient); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
      .insta-at { font-weight: 700; font-size: 0.95rem; color: var(--dark, #1A1025); font-family: 'Outfit', sans-serif; }
      .insta-followers { font-size: 0.8rem; color: var(--gray, #7A7189); font-family: 'DM Sans', sans-serif; }
      .insta-follow-btn { margin-left: auto; padding: 6px 18px; border: 2px solid var(--pink, #FF2D78); color: var(--pink, #FF2D78); border-radius: 100px; font-weight: 700; font-size: 0.85rem; background: transparent; cursor: pointer; font-family: 'Outfit', sans-serif; transition: all 0.2s; }
      .insta-follow-btn:hover { background: var(--pink, #FF2D78); color: #fff; }
      .insta-posts-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
      .insta-post-card { aspect-ratio: 1/1; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; min-height: 100px; padding: 8px; }
      .insta-post-card:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
      .insta-post-emoji { font-size: 2rem; line-height: 1; }
      .insta-post-label { font-size: 0.7rem; font-weight: 600; color: #fff; text-align: center; padding: 0 4px; font-family: 'Outfit', sans-serif; }
      .nl-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#111; color:#fff; padding:14px 24px; border-radius:100px; font-weight:600; z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,0.2); animation:nlToastIn .3s ease; }
      @keyframes nlToastIn { from{opacity:0;transform:translate(-50%,10px);} to{opacity:1;transform:translate(-50%,0);} }
      @media(max-width: 768px) {
        .nl-card-body { padding: 28px 24px; }
        .nl-form { flex-direction: column; border-radius: 16px; overflow: visible; box-shadow: none; gap: 10px; }
        .nl-input { border: 2px solid #f0e6f0; border-radius: 100px; padding: 14px 20px; }
        .nl-btn { border-radius: 100px; padding: 14px 24px; }
        .insta-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      }
      @media(max-width: 480px) {
        .newsletter-section { padding: 48px 16px; }
        .nl-card-body { padding: 24px 16px; }
        .nl-title { font-size: 1.3rem; }
        .nl-sub { font-size: 0.88rem; margin-bottom: 20px; }
        .nl-btn { padding: 14px 20px; font-size: 0.88rem; }
        .insta-posts-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
        .insta-post-card { min-height: 80px; border-radius: 12px; }
        .insta-post-emoji { font-size: 1.5rem; }
        .insta-post-label { font-size: 0.6rem; }
        .insta-follow-btn { padding: 5px 12px; font-size: 0.78rem; }
      }
      @media(max-width: 360px) {
        .nl-card-body { padding: 20px 14px; }
        .nl-title { font-size: 1.15rem; }
        .insta-post-card { min-height: 70px; }
      }
    `;
    document.head.appendChild(style);
  }, []);

  const showToast = () => {
    const t = document.createElement('div');
    t.className = 'nl-toast';
    t.textContent = '✅ Inscrição confirmada! Verifique seu e-mail.';
    document.body.appendChild(t);
    setTimeout(() => { if (t.parentNode) t.parentNode.removeChild(t); }, 3500);
  };

  const handleSubmit = () => {
    if (!email.includes('@')) return;
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setSubmitted(true); showToast(); }, 1500);
  };

  const posts = [
    { emoji: '🎨', label: 'Paleta Outono', bg: 'linear-gradient(135deg, #FF6B6B, #FFB800)' },
    { emoji: '💄', label: 'Makeup Tips', bg: 'linear-gradient(135deg, #FF2D78, #8B5CF6)' },
    { emoji: '👗', label: 'Looks do Dia', bg: 'linear-gradient(135deg, #8B5CF6, #06D6A0)' },
    { emoji: '✨', label: 'Transformações', bg: 'linear-gradient(135deg, #FFB800, #FF6B6B)' },
    { emoji: '🌸', label: 'Primavera', bg: 'linear-gradient(135deg, #06D6A0, #3B82F6)' },
    { emoji: '🎉', label: 'Tendências', bg: 'linear-gradient(135deg, #EC4899, #FFB800)' }
  ];

  return (
    <section className="newsletter-section" style={{ background: '#FFFBFD' }}>
      <div className="container">
        <div className="nl-section-wrap">
          <div className="nl-card">
            <div className="nl-card-top">
              <span className="nl-card-top-sparkle" style={{ left: '10%' }}>✦</span>
              <span className="nl-card-top-sparkle" style={{ left: '35%' }}>✧</span>
              <span className="nl-card-top-sparkle" style={{ left: '65%' }}>✦</span>
              <span className="nl-card-top-sparkle" style={{ left: '90%' }}>✧</span>
            </div>
            <div className="nl-card-body">
              {!submitted ? (
                <React.Fragment>
                  <div className="nl-icon">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="4" width="20" height="16" rx="2"/>
                      <path d="M2 7l10 6 10-6"/>
                    </svg>
                  </div>
                  <h2 className="nl-title">Dicas de cores direto no seu e-mail</h2>
                  <p className="nl-sub">Tendências, paletas e looks exclusivos toda semana. Grátis.</p>
                  <div className="nl-form">
                    <input
                      type="email"
                      placeholder="Seu melhor e-mail"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      className="nl-input"
                    />
                    <button type="button" onClick={handleSubmit} className="nl-btn" disabled={submitting}>
                      {submitting ? (
                        <React.Fragment>
                          <span className="nl-spinner"></span>
                          ENVIANDO
                        </React.Fragment>
                      ) : 'QUERO RECEBER'}
                    </button>
                  </div>
                  <p className="nl-hint">Sem spam. Cancele quando quiser.</p>
                </React.Fragment>
              ) : (
                <div className="nl-success">
                  <div className="nl-check">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                      <polyline points="20 6 9 17 4 12"/>
                    </svg>
                  </div>
                  <div className="nl-success-title">Inscrição confirmada!</div>
                  <div className="nl-success-sub">Verifique seu e-mail para confirmar.</div>
                </div>
              )}
            </div>
          </div>

          <div className="insta-wrap">
            <div className="insta-header-row">
              <div className="insta-ig-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="2" y="2" width="20" height="20" rx="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </div>
              <div>
                <div className="insta-at">@meulook.oficial</div>
                <div className="insta-followers">24.5k seguidores</div>
              </div>
              <button className="insta-follow-btn">Seguir</button>
            </div>
            <div className="insta-posts-grid">
              {posts.map((p, i) => (
                <div key={i} className="insta-post-card" style={{ background: p.bg }}>
                  <div className="insta-post-emoji">{p.emoji}</div>
                  <div className="insta-post-label">{p.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


const FAQSection = () => {
  const faqs = [
    { q: 'Funciona para todos os tons de pele?', a: 'Sim! Nossa análise é 100% personalizada. Seja sua pele clara, média, negra ou oriental, identificamos seu subtom único e as cores que harmonizam com você.' },
    { q: 'Preciso de fotos profissionais?', a: 'Não! Basta seguir nosso guia simples: fotos com luz natural, sem maquiagem pesada, em ambiente claro. Leva menos de 5 minutos no celular.' },
    { q: 'Em quanto tempo recebo minha análise?', a: 'Sua paleta personalizada é entregue em até 24 horas após o envio das fotos, geralmente bem menos!' },
    { q: 'A análise é feita só por IA?', a: 'As duas! A IA faz a análise técnica inicial e nossa equipe de especialistas revisa e refina cada resultado.' },
    { q: 'Posso usar a paleta para sempre?', a: 'Sim! Sua coloração pessoal não muda com o tempo. É um investimento para a vida toda.' },
    { q: 'E se eu não gostar do resultado?', a: 'Você tem 7 dias de garantia incondicional. Devolvemos 100% do valor, sem questionamentos.' }
  ];
  return (
    <section id="faq" className="section-pink">
      <div className="container">
        <SectionHeader
          tag="Dúvidas"
          tagIcon={<Icon name="chat" size={14} />}
          title="Perguntas frequentes"
        />
        <div className="faq-list">
          {faqs.map((f, i) => <FAQItem key={i} question={f.q} answer={f.a} />)}
        </div>
      </div>
    </section>
  );
};

/* ---- FINAL CTA ---- */
const FinalCTASection = () => (
  <section id="final" className="section-final">
    <FloatingOrbs colors={['#FF2D78', '#8B5CF6', '#FFB800']} count={4} />
    <div className="container" style={{ position: 'relative', zIndex: 2 }}>
      <div className="final-wrap">
        <PillTag style={{ background: 'rgba(255,255,255,.12)', color: '#fff', borderColor: 'rgba(255,255,255,.25)' }}>
          Sua transformação começa agora
        </PillTag>
        <h2 className="reveal">Pare de adivinhar.<br /><span className="gradient-text shimmer">Descubra suas cores.</span></h2>
        <p className="reveal">A partir de R$29,80. Garantia de 7 dias e entrega em até 24h.</p>
        <GradientButton href="upload.html?plan=completo" size="lg" className="reveal">
          QUERO APROVEITAR AGORA
        </GradientButton>
        <div className="final-urgency reveal">Oferta de lançamento: <strong>preço especial por tempo limitado</strong></div>
      </div>
    </div>
  </section>
);



/* BLOCK: CustomCursor */
function CustomCursor() {
  const dotRef = React.useRef(null);
  const ringRef = React.useRef(null);
  const mouseRef = React.useRef({ x: 0, y: 0 });
  const ringPosRef = React.useRef({ x: 0, y: 0 });
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    if (!window.matchMedia || !window.matchMedia('(pointer:fine)').matches) return;

    const styleId = 'custom-cursor-styles';
    if (!document.getElementById(styleId)) {
      const style = document.createElement('style');
      style.id = styleId;
      style.textContent = `
        @media (pointer: fine) {
          * { cursor: none !important; }
        }
        .cc-dot {
          position: fixed;
          top: 0;
          left: 0;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: linear-gradient(135deg, #ff6fa5, #a855f7);
          pointer-events: none;
          z-index: 99999;
          transform: translate(-50%, -50%);
          transition: opacity 0.2s ease, transform 0.15s ease;
        }
        .cc-ring {
          position: fixed;
          top: 0;
          left: 0;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          border: 2px solid transparent;
          background: linear-gradient(135deg, #ff6fa5, #a855f7) border-box;
          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
          z-index: 99999;
          transform: translate(-50%, -50%);
          transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.2s ease;
        }
        .cc-ring.cc-hover {
          width: 52px;
          height: 52px;
          background: linear-gradient(135deg, rgba(255,111,165,0.4), rgba(168,85,247,0.4));
          mix-blend-mode: multiply;
          -webkit-mask: none;
          mask: none;
          border: none;
        }
        .cc-dot.cc-hidden {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0);
        }
      `;
      document.head.appendChild(style);
    }

    const onMove = (e) => {
      mouseRef.current.x = e.clientX;
      mouseRef.current.y = e.clientY;
      if (dotRef.current) {
        dotRef.current.style.left = e.clientX + 'px';
        dotRef.current.style.top = e.clientY + 'px';
      }
    };

    const animate = () => {
      ringPosRef.current.x += (mouseRef.current.x - ringPosRef.current.x) * 0.18;
      ringPosRef.current.y += (mouseRef.current.y - ringPosRef.current.y) * 0.18;
      if (ringRef.current) {
        ringRef.current.style.left = ringPosRef.current.x + 'px';
        ringRef.current.style.top = ringPosRef.current.y + 'px';
      }
      rafRef.current = requestAnimationFrame(animate);
    };

    const onOver = (e) => {
      if (e.target.closest && e.target.closest('a, button, [role="button"]')) {
        ringRef.current && ringRef.current.classList.add('cc-hover');
        dotRef.current && dotRef.current.classList.add('cc-hidden');
      }
    };
    const onOut = (e) => {
      if (e.target.closest && e.target.closest('a, button, [role="button"]')) {
        ringRef.current && ringRef.current.classList.remove('cc-hover');
        dotRef.current && dotRef.current.classList.remove('cc-hidden');
      }
    };

    window.addEventListener('mousemove', onMove);
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);
    rafRef.current = requestAnimationFrame(animate);

    return () => {
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
      cancelAnimationFrame(rafRef.current);
    };
  }, []);

  if (typeof window !== 'undefined' && window.matchMedia && !window.matchMedia('(pointer:fine)').matches) {
    return null;
  }

  return (
    <React.Fragment>
      <div ref={dotRef} className="cc-dot" />
      <div ref={ringRef} className="cc-ring" />
    </React.Fragment>
  );
}

/* BLOCK: InteractivePaletteSection */
function InteractivePaletteSection() {
  const [season, setSeason] = React.useState('primavera');
  const [animKey, setAnimKey] = React.useState(0);

  const seasons = {
    primavera: {
      nome: 'Primavera',
      cores: ['#FF8C94','#FFB347','#FFDB58','#77DD77','#AEC6CF','#F49AC2','#FF6961','#FDFD96'],
      desc: 'Tons quentes e claros que iluminam',
      bg: '#FFF4E6',
      dominant: '#FFB347'
    },
    verao: {
      nome: 'Verão',
      cores: ['#B39DDB','#90CAF9','#CE93D8','#F48FB1','#AECBEB','#D7B8F3','#87CEEB','#DDA0DD'],
      desc: 'Tons frios e suaves que delicam',
      bg: '#EEF2FF',
      dominant: '#B39DDB'
    },
    outono: {
      nome: 'Outono',
      cores: ['#D2691E','#CD853F','#8B4513','#A0522D','#DEB887','#BC8F5F','#C0853B','#8B7355'],
      desc: 'Tons terrosos e profundos que aquecem',
      bg: '#FFF8F0',
      dominant: '#D2691E'
    },
    inverno: {
      nome: 'Inverno',
      cores: ['#1A1A2E','#C0C0C0','#000080','#DC143C','#FF1493','#000000','#FFFFFF','#4B0082'],
      desc: 'Tons contrastantes e marcantes',
      bg: '#F5F5F5',
      dominant: '#1A1A2E'
    }
  };

  React.useEffect(() => {
    const styleId = 'interactive-palette-styles';
    if (!document.getElementById(styleId)) {
      const style = document.createElement('style');
      style.id = styleId;
      style.textContent = `
        .ips-section {
          padding: 80px 20px;
          transition: background-color 0.6s ease;
          position: relative;
          overflow: hidden;
        }
        @media (max-width: 480px) {
          .ips-section { padding: 48px 16px; }
        }
        .ips-container {
          max-width: 1100px;
          margin: 0 auto;
          text-align: center;
        }
        .ips-title {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 12px;
          background: linear-gradient(135deg, #ff6fa5, #a855f7);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .ips-subtitle {
          color: #666;
          margin-bottom: 40px;
          font-size: 1.05rem;
        }
        .ips-tabs {
          display: flex;
          gap: 12px;
          justify-content: center;
          flex-wrap: wrap;
          margin-bottom: 40px;
        }
        .ips-tab {
          padding: 12px 28px;
          border-radius: 999px;
          border: 2px solid rgba(0,0,0,0.1);
          background: white;
          font-weight: 600;
          color: #555;
          cursor: pointer;
          transition: all 0.3s ease;
          font-size: 0.95rem;
        }
        .ips-tab:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(0,0,0,0.1);
        }
        .ips-tab.active {
          background: linear-gradient(135deg, #ff6fa5, #a855f7);
          color: white;
          border-color: transparent;
          box-shadow: 0 8px 20px rgba(168,85,247,0.3);
        }
        .ips-palette {
          display: flex;
          gap: 18px;
          justify-content: center;
          flex-wrap: wrap;
          margin-bottom: 30px;
        }
        .ips-color {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          box-shadow: 0 6px 16px rgba(0,0,0,0.15);
          transform: scale(0);
          animation: ipsPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
          transition: transform 0.3s ease;
          cursor: pointer;
        }
        .ips-color:hover {
          transform: scale(1.15) !important;
        }
        @keyframes ipsPop {
          to { transform: scale(1); }
        }
        .ips-desc {
          font-size: 1.15rem;
          color: #444;
          font-style: italic;
          opacity: 0;
          animation: ipsFade 0.8s ease 0.4s forwards;
        }
        @keyframes ipsFade {
          to { opacity: 1; }
        }
        @media (max-width: 600px) {
          .ips-color { width: 54px; height: 54px; }
          .ips-title { font-size: 1.8rem; }
        }
        @media (max-width: 480px) {
          .ips-title { font-size: 1.5rem; }
          .ips-subtitle { font-size: 0.92rem; margin-bottom: 28px; }
          .ips-tabs { gap: 8px; margin-bottom: 28px; }
          .ips-tab { padding: 10px 18px; font-size: 0.85rem; }
          .ips-color { width: 44px; height: 44px; }
          .ips-palette { gap: 12px; }
          .ips-desc { font-size: 1rem; }
        }
        @media (max-width: 360px) {
          .ips-title { font-size: 1.3rem; }
          .ips-tab { padding: 8px 14px; font-size: 0.8rem; }
          .ips-color { width: 38px; height: 38px; }
          .ips-palette { gap: 10px; }
        }
      `;
      document.head.appendChild(style);
    }
  }, []);

  const current = seasons[season];

  const handleChange = (key) => {
    setSeason(key);
    setAnimKey(k => k + 1);
  };

  return (
    <section className="ips-section" style={{ backgroundColor: current.bg }}>
      <div className="ips-container">
        <h2 className="ips-title">Descubra sua Estação de Cor</h2>
        <p className="ips-subtitle">Explore as paletas que podem valorizar sua beleza natural</p>
        <div className="ips-tabs">
          {Object.keys(seasons).map(key => (
            <button
              key={key}
              className={'ips-tab' + (season === key ? ' active' : '')}
              onClick={() => handleChange(key)}
            >
              {seasons[key].nome}
            </button>
          ))}
        </div>
        <div className="ips-palette" key={animKey}>
          {current.cores.map((cor, i) => (
            <div
              key={cor + i}
              className="ips-color"
              style={{
                backgroundColor: cor,
                animationDelay: (i * 0.08) + 's'
              }}
            />
          ))}
        </div>
        <p className="ips-desc" key={'desc' + animKey}>{current.desc}</p>
      </div>
    </section>
  );
}

/* BLOCK: AnimatedCounters */
function AnimatedCounters() {
  const containerRef = React.useRef(null);
  const [started, setStarted] = React.useState(false);
  const [values, setValues] = React.useState([0, 0, 0]);

  const metrics = [
    { val: 127, suffix: '+', prefix: '', label: 'análises entregues no beta', format: 'number' },
    { val: 100, suffix: '%', prefix: '', label: 'satisfação garantida ou devolvemos', format: 'number' },
    { val: 24, suffix: 'h', prefix: '', label: 'tempo máximo de entrega', format: 'number' }
  ];

  React.useEffect(() => {
    const styleId = 'animated-counters-styles';
    if (!document.getElementById(styleId)) {
      const style = document.createElement('style');
      style.id = styleId;
      style.textContent = `
        .ac-section {
          padding: 70px 20px;
          background: linear-gradient(135deg, #fff 0%, #fff5fa 100%);
        }
        .ac-container {
          max-width: 1100px;
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          gap: 40px;
        }
        .ac-item {
          flex: 1;
          min-width: 220px;
          text-align: center;
        }
        .ac-number {
          font-size: 3rem;
          font-weight: 800;
          background: linear-gradient(135deg, #ff6fa5, #a855f7);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1;
          margin-bottom: 12px;
        }
        .ac-label {
          font-size: 0.95rem;
          color: #666;
          font-weight: 500;
        }
        @media (max-width: 600px) {
          .ac-number { font-size: 2.2rem; }
          .ac-item { min-width: 140px; }
          .ac-container { gap: 24px; }
        }
        @media (max-width: 480px) {
          .ac-section { padding: 48px 20px; }
          .ac-number { font-size: 2rem; }
          .ac-item { min-width: 120px; }
          .ac-label { font-size: 0.85rem; }
          .ac-container { gap: 20px; }
        }
      `;
      document.head.appendChild(style);
    }
  }, []);

  React.useEffect(() => {
    if (!containerRef.current) return;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !started) {
          setStarted(true);
        }
      });
    }, { threshold: 0.3 });
    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, [started]);

  React.useEffect(() => {
    if (!started) return;
    const duration = 2000;
    const startTime = performance.now();
    const easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);

    let raf;
    const tick = (now) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const eased = easeOutExpo(progress);
      setValues(metrics.map(m => Math.floor(m.val * eased)));
      if (progress < 1) {
        raf = requestAnimationFrame(tick);
      }
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [started]);

  const formatValue = (value, metric) => {
    if (metric.format === 'currency') {
      if (value >= 1000000) {
        return (value / 1000000).toFixed(1).replace('.', ',') + 'M';
      }
      if (value >= 1000) {
        return (value / 1000).toFixed(0) + 'K';
      }
      return value.toString();
    }
    return value.toLocaleString('pt-BR');
  };

  return (
    <section className="ac-section" ref={containerRef}>
      <div className="ac-container">
        {metrics.map((m, i) => (
          <div key={i} className="ac-item">
            <div className="ac-number">
              {m.prefix}{formatValue(values[i], m)}{m.suffix}
            </div>
            <div className="ac-label">{m.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* BLOCK: add3DHover */
function add3DHover(selector, maxDeg = 8) {
  document.querySelectorAll(selector).forEach(el => {
    if (el.dataset.hover3d) return;
    el.dataset.hover3d = 'true';
    el.style.transition = 'transform 0.15s ease';
    el.style.transformStyle = 'preserve-3d';
    el.parentElement && (el.parentElement.style.perspective = '1000px');
    el.addEventListener('mousemove', e => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      el.style.transform = `rotateY(${x * maxDeg * 2}deg) rotateX(${-y * maxDeg * 2}deg) scale(1.02)`;
    });
    el.addEventListener('mouseleave', () => { el.style.transform = ''; });
  });
}

function initImmersive() {
  add3DHover('.transform-card');
  add3DHover('.plan-card', 5);
  add3DHover('.test-card', 4);
}

function ImmersiveInit() {
  React.useEffect(() => {
    const t = setTimeout(() => initImmersive(), 300);
    return () => clearTimeout(t);
  }, []);
  return null;
}

Object.assign(window, {
  HeroSection, PriceStrip, PainSection, TransformSection, StepsSection,
  ReceivesSection, UploadSection, TestimonialsSection, PricingSection,
  GuaranteeSection, NewsletterSection, FAQSection, FinalCTASection,
  InteractivePaletteSection,
  AnimatedCounters,
  CustomCursor,
  add3DHover,
  initImmersive
});