// ============ NAV ============
function Nav() {
  const y = useScrollY();
  const scrolled = y > 40;
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? 'color-mix(in oklab, var(--bg) 85%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
      transition: 'all .4s ease',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ textDecoration: 'none', color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
            <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 style={{ fontFamily: 'var(--serif)', fontSize: 20, letterSpacing: '0.02em' }}>Transmutando</span>
        </a>
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {['Arcanjos', 'Produto', 'Depoimentos', 'FAQ'].map(l => (
            <a key={l} href={`#${l.toLowerCase()}`} style={{
              fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--ink-soft)', textDecoration: 'none', fontWeight: 500,
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-soft)'}
            className="nav-link">{l}</a>
          ))}
          <a href="#comprar" className="btn" style={{ padding: '12px 20px', fontSize: 11 }}>
            Adquirir <span className="arrow">→</span>
          </a>
        </nav>
      </div>
    </header>
  );
}

// ============ HERO ============
function Hero() {
  const y = useScrollY();
  const mouse = useMouse();
  const parX = (mouse.x - 0.5) * 20;
  const parY = (mouse.y - 0.5) * 20;

  return (
    <section id="top" style={{
      minHeight: '100vh',
      paddingTop: 140,
      paddingBottom: 80,
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      overflow: 'hidden',
    }}>
      {/* Halo behind seal */}
      <div style={{
        position: 'absolute',
        top: '50%', right: '-5%',
        transform: `translate(0, -50%) translate(${parX}px, ${parY}px)`,
        width: 900, height: 900,
        background: 'radial-gradient(circle, oklch(0.92 0.09 85 / 0.55) 0%, oklch(0.88 0.06 80 / 0.25) 35%, transparent 65%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
        transition: 'transform .3s ease-out',
      }} />

      {/* Rotating outer ring ornament */}
      <svg aria-hidden="true" style={{
        position: 'absolute', top: '50%', right: '8%',
        transform: `translate(0, -50%) translate(${parX * 0.3}px, ${parY * 0.3}px)`,
        width: 740, height: 740, pointerEvents: 'none', opacity: 0.3,
        animation: 'rotR var(--rot-speed, 60s) linear infinite',
      }} viewBox="0 0 740 740">
        <defs>
          <path id="ringPath" d="M 370,370 m -330,0 a 330,330 0 1,1 660,0 a 330,330 0 1,1 -660,0" />
        </defs>
        <circle cx="370" cy="370" r="360" fill="none" stroke="var(--gold-deep)" strokeWidth="0.5" opacity="0.6" />
        <circle cx="370" cy="370" r="330" fill="none" stroke="var(--gold-deep)" strokeWidth="0.5" strokeDasharray="2 6" />
        <text fill="var(--gold-deep)" fontFamily="Cormorant Garamond" fontSize="18" letterSpacing="8" opacity="0.85">
          <textPath href="#ringPath">MICHAEL ✦ URIEL ✦ GABRIEL ✦ RAPHAEL ✦ JOFIEL ✦ SAMUEL ✦ ZADKIEL ✦ </textPath>
        </text>
      </svg>

      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center', width: '100%', position: 'relative' }}>
        {/* Left: copy */}
        <div>
          <div className="reveal">
            <span className="eyebrow left">Transmutando · Peça Limitada</span>
          </div>
          <h1 className="reveal d1" style={{
            fontSize: 'clamp(48px, 7vw, 104px)',
            fontWeight: 300,
            lineHeight: 0.95,
            marginTop: 28,
            letterSpacing: '-0.02em',
          }}>
            Selo dos<br/>
            <em style={{ fontStyle: 'italic', fontWeight: 400 }}>7 Arcanjos</em>
          </h1>
          <div className="reveal d2" style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 24 }}>
            <span style={{ width: 32, height: 1, background: 'var(--gold-deep)' }} />
            <span className="mono" style={{ color: 'var(--ink-soft)' }}>PROTEÇÃO · CURA · ELEVAÇÃO</span>
          </div>

          <p className="reveal d3" style={{
            marginTop: 36,
            fontSize: 'clamp(16px, 1.4vw, 19px)',
            lineHeight: 1.6,
            color: 'var(--ink-2)',
            maxWidth: 480,
            fontWeight: 300,
          }}>
            Sete sigilos sagrados em aço inox, tamanho cartão. Na carteira, no bolso, onde você estiver.
            <span className="serif" style={{ fontStyle: 'italic' }}> Pra quem quer a espiritualidade no dia a dia, não só nos momentos de crise.</span>
          </p>

          <div className="reveal d4" style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 44, flexWrap: 'wrap' }}>
            <a href="#comprar" className="btn">
              Adquirir o Selo <span className="arrow">→</span>
            </a>
            <a href="#arcanjos" className="btn ghost">Conheça os 7</a>
          </div>

          <div className="reveal d4" style={{ display: 'flex', gap: 40, marginTop: 56, alignItems: 'flex-start' }}>
            <MiniStat label="Aço inox" value="Premium" />
            <span style={{ width: 1, height: 36, background: 'var(--line)' }} />
            <MiniStat label="Edição" value="120 un." />
            <span style={{ width: 1, height: 36, background: 'var(--line)' }} />
            <MiniStat label="Frete incluso" value="até R$15" />
          </div>
        </div>

        {/* Right: the seal */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 620 }}>
          <SealImage parX={parX} parY={parY} scrollY={y} />
        </div>
      </div>

      {/* Scroll cue */}
      <div style={{
        position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
        color: 'var(--ink-soft)',
        animation: 'bob 2.5s ease-in-out infinite',
      }}>
        <span className="mono">DESÇA PARA REVELAR</span>
        <svg width="12" height="20" viewBox="0 0 12 20" fill="none">
          <path d="M6 0V18 M1 13L6 19L11 13" stroke="currentColor" strokeWidth="1" />
        </svg>
      </div>

      <style>{`
        @keyframes rotR { from { transform: translate(0,-50%) rotate(0deg); } to { transform: translate(0,-50%) rotate(360deg); } }
        @keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
      `}</style>
    </section>
  );
}

