// shared.jsx — tokens, primitives, header & footer shared across pages.

// ── Tokens ──────────────────────────────────────────────────────────────────
const T = {
  deep: '#0A0A0A',
  surfaceDark: '#1A1A1A',
  surfaceDark2: '#141414',
  warm: '#F5F2EC',
  warm2: '#EBE7DC',
  ink: '#0F0F0F',
  signal: '#C75A3A',
  dim: 'rgba(245,242,236,0.55)',
  dimer: 'rgba(245,242,236,0.32)',
  hair: 'rgba(245,242,236,0.10)',
  warmDim: 'rgba(15,15,15,0.55)',
  warmDimer: 'rgba(15,15,15,0.32)',
  warmHair: 'rgba(15,15,15,0.10)',
};

const serif = 'Newsreader, "Source Serif 4", Georgia, serif';
const sans = 'Geist, ui-sans-serif, system-ui, sans-serif';
const mono = '"Geist Mono", ui-monospace, "SF Mono", Menlo, monospace';

// ── Small primitives ────────────────────────────────────────────────────────
const MonoLabel = ({ children, style, color }) => (
  <div style={{
    fontFamily: mono,
    fontSize: 11,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: color || T.dim,
    ...style,
  }}>{children}</div>
);

const Dot = ({ color = '#F5A623', size = 7, style }) => (
  <span style={{
    display: 'inline-block',
    width: size, height: size,
    borderRadius: '50%',
    background: color,
    ...style,
  }} />
);

const Rule = ({ color = T.hair, style }) => (
  <div style={{ height: 1, background: color, width: '100%', ...style }} />
);

const TopStrap = ({ accent = '#F5A623' }) =>
  <div style={{ height: 3, background: accent, width: '100%' }} />;

// ── Shared site header — links back to index ────────────────────────────────
// `theme`: 'dark' | 'warm' — controls colors only; the strap is constant.
function SiteHeader({ accent = '#F5A623', theme = 'dark', current }) {
  const isDark = theme !== 'warm';
  const fg = isDark ? T.warm : T.ink;
  const dim = isDark ? T.dim : T.warmDim;
  const dimer = isDark ? T.dimer : T.warmDimer;
  const hair = isDark ? T.hair : T.warmHair;

  const links = [
    { label: 'EA', href: 'ea.html', id: 'ea' },
    { label: 'Process Flow', href: 'index.html#suite', id: 'flow' },
    { label: 'Knowledge Base', href: 'index.html#suite', id: 'kb' },
    { label: 'Performance', href: 'index.html#suite', id: 'perf' },
  ];

  return (
    <header style={{
      display: 'grid',
      gridTemplateColumns: '1fr auto 1fr',
      alignItems: 'center',
      padding: '22px 56px',
      borderBottom: `1px solid ${hair}`,
      background: isDark ? T.deep : T.warm,
      color: fg,
    }}>
      <a href="index.html" style={{
        textDecoration: 'none', color: 'inherit',
        display: 'inline-flex', alignItems: 'center', gap: 14,
        width: 'fit-content',
      }}>
        <KevlexOSWordmark size={22} color={fg} />
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
        {links.map((l) => (
          <a key={l.id} href={l.href} style={{
            fontFamily: mono, fontSize: 11, letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: current === l.id ? accent : dim,
            textDecoration: 'none',
            paddingBottom: 2,
            borderBottom: current === l.id ? `1px solid ${accent}` : '1px solid transparent',
          }}>{l.label}</a>
        ))}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'flex-end' }}>
        <Dot color={accent} size={6} />
        <MonoLabel style={{ color: dim }}>Index&nbsp;·&nbsp;v2026.05</MonoLabel>
      </div>
    </header>
  );
}

// ── Shared footer ──────────────────────────────────────────────────────────
function SiteFooter({ accent = '#F5A623' }) {
  return (
    <footer style={{
      background: T.deep, color: T.warm,
      padding: '60px 56px 40px',
      borderTop: `1px solid ${T.hair}`,
      fontFamily: sans,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        alignItems: 'start',
        gap: 32,
      }}>
        <div>
          <a href="index.html" style={{ textDecoration: 'none', color: 'inherit' }}>
            <KevlexOSWordmark size={28} color={T.warm} />
          </a>
          <p style={{
            fontFamily: serif, fontSize: 15, lineHeight: 1.5,
            color: T.dim, marginTop: 16, maxWidth: 320,
          }}>
            <em style={{ fontStyle: 'italic' }}>
              The operating system for Kevlex Digital.
            </em>
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <MonoLabel style={{ color: T.dimer }}>The Suite</MonoLabel>
          <FooterLink href="ea.html" label="Kevlex EA" />
          <FooterLink href="index.html#suite" label="Process Flow" muted />
          <FooterLink href="index.html#suite" label="AI Knowledge Base" muted />
          <FooterLink href="index.html#suite" label="Performance Manager" muted />
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-end' }}>
          <MonoLabel style={{ color: T.dimer }}>Legal</MonoLabel>
          <FooterLink href="terms.html" label="Terms" />
          <FooterLink href="privacy.html" label="Privacy" />
          <FooterLink href="mailto:hello@kevlex.digital" label="Contact" />
        </div>
      </div>

      <Rule color={T.hair} style={{ margin: '40px 0 18px' }} />

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 24, flexWrap: 'wrap',
      }}>
        <MonoLabel style={{ color: T.dimer }}>
          Kevlex Digital · 2026 · Built sharp, in-house
        </MonoLabel>
        <MonoLabel style={{ color: T.dimer }}>
          Colophon · Newsreader / Geist / Geist Mono
        </MonoLabel>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Dot color={accent} size={5} />
          <MonoLabel style={{ color: T.dimer }}>All systems nominal</MonoLabel>
        </div>
      </div>
    </footer>
  );
}

function FooterLink({ href, label, muted }) {
  return (
    <a href={href} style={{
      fontFamily: mono, fontSize: 11, letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: muted ? T.dimer : T.warm,
      textDecoration: 'none',
    }}>{label}</a>
  );
}

Object.assign(window, {
  T, serif, sans, mono,
  MonoLabel, Dot, Rule, TopStrap,
  SiteHeader, SiteFooter, FooterLink,
});