// site-kit.jsx — shared design tokens + UI primitives for the landing & token pages
// Loaded alongside biome-creature.jsx and site-nav.jsx (NOT alongside bible-traits.jsx)

const T = {
  accent: '#836EF9', accentLight: '#B6A6FF', accentDeep: '#5B3FD6',
  bg: '#07040e', bg2: '#150C26',
  text: '#F3EEFF', muted: '#9C92BC', dim: '#6A6388',
  line: 'rgba(255,255,255,0.10)', glass: 'rgba(255,255,255,0.045)',
  font: '"Space Grotesk", system-ui, sans-serif', mono: '"Space Mono", ui-monospace, monospace',
  green: '#7EF0C0', gold: '#FFD27E', cyan: '#54C6EC',
};

// register the secret 6th species into the renderer (bred-only, never minted)
if (window.SPECIES && !SPECIES.void) {
  SPECIES.void = { name: 'Void', hue: 264, accent: 298, body: 'orb',
    blurb: 'The sixth. Never minted — surfaces only through breeding.' };
}

const WRAP = { maxWidth: 1120, margin: '0 auto', padding: '0 40px' };
const MONCADE_URL = 'https://www.gerrystephen.com/moncade';

function useViewport() {
  const [width, setWidth] = React.useState(() => window.innerWidth || 1024);
  React.useEffect(() => {
    const onResize = () => setWidth(window.innerWidth || 1024);
    window.addEventListener('resize', onResize, { passive: true });
    return () => window.removeEventListener('resize', onResize);
  }, []);
  return { width, isMobile: width < 720, isTablet: width < 940 };
}

function wrap(isMobile) {
  return { ...WRAP, padding: isMobile ? '0 18px' : WRAP.padding };
}

function Mono({ children, style }) { return <span style={{ fontFamily: T.mono, ...style }}>{children}</span>; }

function Glass({ children, style, pad = 22, radius = 20 }) {
  return <div style={{ background: T.glass, border: `1px solid ${T.line}`, borderRadius: radius, padding: pad, ...style }}>{children}</div>;
}

function Kicker({ children, color = T.accentLight }) {
  return <Mono style={{ fontSize: 12, fontWeight: 700, letterSpacing: 3, textTransform: 'uppercase', color }}>{children}</Mono>;
}

function SectionHead({ num, kicker, title, intro, center }) {
  const { isMobile } = useViewport();
  return (
    <div style={{ marginBottom: isMobile ? 28 : 40, textAlign: center ? 'center' : 'left' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14, justifyContent: center ? 'center' : 'flex-start' }}>
        {num && <Mono style={{ fontSize: 13, color: T.accent, fontWeight: 700 }}>{num}</Mono>}
        <Kicker>{kicker}</Kicker>
      </div>
      <h2 style={{ margin: 0, fontSize: isMobile ? 30 : 40, fontWeight: 700, letterSpacing: 0, lineHeight: 1.08,
        maxWidth: 740, marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{title}</h2>
      {intro && <p style={{ margin: '16px auto 0', fontSize: isMobile ? 15.5 : 17, lineHeight: 1.6, color: T.muted,
        maxWidth: 640, textWrap: 'pretty', marginLeft: center ? 'auto' : 0, marginRight: center ? 'auto' : 0 }}>{intro}</p>}
    </div>
  );
}

function Pill({ children, color = T.accentLight }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px', borderRadius: 99,
      border: `1px solid ${color}44`, background: `${color}14` }}>
      <span style={{ width: 6, height: 6, borderRadius: 99, background: color, boxShadow: `0 0 8px ${color}` }} />
      <Mono style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: 1, color }}>{children}</Mono>
    </span>
  );
}

function CTA({ children, href, kind = 'primary', style, target }) {
  const base = { textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 9,
    justifyContent: 'center', padding: '14px 26px', borderRadius: 12, fontFamily: T.font, fontSize: 15.5, fontWeight: 650, ...style };
  if (kind === 'primary') return <a href={href} style={{ ...base, color: '#0c0716',
    background: 'linear-gradient(180deg, #B6A6FF, #836EF9)', boxShadow: '0 8px 30px rgba(131,110,249,0.4)' }} target={target} rel={target ? 'noopener noreferrer' : undefined}>{children}</a>;
  return <a href={href} style={{ ...base, color: T.text, background: T.glass, border: `1px solid ${T.line}` }} target={target} rel={target ? 'noopener noreferrer' : undefined}>{children}</a>;
}

const SECTION = { padding: '82px 0', borderTop: `1px solid ${T.line}` };

Object.assign(window, { T, WRAP, SECTION, MONCADE_URL, useViewport, wrap, Mono, Glass, Kicker, SectionHead, Pill, CTA });