// ============ ESCASSEZ + CTA ============
function Escassez() {
  const TOTAL = 120;
  const [sold, setSold] = useState(87);
  const restantes = TOTAL - sold;
  const pct = sold / TOTAL * 100;

  // Simulated live decrement
  useEffect(() => {
    const id = setInterval(() => {
      setSold((s) => s < TOTAL - 5 ? s + (Math.random() < 0.3 ? 1 : 0) : s);
    }, 8000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="comprar" style={{ padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
      {/* Big glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse 60% 50% at 50% 50%, oklch(0.92 0.1 85 / 0.5), transparent 60%)',
        pointerEvents: 'none'
      }} />
      <div className="wrap" style={{ position: 'relative' }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow">Edição Limitada</span>
          <h2 style={{ fontSize: 'clamp(48px, 6vw, 88px)', fontWeight: 300, marginTop: 24, letterSpacing: '-0.02em' }}>
            Apenas <em style={{ fontStyle: 'italic', color: 'var(--gold-deep)' }}>{restantes} unidades</em>
            <br />restantes.
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-soft)', maxWidth: 560, margin: '20px auto 0' }}>Tiragem fechada em 120 unidades. Quando esgotar, não tem segunda edição planejada.

          </p>
        </div>

        {/* Scarcity card */}
        <div className="reveal d2" style={{
          maxWidth: 720, margin: '0 auto',
          padding: 48,
          background: 'color-mix(in oklab, var(--bg) 92%, transparent)',
          border: '1px solid var(--line)',
          position: 'relative',
          boxShadow: '0 40px 80px -40px rgba(26,20,16,.3), 0 0 100px oklch(0.92 0.1 85 / 0.2)'
        }}>
          {/* Corner ornaments */}
          {[[0, 0], [1, 0], [0, 1], [1, 1]].map(([x, y], i) =>
          <svg key={i} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="1"
          style={{ position: 'absolute', top: y ? 'auto' : 12, bottom: y ? 12 : 'auto', left: x ? 'auto' : 12, right: x ? 12 : 'auto', opacity: 0.7 }}>
              <path d={`M ${x ? 24 : 0} ${y ? 0 : 24} L ${x ? 0 : 24} ${y ? 0 : 24} M ${x ? 24 : 0} ${y ? 24 : 0} L ${x ? 24 : 0} ${y ? 0 : 24}`} transform={`translate(${x ? 0 : 0},${y ? 0 : 0})`} />
              <circle cx="12" cy="12" r="2" fill="var(--gold-deep)" />
            </svg>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 8 }}>
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>ESTOQUE FECHADO</span>
            <span className="mono" style={{ color: 'var(--gold-deep)' }}>{sold} / {TOTAL}</span>
          </div>

          {/* Progress bar */}
          <div style={{ height: 6, background: 'var(--bg-3)', position: 'relative', overflow: 'hidden' }}>
            <div style={{
              height: '100%', width: `${pct}%`,
              background: 'linear-gradient(90deg, var(--gold-light), var(--gold-deep))',
              transition: 'width 1s ease',
              boxShadow: '0 0 20px oklch(0.8 0.1 85)'
            }} />
          </div>
          <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 12 }}>
            {Math.round(pct)}% já reservadas — estoque diminui em tempo real.
          </div>

          {/* Price */}
          <div style={{ marginTop: 40, textAlign: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 16 }}>
              <span style={{ fontSize: 20, color: 'var(--ink-soft)', textDecoration: 'line-through' }}>R$ 159,90</span>
              <span style={{
                fontFamily: 'var(--serif)', fontSize: 'clamp(64px, 8vw, 104px)',
                fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1
              }}>
                R$ <em style={{ fontStyle: 'italic' }}>119</em><span style={{ fontSize: '0.5em' }}>,90</span>
              </span>
            </div>
            <div style={{ marginTop: 12, fontSize: 14, color: 'var(--ink-2)' }}>
              ou <strong>3× de R$ 39,96</strong> sem juros no cartão · <span className="gold">Frete até R$ 15 incluso</span>
            </div>
          </div>

          <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a href="#comprar" data-open-checkout className="btn" style={{ justifyContent: 'center', padding: '22px 32px', fontSize: 14 }}>
              Quero o meu Selo <span className="arrow">→</span>
            </a>
            <div style={{ display: 'flex', gap: 20, justifyContent: 'center', marginTop: 8, flexWrap: 'wrap' }}>
              {['Pagamento Seguro', 'Envio em 24h', 'Embalagem Consagrada'].map((g, i) =>
              <span key={i} className="mono" style={{ color: 'var(--ink-soft)', display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ color: 'var(--gold-deep)' }}>✓</span> {g.toUpperCase()}
                </span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ FAQ ============
function FAQ() {
  const qs = [
  { q: 'O Selo precisa ser consagrado por alguém?', a: 'Não. Ele já é produzido com as gravações sagradas dos sete arcanjos. O ritual pessoal de consagração, uma intenção silenciosa ao recebê-lo, é opcional e pode ser feito por você mesmo.' },
  { q: 'Como devo carregar o Selo no dia a dia?', a: 'Na carteira, bolso, bolsa, sob o travesseiro ou próximo ao coração. Por ter o tamanho de um cartão, acompanha você onde quiser. Não precisa de cuidados especiais, o aço inox resiste ao uso diário.' },
  { q: 'Funciona mesmo? Quais resultados posso esperar?', a: 'Depende do que você entende por resultado. Quem carrega relata paz, foco, uma sensação de presença maior que o objeto em si. Não prometemos milagre, mas algo muda quando você decide levar isso com você.' },
  { q: 'Qual a diferença entre esse e outros selos?', a: 'A gravação segue as proporções das tradições herméticas, sem simplificação pra facilitar produção. O aço é premium, escovado. E a tiragem é fechada: 120 peças, sem reposição prevista.' },
  { q: 'Qual o prazo de entrega?', a: 'Enviamos em até 24h úteis após a confirmação do pagamento, via Correios ou transportadora conforme sua localidade. Frete de até R$ 15 incluso no valor.' },
  { q: 'Posso presentear?', a: 'Sim. O envelope especial faz o recebimento virar um momento, ninguém abre um envelope assim com indiferença.' }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" style={{ padding: '140px 0' }}>
      <div className="wrap" style={{ maxWidth: 860 }}>
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
          <span className="eyebrow">Dúvidas Frequentes</span>
          <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, marginTop: 24 }}>
            Antes de <em style={{ fontStyle: 'italic' }}>portar.</em>
          </h2>
        </div>

        <div style={{ borderTop: '1px solid var(--line)' }}>
          {qs.map((item, i) =>
          <div key={i} className={`reveal d${i % 4 + 1}`} style={{ borderBottom: '1px solid var(--line)' }}>
              <button
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: '28px 8px', background: 'transparent', border: 'none', cursor: 'pointer',
                color: 'var(--ink)', textAlign: 'left', gap: 20
              }}>
                <span className="serif" style={{ fontSize: 'clamp(20px, 2vw, 26px)', fontStyle: open === i ? 'italic' : 'normal', transition: 'font-style .3s' }}>
                  <span className="mono gold" style={{ marginRight: 16 }}>0{i + 1}</span>
                  {item.q}
                </span>
                <span style={{
                width: 32, height: 32, borderRadius: '50%', border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform .4s',
                flexShrink: 0
              }}>+</span>
              </button>
              <div style={{
              maxHeight: open === i ? 300 : 0,
              overflow: 'hidden',
              transition: 'max-height .5s ease'
            }}>
                <p style={{ padding: '0 8px 32px', fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.7, maxWidth: 640 }}>
                  {item.a}
                </p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ FOOTER ============
function Footer() {
  return (
    <footer style={{
      padding: '100px 0 40px',
      background: 'var(--ink)',
      color: 'var(--bg)',
      position: 'relative'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 60, marginBottom: 80 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <svg width="28" height="28" viewBox="0 0 22 22" fill="none">
                <circle cx="11" cy="11" r="10" stroke="currentColor" strokeWidth="1" />
                <path d="M11 2 L13 11 L11 20 L9 11 Z M2 11 L11 13 L20 11 L11 9 Z" fill="currentColor" opacity="0.7" />
              </svg>
              <span className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>Transmutando</span>
            </div>
            <p style={{ marginTop: 20, fontSize: 15, opacity: 0.7, maxWidth: 380, lineHeight: 1.6 }}>
              Criamos objetos sagrados em tiragem limitada — peças pra quem leva a espiritualidade pro cotidiano, não só pra momentos especiais.
            </p>
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.5, marginBottom: 20 }}>NAVEGUE</div>
            {['Arcanjos', 'Produto', 'Depoimentos', 'FAQ'].map((l) =>
            <a key={l} href={`#${l.toLowerCase()}`} style={{ display: 'block', marginBottom: 10, color: 'var(--bg)', textDecoration: 'none', fontSize: 15, opacity: 0.9 }}>{l}</a>
            )}
          </div>
          <div>
            <div className="mono" style={{ opacity: 0.5, marginBottom: 20 }}>SIGA</div>
            {[
            ['Instagram', 'https://www.instagram.com/transmutando_oficial/'],
            ['TikTok', 'https://www.tiktok.com/@transmutando.oficial'],
            ['YouTube', 'https://www.youtube.com/c/Transmutando_Oficial']].
            map(([l, u]) =>
            <a key={l} href={u} target="_blank" rel="noreferrer" style={{ display: 'block', marginBottom: 10, color: 'var(--bg)', textDecoration: 'none', fontSize: 15, opacity: 0.9 }}>
                {l} ↗
              </a>
            )}
          </div>
        </div>

        <div style={{ paddingTop: 32, borderTop: '1px solid rgba(240,232,215,.15)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span className="mono" style={{ opacity: 0.5 }}>© 2026 TRANSMUTANDO · TODOS OS DIREITOS RESERVADOS</span>
          <span className="mono" style={{ opacity: 0.5 }}>✦ FEITO COM INTENÇÃO ✦</span>
        </div>
      </div>
    </footer>);

}

// ============ APP ROOT ============
function App() {
  const [checkoutOpen, setCheckoutOpen] = useState(false);
  // Intercepta qualquer link com href="#comprar" para abrir o modal
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href="#comprar"], [data-open-checkout]');
      if (!a) return;
      e.preventDefault();
      setCheckoutOpen(true);
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Marquee />
        <Arcanjos />
        <Benefits />
        <ComoUsar />
        <Produto />
        <Depoimentos />
        <Escassez />
        <FAQ />
      </main>
      <Footer />
      <CheckoutModal open={checkoutOpen} onClose={() => setCheckoutOpen(false)} />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);