// page-template.jsx — Generic page shell
//
// Usage:
//   <PageShell active="Pricing" eyebrow="002" title="..." subtitle="...">
//     ...your sections...
//   </PageShell>
//
// Handles: theme application, top nav, footer, sub-page hero band, body bg.

function PageShell({ active, eyebrow, title, subtitle, children,
                    transparentNav = false, heroVariant = 'default' }) {
  const T = window.useTokens();

  // Apply body bg + color via effect so the chrome around the page also themes
  React.useEffect(() => {
    document.body.style.background = T.bg;
    document.body.style.color = T.text;
    document.body.style.fontFamily = T.sans;
  }, [T]);

  return (
    <div style={{
      minHeight: '100vh', background: T.bg, color: T.text,
      fontFamily: T.sans,
    }}>
      <window.SiteNav active={active} transparent={transparentNav}/>
      {title && (
        <PageHero eyebrow={eyebrow} title={title} subtitle={subtitle} variant={heroVariant}/>
      )}
      <main>{children}</main>
      <window.SiteFooter/>
    </div>
  );
}

function PageHero({ eyebrow, title, subtitle, variant }) {
  const T = window.useTokens();
  const ref = React.useRef(null);
  const [scroll, setScroll] = React.useState(0);

  React.useEffect(() => {
    let pending = false;
    const flush = () => { pending = false; setScroll(Math.min(1, window.scrollY / 400)); };
    const onScroll = () => { if (!pending) { pending = true; requestAnimationFrame(flush); } };
    flush();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section ref={ref} style={{
      position: 'relative', overflow: 'hidden',
      padding: '160px 40px 100px',
      borderBottom: `1px solid ${T.border}`,
      background: T.bg2,
    }}>
      {/* Subtle background grid */}
      <PageHeroBg variant={variant} T={T}/>

      <div style={{
        maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 2,
        transform: `translateY(${scroll * -20}px)`,
      }}>
        {eyebrow && (
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24,
            fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
            color: T.amber,
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: T.amber,
              boxShadow: `0 0 10px ${T.amber}`,
              animation: 'shell-led 1.6s ease-in-out infinite',
            }}/>
            <span>{eyebrow}</span>
            <span style={{ flex: 0, width: 80, height: 1, background: T.amber, opacity: 0.6 }}/>
          </div>
        )}
        <h1 style={{
          fontFamily: T.mono, fontSize: 'clamp(40px, 5.6vw, 76px)', fontWeight: 600,
          letterSpacing: '-0.02em', lineHeight: 1.02, margin: 0,
          textTransform: 'uppercase', maxWidth: 900,
          textWrap: 'balance',
        }}>
          {title}
        </h1>
        {subtitle && (
          <p style={{
            fontFamily: T.sans, fontSize: 18, color: T.textMute,
            marginTop: 24, maxWidth: 640, lineHeight: 1.5,
          }}>
            {subtitle}
          </p>
        )}
      </div>

      <style>{`
        @keyframes shell-led {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.4; }
        }
      `}</style>
    </section>
  );
}

function PageHeroBg({ variant, T }) {
  // Dotted grid w/ radial fade — neutral default, sub-pages will override
  return (
    <svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5 }}>
      <defs>
        <pattern id={`shell-grid-${variant}`} width="40" height="40" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.7" fill={T.text} opacity="0.18"/>
        </pattern>
        <radialGradient id={`shell-fade-${variant}`} cx="50%" cy="40%" r="60%">
          <stop offset="0%" stopColor="white" stopOpacity="1"/>
          <stop offset="100%" stopColor="white" stopOpacity="0"/>
        </radialGradient>
        <mask id={`shell-mask-${variant}`}>
          <rect width="100%" height="100%" fill={`url(#shell-fade-${variant})`}/>
        </mask>
      </defs>
      <rect width="100%" height="100%" fill={`url(#shell-grid-${variant})`}
        mask={`url(#shell-mask-${variant})`}/>
    </svg>
  );
}

// ── Standard content section wrapper ──────────────────────
function PageSection({ children, padded = true, narrow = false, dense = false }) {
  return (
    <section style={{
      padding: padded ? `${dense ? 60 : 100}px 40px` : 0,
      maxWidth: narrow ? 760 : 1200,
      margin: '0 auto',
    }}>
      {children}
    </section>
  );
}

window.PageShell = PageShell;
window.PageHero = PageHero;
window.PageSection = PageSection;