// ============ 7 ARCANJOS ============
const ARCANJOS = [
  { name: 'Miguel',   color: '#1e3a8a', virtude: 'Proteção & Corte de laços',    glyph: '⚔',  ray: 'Raio Azul' },
  { name: 'Uriel',    color: '#8b6914', virtude: 'Prosperidade & Sabedoria',    glyph: '☀',  ray: 'Raio Rubi-Ouro' },
  { name: 'Gabriel',  color: '#e7e7e7', virtude: 'Comunicação & Clareza',       glyph: '☽',  ray: 'Raio Branco' },
  { name: 'Rafael',   color: '#3a7d44', virtude: 'Cura física e espiritual',    glyph: '⚕',  ray: 'Raio Verde' },
  { name: 'Jofiel',   color: '#b89a3e', virtude: 'Iluminação & Pensamento',     glyph: '✦',  ray: 'Raio Dourado' },
  { name: 'Samuel',   color: '#a24c4c', virtude: 'Amor & Harmonia',             glyph: '♡',  ray: 'Raio Rosa' },
  { name: 'Zadkiel',  color: '#6b4488', virtude: 'Transmutação & Perdão',       glyph: '△',  ray: 'Raio Violeta' },
];

function Arcanjos() {
  const [active, setActive] = useState(0);
  const a = ARCANJOS[active];

  return (
    <section id="arcanjos" style={{ padding: '140px 0 120px', position: 'relative' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', marginBottom: 72 }} className="reveal">
          <span className="eyebrow">A Hierarquia da Luz</span>
          <h2 style={{
            fontSize: 'clamp(44px, 5.5vw, 84px)',
            marginTop: 24,
            fontWeight: 300,
            letterSpacing: '-0.02em',
          }}>
            Sete forças. <em style={{ fontStyle: 'italic' }}>Uma proteção completa.</em>
          </h2>
          <p style={{ marginTop: 24, fontSize: 17, color: 'var(--ink-soft)', maxWidth: 560, margin: '24px auto 0', fontWeight: 300, whiteSpace: 'pre-line' }}>
            Cada arcanjo rege uma virtude.
Juntos, compõem a geometria que o Selo guarda.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center' }} className="reveal d2">
          {/* Left: list */}
          <ol style={{ listStyle: 'none', borderTop: '1px solid var(--line)' }}>
            {ARCANJOS.map((arc, i) => (
              <li key={arc.name}
                onMouseEnter={() => setActive(i)}
                onClick={() => setActive(i)}
                style={{
                  padding: '22px 8px',
                  borderBottom: '1px solid var(--line)',
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr auto 40px',
                  alignItems: 'center',
                  gap: 20,
                  cursor: 'pointer',
                  position: 'relative',
                  transition: 'padding .3s, background .3s',
                  background: active === i ? 'color-mix(in oklab, var(--bg-2) 60%, transparent)' : 'transparent',
                  paddingLeft: active === i ? 28 : 8,
                }}>
                <span className="mono" style={{ color: 'var(--ink-soft)' }}>0{i + 1}</span>
                <div>
                  <div className="serif" style={{
                    fontSize: active === i ? 32 : 26,
                    letterSpacing: '0.03em',
                    fontStyle: 'italic',
                    transition: 'font-size .3s',
                  }}>{arc.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>{arc.virtude}</div>
                </div>
                <span style={{ fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--gold-deep)' }}>{arc.ray}</span>
                <span style={{
                  width: 32, height: 32,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18,
                  color: active === i ? 'var(--bg)' : 'var(--ink-soft)',
                  background: active === i ? 'var(--ink)' : 'transparent',
                  border: '1px solid var(--line)',
                  borderRadius: '50%',
                  transition: 'all .3s',
                }}>{arc.glyph}</span>
              </li>
            ))}
          </ol>

          {/* Right: featured detail */}
          <div style={{ position: 'sticky', top: 120 }}>
            <ArcanjoDetail arcanjo={a} idx={active} />
          </div>
        </div>
      </div>
    </section>
  );
}

function ArcanjoDetail({ arcanjo, idx }) {
  return (
    <div key={idx} style={{
      aspectRatio: '4/5',
      border: '1px solid var(--line)',
      padding: 40,
      background: 'color-mix(in oklab, var(--bg-2) 60%, transparent)',
      position: 'relative',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      overflow: 'hidden',
      animation: 'fadeSwap .6s ease',
    }}>
      {/* Background sigil */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--gold-deep)', opacity: 0.08,
        pointerEvents: 'none',
      }}>
        <svg width="85%" height="85%" viewBox="0 0 200 200" fill="none" stroke="currentColor" strokeWidth="0.5"
          style={{ animation: 'rotateSlow 80s linear infinite' }}>
          <circle cx="100" cy="100" r="98" />
          <circle cx="100" cy="100" r="80" />
          <circle cx="100" cy="100" r="60" />
          {Array.from({ length: 7 }).map((_, i) => {
            const a1 = (i / 7) * Math.PI * 2 - Math.PI / 2;
            const a2 = ((i + 3) / 7) * Math.PI * 2 - Math.PI / 2;
            return <line key={i}
              x1={100 + Math.cos(a1) * 98} y1={100 + Math.sin(a1) * 98}
              x2={100 + Math.cos(a2) * 98} y2={100 + Math.sin(a2) * 98} />;
          })}
        </svg>
      </div>

      <div style={{ position: 'relative' }}>
        <div className="mono" style={{ color: 'var(--ink-soft)' }}>ARCANJO 0{idx + 1} / 07</div>
        <div style={{
          fontSize: 120,
          color: 'var(--gold-deep)',
          opacity: 0.8,
          lineHeight: 1,
          marginTop: 20,
          fontFamily: 'var(--serif)',
        }}>{arcanjo.glyph}</div>
      </div>

      <div style={{ position: 'relative' }}>
        <h3 className="serif" style={{ fontSize: 56, fontStyle: 'italic', letterSpacing: '0.01em' }}>{arcanjo.name}</h3>
        <div style={{ marginTop: 16, fontSize: 14, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-deep)' }}>
          {arcanjo.ray}
        </div>
        <p style={{ marginTop: 16, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.6, maxWidth: 320 }}>
          Rege {arcanjo.virtude.toLowerCase()}. Invocar sua presença ao segurar o Selo é acessar essa frequência em seu dia.
        </p>
      </div>

      <style>{`
        @keyframes fadeSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes rotateSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

// ============ BENEFÍCIOS (Quote + grid) ============
function Benefits() {
  const items = [
    { t: 'Proteção Velada', d: 'Blindagem energética ao seu redor, laços densos cortados, interferências sem espaço pra entrar.', num: '01' },
    { t: 'Cura em Camadas', d: 'Atuação no físico, emocional e espiritual, harmonia como ponto de partida.', num: '02' },
    { t: 'Prosperidade Real', d: 'Abertura de caminhos, sabedoria nas decisões, abundância com propósito.', num: '03' },
    { t: 'Elevação Diária', d: 'Pensamentos mais altos, clareza do chamado, foco na sua verdade.', num: '04' },
  ];
  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 860, margin: '0 auto 80px', textAlign: 'center' }}>
          <Ornament />
          <blockquote className="serif" style={{
            fontSize: 'clamp(32px, 4vw, 56px)',
            fontStyle: 'italic',
            fontWeight: 300,
            lineHeight: 1.15,
            marginTop: 32,
            letterSpacing: '-0.01em',
          }}>
            "Sete forças. Uma proteção completa.
            <br /><span style={{ color: 'var(--gold-deep)' }}>Sempre com você.</span>"
          </blockquote>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid var(--line)',
          borderLeft: '1px solid var(--line)',
        }}>
          {items.map((it, i) => (
            <div key={i} className={`reveal d${i % 4 + 1}`} style={{
              padding: '40px 28px 44px',
              borderRight: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: 260,
              transition: 'background .4s',
              cursor: 'default',
            }}
            onMouseEnter={e => e.currentTarget.style.background = 'color-mix(in oklab, var(--bg-2) 50%, transparent)'}
            onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
            >
              <span className="mono" style={{ color: 'var(--gold-deep)' }}>{it.num}</span>
              <h3 className="serif" style={{ fontSize: 28, fontStyle: 'italic', letterSpacing: '0.01em', marginTop: 'auto' }}>{it.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Arcanjos, Benefits });