// ============ COMO USAR ============
function ComoUsar() {
  const steps = [
    { n: '01', t: 'Receba com Intenção', d: 'Ao abrir o envelope, silencie por um instante. Sinta o peso do aço, é a ponte entre o material e o sagrado.' },
    { n: '02', t: 'Consagre seu Selo', d: 'Segure-o com as duas mãos. Recite em silêncio os sete nomes. Peça que as virtudes se revelem em você.' },
    { n: '03', t: 'Leve no Seu Dia', d: 'Na carteira, bolso, sob o travesseiro, ou próximo ao coração. O Selo age onde você está.' },
    { n: '04', t: 'Renove a Conexão', d: 'Semanalmente, pause. Olhe para ele. Agradeça.\nEssa é a disciplina silenciosa da luz.' },
  ];
  return (
    <section style={{ padding: '140px 0', background: 'color-mix(in oklab, var(--bg-2) 70%, transparent)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start' }}>
          <div className="reveal" style={{ position: 'sticky', top: 120 }}>
            <span className="eyebrow left">O Ritual</span>
            <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, marginTop: 24, lineHeight: 1 }}>
              Como <em style={{ fontStyle: 'italic' }}>portar</em><br/>o seu Selo
            </h2>
            <p style={{ marginTop: 24, fontSize: 16, color: 'var(--ink-soft)', maxWidth: 400 }}>
              Quatro gestos pra fazer do Selo parte do dia. Sem ritual complicado, sem fé obrigatória.
            </p>
          </div>

          <ol style={{ listStyle: 'none' }}>
            {steps.map((s, i) => (
              <li key={s.n} className={`reveal d${i + 1}`} style={{
                display: 'grid',
                gridTemplateColumns: '120px 1fr',
                gap: 32,
                padding: '40px 0',
                borderTop: i === 0 ? '1px solid var(--line)' : 'none',
                borderBottom: '1px solid var(--line)',
                alignItems: 'start',
              }}>
                <div>
                  <div className="serif" style={{ fontSize: 64, color: 'var(--gold-deep)', lineHeight: 1, fontStyle: 'italic' }}>{s.n}</div>
                </div>
                <div>
                  <h3 className="serif" style={{ fontSize: 34, fontStyle: 'italic', letterSpacing: '0.01em' }}>{s.t}</h3>
                  <p style={{ marginTop: 12, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.65, maxWidth: 460, whiteSpace: 'pre-line' }}>{s.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// ============ PRODUTO DETALHES ============
function Produto() {
  return (
    <section id="produto" style={{ padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
          <span className="eyebrow">Anatomia do Selo</span>
          <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, marginTop: 20, letterSpacing: '-0.02em' }}>
            Aço inox, gravação laser. <em style={{ fontStyle: 'italic' }}>Não estraga, não mancha, não desbota.</em>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          {/* Image with callouts */}
          <div className="reveal" style={{ position: 'relative', padding: 40 }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'radial-gradient(circle, oklch(0.92 0.08 85 / 0.4), transparent 60%)',
            }} />
            <img src="assets/selo-7-arcanjos.png" alt="Detalhe do Selo"
              style={{
                width: '100%', height: 'auto',
                filter: 'drop-shadow(0 30px 50px rgba(26,20,16,.2))',
                position: 'relative', zIndex: 1,
                transform: 'rotate(2deg)',
              }} />
            {/* Callout lines */}
            <Callout top="12%" left="-4%" label="GRAVAÇÃO EM ALTO-RELEVO" side="left" />
            <Callout top="46%" left="92%" label="GEOMETRIA SAGRADA" side="right" />
            <Callout top="82%" left="12%" label="AÇO INOX ESCOVADO" side="left" />
          </div>

          {/* Specs */}
          <div className="reveal d2">
            <dl style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: '1px solid var(--line)' }}>
              {[
                ['Material', 'Aço Inoxidável'],
                ['Acabamento', 'Escovado'],
                ['Dimensões', '85 × 54 mm'],
                ['Espessura', '0,3 mm'],
                ['Peso', '~20g'],
                ['Gravação', 'Laser de precisão'],
                ['Embalagem', 'Envelope especial'],
                ['Origem', 'Nacional'],
              ].map(([k, v], i) => (
                <div key={k} style={{
                  padding: '20px 8px',
                  borderBottom: '1px solid var(--line)',
                  borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
                }}>
                  <dt className="mono" style={{ color: 'var(--ink-soft)' }}>{k.toUpperCase()}</dt>
                  <dd className="serif" style={{ fontSize: 22, marginTop: 6, fontStyle: 'italic' }}>{v}</dd>
                </div>
              ))}
            </dl>
            <div style={{ marginTop: 32, padding: 24, background: 'color-mix(in oklab, var(--bg-2) 60%, transparent)', border: '1px solid var(--line)' }}>
              <div className="mono" style={{ color: 'var(--gold-deep)' }}>✦ DIMENSÃO CARTÃO DE CRÉDITO</div>
              <p style={{ marginTop: 10, fontSize: 15, color: 'var(--ink-2)' }}>
                Cabe perfeitamente em qualquer carteira, bolso ou suporte de celular. Discreto, presente.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Callout({ top, left, label, side }) {
  return (
    <div style={{
      position: 'absolute', top, left,
      display: 'flex', alignItems: 'center', gap: 10,
      fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
      color: 'var(--ink-soft)', fontFamily: 'var(--mono)',
      flexDirection: side === 'left' ? 'row' : 'row-reverse',
      zIndex: 2,
    }}>
      <svg width="6" height="6" viewBox="0 0 6 6"><circle cx="3" cy="3" r="2.5" fill="var(--gold-deep)" /></svg>
      <span style={{ width: 30, height: 1, background: 'var(--gold-deep)' }} />
      <span>{label}</span>
    </div>
  );
}

// ============ DEPOIMENTOS ============
function Depoimentos() {
  const deps = [
    { n: 'Luciana M.', l: 'São Paulo, SP', s: 5, t: 'Senti uma paz diferente desde que comecei a carregar o Selo. Não é sugestão, é presença. Virou parte do meu ritual da manhã.' },
    { n: 'Rodrigo C.', l: 'Curitiba, PR', s: 5, t: 'Comprei para minha mãe, acabei pedindo outro para mim. O envelope, a peça, o peso, tudo transmite cuidado. Recomendei para toda família.' },
    { n: 'Amanda S.', l: 'Salvador, BA', s: 5, t: 'Sou estudante de alta magia e fiquei impressionada com a precisão dos sigilos. Gravação limpa, geometria fiel. Investimento que valeu cada real.' },
    { n: 'Pastor Daniel', l: 'Belo Horizonte, MG', s: 5, t: 'Uso como ponto de oração diária. Os sete nomes estão todos presentes, e isso me conecta com a tradição. Peça linda e significativa.' },
  ];
  return (
    <section id="depoimentos" style={{ padding: '140px 0', background: 'color-mix(in oklab, var(--bg-3) 50%, transparent)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div className="reveal" style={{ textAlign: 'center', marginBottom: 72 }}>
          <span className="eyebrow">Testemunhos Reais</span>
          <h2 style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 300, marginTop: 20 }}>
            Quem já <em style={{ fontStyle: 'italic' }}>porta</em> conta.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {deps.map((d, i) => (
            <figure key={i} className={`reveal d${i % 4 + 1}`} style={{
              padding: '36px 32px',
              background: 'color-mix(in oklab, var(--bg) 80%, transparent)',
              border: '1px solid var(--line)',
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ display: 'flex', gap: 4, color: 'var(--gold-deep)' }}>
                {Array.from({ length: d.s }).map((_, k) => <span key={k}>✦</span>)}
              </div>
              <blockquote className="serif" style={{ fontSize: 22, fontStyle: 'italic', lineHeight: 1.4, color: 'var(--ink-2)' }}>
                "{d.t}"
              </blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: '1px solid var(--line)', marginTop: 'auto' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: '50%',
                  background: 'linear-gradient(135deg, var(--gold-light), var(--gold-deep))',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--bg)', fontFamily: 'var(--serif)', fontSize: 16, fontStyle: 'italic',
                }}>{d.n[0]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{d.n}</div>
                  <div className="mono" style={{ color: 'var(--ink-soft)' }}>{d.l.toUpperCase()}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ComoUsar, Produto, Depoimentos });