function MiniStat({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ color: 'var(--ink-soft)' }}>{label.toUpperCase()}</div>
      <div className="serif" style={{ fontSize: 22, marginTop: 4, fontStyle: 'italic' }}>{value}</div>
    </div>
  );
}

function SealImage({ parX, parY, scrollY }) {
  const rotation = scrollY * 0.04;
  return (
    <div style={{ position: 'relative', transform: `translate(${parX * 0.4}px, ${parY * 0.4}px)`, transition: 'transform .3s ease-out' }}>
      {/* Rotating halo ring */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        width: 560, height: 560,
        transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
        pointerEvents: 'none',
      }}>
        <svg width="560" height="560" viewBox="0 0 560 560" style={{ animation: 'rotInner var(--rot-speed, 60s) linear infinite reverse' }}>
          <circle cx="280" cy="280" r="260" fill="none" stroke="var(--gold-deep)" strokeWidth="1" opacity="0.4" strokeDasharray="1 8" />
          <circle cx="280" cy="280" r="230" fill="none" stroke="var(--gold-deep)" strokeWidth="0.5" opacity="0.5" />
          {Array.from({ length: 12 }).map((_, i) => {
            const a = (i / 12) * Math.PI * 2;
            const x1 = 280 + Math.cos(a) * 240;
            const y1 = 280 + Math.sin(a) * 240;
            const x2 = 280 + Math.cos(a) * 258;
            const y2 = 280 + Math.sin(a) * 258;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--gold-deep)" strokeWidth="1" opacity="0.6" />;
          })}
        </svg>
      </div>

      {/* Seal image with float */}
      <img
        src="assets/selo-7-arcanjos.png"
        alt="Selo dos 7 Arcanjos em aço inox"
        style={{
          width: 'min(560px, 90%)',
          maxWidth: 560,
          height: 'auto',
          position: 'relative',
          zIndex: 2,
          filter: 'drop-shadow(0 40px 60px rgba(26,20,16,.25)) drop-shadow(0 0 80px oklch(0.9 0.1 85 / 0.4))',
          animation: 'sealFloat 6s ease-in-out infinite',
        }}
      />

      <style>{`
        @keyframes sealFloat {
          0%, 100% { transform: translateY(0) rotate(-6deg); }
          50% { transform: translateY(-14px) rotate(-5deg); }
        }
        @keyframes rotInner { from { transform: rotate(0); } to { transform: rotate(360deg); } }
      `}</style>
    </div>
  );
}

// ============ MARQUEE ============
function Marquee() {
  const items = ['Proteção', 'Cura', 'Prosperidade', 'Clareza', 'Iluminação', 'Harmonia', 'Transmutação'];
  return (
    <section style={{
      padding: '24px 0',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      overflow: 'hidden',
      background: 'color-mix(in oklab, var(--bg-2) 50%, transparent)',
    }}>
      <div style={{ display: 'flex', gap: 48, animation: 'marq 40s linear infinite', whiteSpace: 'nowrap' }}>
        {Array.from({ length: 6 }).flatMap((_, k) => items.map((it, i) => (
          <div key={`${k}-${i}`} style={{ display: 'flex', alignItems: 'center', gap: 48 }}>
            <span className="serif" style={{ fontSize: 28, fontStyle: 'italic', color: 'var(--ink-2)' }}>{it}</span>
            <span style={{ color: 'var(--gold-deep)', opacity: 0.6 }}>✦</span>
          </div>
        )))}
      </div>
      <style>{`
        @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee });
