/* global React */
/* JXM Brand Standards — Foundations pages */
const { useState, useEffect } = React;

const COLORS = {
  abyss:     { hex: '#221F32', rgb: '34 / 31 / 50',  cmyk: '32 / 38 / 0 / 80', pantone: 'Pantone 5255 C', role: 'Primary dark · Structure', tone: 'dark' },
  cedar:     { hex: '#1C2D20', rgb: '28 / 45 / 32',  cmyk: '38 / 0 / 29 / 82', pantone: 'Pantone 5535 C', role: 'Secondary dark · Sections',  tone: 'dark' },
  soylent:   { hex: '#233935', rgb: '35 / 57 / 53',  cmyk: '39 / 0 / 7 / 78',  pantone: 'Pantone 5467 C', role: 'Tertiary dark · Tinted ground', tone: 'dark' },
  tusk:      { hex: '#F7F2EB', rgb: '247 / 242 / 235', cmyk: '0 / 2 / 5 / 3',  pantone: 'Pantone 7527 C', role: 'Reading ground · Canvas', tone: 'light' },
  kermit:    { hex: '#49E385', rgb: '73 / 227 / 133', cmyk: '68 / 0 / 41 / 11', pantone: 'Pantone 7479 C', role: 'Primary signal · CTAs, links', tone: 'mid' },
  gator:     { hex: '#2EB36A', rgb: '46 / 179 / 106', cmyk: '74 / 0 / 41 / 30', pantone: 'Pantone 354 C',  role: 'Hover state ONLY — Kermit/Compassed buttons', tone: 'mid', restricted: 'hover' },
  fly:       { hex: '#BDDEED', rgb: '189 / 222 / 237', cmyk: '20 / 6 / 0 / 7', pantone: 'Pantone 544 C',  role: 'Restricted — Matt approval required', tone: 'light', restricted: 'approval' },
  compassed: { hex: '#FF6464', rgb: '255 / 100 / 100', cmyk: '0 / 61 / 61 / 0', pantone: 'Pantone 178 C',  role: 'Alerts, destructive actions', tone: 'mid' },
  blurple:   { hex: '#5E4FF5', rgb: '94 / 79 / 245',   cmyk: '62 / 68 / 0 / 4', pantone: 'Pantone 2725 C', role: 'Restricted — Matt approval required', tone: 'mid', restricted: 'approval' },
};

/* =========================================================================
   OVERVIEW
   ========================================================================= */
function OverviewPage({ onNav }) {
  const Glyph = window.Glyph;
  const sections = [
    { id: 'logo',     n: '01', t: 'Logo & mark',    d: 'Wordmark, exclusion zone, misuse. Three permitted backgrounds.', meta: 'Updated 12 May · 7 entries' },
    { id: 'pattern',  n: '01.1', t: 'Pattern',       d: 'The full visual library — dodos, badges, monograms, technical marks.', meta: 'Updated 12 May · 1 master file' },
    { id: 'color',    n: '02', t: 'Color',          d: 'Eight values. A 50/28/14/8 ratio. AA-rated pairs. Restricted hues.', meta: 'Updated 08 May · 9 entries' },
    { id: 'type',     n: '03', t: 'Typography',     d: 'Inter, DM Sans, IBM Plex Mono, Libre Baskerville. One job each.', meta: 'Updated 03 May · 5 entries' },
    { id: 'spacing',  n: '04', t: 'Spacing & grid', d: '8-pt scale. 12-col fluid. Sectional rhythm.', meta: 'Updated 28 Apr · 6 entries', isNew: true },
    { id: 'motion',   n: '05', t: 'Motion',         d: 'Quiet, intentional. Easing & duration tokens.', meta: 'Updated 28 Apr · 4 entries', isNew: true },
    { id: 'photography', n: '06', t: 'Photography',  d: 'Editorial B&W documentary. Recipe, cropping, do/don\u2019t.', meta: 'Updated 12 May · 6 entries', isNew: true },
    { id: 'voice',    n: '07', t: 'Voice & copy',   d: 'Direct. Warm. Quiet. Drop-in snippets and boilerplate.', meta: 'Updated 21 Apr · 11 entries' },
    { id: 'buttons',  n: '08', t: 'Components',     d: 'Buttons, forms, cards, nav. Hover & focus states.', meta: 'Updated 18 Apr · 14 entries' },
    { id: 'ai',       n: '09', t: 'AI prompt library', d: 'Drop-in primers for Claude, ChatGPT, Midjourney.', meta: 'Updated 15 Apr · 9 entries', flagship: true },
    { id: 'press',    n: '10', t: 'Press kit',      d: 'Boilerplate, headshots, recent coverage.', meta: 'Updated 10 Apr · 6 entries' },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="JXM / Brand system / Overview"
        title={<>The standards<br/>behind the work.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'start', marginBottom: 72 }} className="ovr-grid">
        <div>
          <p className="prose" style={{ fontSize: 19, fontWeight: 300, color: 'var(--ink)', maxWidth: '56ch' }}>
            JXM is a founder-led agency growth partner for mission-driven brands. This is the system the brand is built on — <strong>colors, marks, language, components, and the prompts</strong> we hand to the tools that help us ship.
          </p>
          <p className="prose" style={{ marginTop: 18, fontFamily: "var(--ff-edit)", fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)' }}>
            Built for the people we trust with the brand.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap' }}>
            <button className="jbtn jbtn--dark" onClick={() => onNav('audiences')}>Start here <Glyph name="arr" size={12} stroke="currentColor" /></button>
            <button className="jbtn jbtn--ghost" onClick={() => onNav('ai')}>AI prompt primer</button>
            <button className="jbtn jbtn--ghost" onClick={() => onNav('downloads')}>Download assets</button>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 10 }}>Made for</div>
          {[
            ['Media partners', 'Press kit, boilerplate, logos.', 'press'],
            ['Freelancers', 'Components, downloads, do/don\u2019t.', 'downloads'],
            ['The JXM team', 'Voice, motion, deep system.', 'voice'],
            ['AI design tools', 'System prompts, structured tokens.', 'ai'],
          ].map(([a, b, target], i) => (
            <a key={i} href={'#' + target} onClick={(e) => { e.preventDefault(); onNav(target); }}
              style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', borderBottom: '1px solid var(--line)', padding: '12px 0', cursor: 'pointer', gap: 16 }}>
              <span>
                <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 15, color: 'var(--ink)' }}>{a}</div>
                <div style={{ fontFamily: 'var(--ff-body)', fontSize: 13, color: 'var(--ink-mute)' }}>{b}</div>
              </span>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Open →</span>
            </a>
          ))}
        </div>
      </div>

      <SectionHead label="The library" title="9 chapters" meta="updated weekly" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0 }} className="ovr-grid3">
        {sections.map((s, i) => (
          <a key={s.id} href={'#' + s.id} onClick={(e) => { e.preventDefault(); onNav(s.id); }}
            style={{
              padding: '20px 22px 20px 0',
              borderBottom: '1px solid var(--line)',
              borderRight: (i % 3 !== 2) ? '1px solid var(--line)' : 'none',
              paddingLeft: (i % 3 !== 0) ? 22 : 0,
              cursor: 'pointer',
              transition: 'background 160ms ease',
              display: 'block',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-elev-2)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
          >
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 8 }}>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--ink-faint)' }}>{s.n}</span>
              <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 16, letterSpacing: '-0.01em' }}>{s.t}</span>
              {s.isNew && <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', background: 'var(--accent)', color: 'var(--accent-ink)', padding: '1px 5px', borderRadius: 2 }}>New</span>}
              {s.flagship && <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', background: 'var(--ink)', color: 'var(--accent)', padding: '1px 5px', borderRadius: 2 }}>AI</span>}
            </div>
            <p style={{ fontFamily: 'var(--ff-body)', fontSize: 13.5, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 8, marginTop: 0 }}>{s.d}</p>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>{s.meta}  ·  Open →</div>
          </a>
        ))}
      </div>
    </div>
  );
}

/* =========================================================================
   AUDIENCES — quick-start per role
   ========================================================================= */
function AudiencesPage({ onNav }) {
  const Glyph = window.Glyph;
  const roles = [
    {
      tag: 'Media partners', icon: 'press',
      lede: 'You\u2019re writing about JXM or syndicating our work.',
      grab: [
        ['Boilerplate', 'snippets', '50/100/200 words'],
        ['Logo · light & dark', 'downloads', 'PNG · SVG'],
        ['Founder headshots', 'press', '3 images, RAW + JPG'],
        ['Press contact', 'press', 'press@getjxm.com'],
      ],
    },
    {
      tag: 'Freelancers', icon: 'cmp',
      lede: 'You\u2019re building something with us. Stay on-brand.',
      grab: [
        ['Color palette', 'color', '8 swatches, AA pairs'],
        ['Type families', 'type', 'Google Fonts links'],
        ['Components', 'buttons', 'Hover & focus states'],
        ['Do / Don\u2019t', 'voice', 'Voice & visual rules'],
      ],
    },
    {
      tag: 'JXM team', icon: 'voice',
      lede: 'You work here. Know the system cold.',
      grab: [
        ['Brand voice', 'voice', 'Direct, warm, quiet'],
        ['Motion principles', 'motion', 'Easing & duration'],
        ['Restricted hues', 'color', 'Fly/Blurple → Matt'],
        ['Asset request flow', 'request', 'For external partners'],
      ],
    },
    {
      tag: 'AI design tools', icon: 'ai',
      lede: 'You\u2019re an LLM or image model writing for / drawing JXM.',
      grab: [
        ['System primer', 'ai', 'Copy → paste'],
        ['Claude prompt', 'ai-claude', 'Voice + style'],
        ['ChatGPT prompt', 'ai-gpt', 'Voice + style'],
        ['Midjourney style', 'ai-mj', 'Image direction'],
      ],
    },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="00.1 · Start here"
        title="Pick your lane."
        lede="Each of these is a quick-start with the exact assets and rules that audience needs — nothing extra. If you have questions: hi@getjxm.com"
      />
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }} className="aud-grid">
        {roles.map((r, i) => (
          <div key={i} className="card" style={{ padding: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <span style={{ width: 30, height: 30, borderRadius: 4, background: 'var(--abyss)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--kermit)' }}>
                <Glyph name={r.icon} size={15} />
              </span>
              <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 18, letterSpacing: '-0.01em' }}>{r.tag}</div>
            </div>
            <p style={{ fontFamily: 'var(--ff-body)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-mute)', marginBottom: 18 }}>{r.lede}</p>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {r.grab.map(([t, target, hint], j) => (
                <a key={j} href={'#' + target} onClick={(e) => { e.preventDefault(); onNav(target); }}
                  style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'baseline', gap: 10, padding: '10px 0', borderTop: '1px solid var(--line)', cursor: 'pointer' }}>
                  <div>
                    <div style={{ fontFamily: 'var(--ff-body)', fontWeight: 500, fontSize: 13.5, color: 'var(--ink)' }}>{t}</div>
                    <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.06em' }}>{hint}</div>
                  </div>
                  <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.16em', textTransform: 'uppercase' }}>Open →</span>
                </a>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =========================================================================
   LOGO
   ========================================================================= */
function LogoMark({ color = 'currentColor', scale = 1, variant = 'mark' }) {
  const Comp = variant === 'lockup' ? window.JxmLogo : window.JxmMark;
  return <Comp color={color} height={variant === 'lockup' ? 70 * scale : 60 * scale} />;
}
function LogoPage() {
  const Glyph = window.Glyph;
  const dos = [
    { label: 'On Tusk',  bg: 'var(--tusk)',  fg: 'var(--abyss)', ok: true, note: 'Primary',   variant: 'lockup' },
    { label: 'On Abyss', bg: 'var(--abyss)', fg: 'var(--tusk)',  ok: true, note: 'Inverse',   variant: 'lockup' },
    { label: 'On Cedar', bg: 'var(--cedar)', fg: 'var(--tusk)',  ok: true, note: 'Editorial', variant: 'lockup' },
  ];
  const donts = [
    { label: 'Stretched',  ok: false, transform: 'scaleX(1.5)' },
    { label: 'Tinted off-palette', ok: false, fg: '#FF6464', bg: 'var(--tusk)' },
    { label: 'On low-contrast', ok: false, fg: 'rgba(34,31,50,0.35)', bg: 'var(--tusk)' },
    { label: 'Outlined',   ok: false, outline: true },
    { label: 'Drop shadow', ok: false, shadow: true },
    { label: 'On busy photo (mock)', ok: false, busy: true },
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="01 · Logo & mark"
        title="The Mark."
        lede="A single wordmark, two contexts. Confident, quiet, never gimmicky."
      />

      <div className="stack">
        <section>
          <SectionHead label="1.1" title="Lockup & mark" meta="Two forms" />
          <div className="grid-2" style={{ marginBottom: 20 }}>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--tusk)', display: 'grid', placeItems: 'center', position: 'relative', border: '1px solid var(--line)', borderRadius: 4 }}>
              <LogoMark color="var(--abyss)" variant="lockup" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--abyss)', opacity: 0.7 }}>Lockup · with frame</span>
            </div>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--tusk)', display: 'grid', placeItems: 'center', position: 'relative', border: '1px solid var(--line)', borderRadius: 4 }}>
              <LogoMark color="var(--abyss)" variant="mark" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--abyss)', opacity: 0.7 }}>Mark only · use as marker</span>
            </div>
          </div>
          <div className="callout">
            <div className="callout-eyebrow">When to use which</div>
            The <strong>lockup</strong> is the primary form — framed JXM. Use anywhere the brand needs to register as a logo. The <strong>mark</strong> is the unframed JXM letterforms — use as a marker, favicon, social avatar, app icon, or when the lockup is too tall.
          </div>
        </section>

        <section>
          <SectionHead label="1.2" title="Primary & inverse" meta="Lockup" />
          <div className="grid-2" style={{ marginBottom: 20 }}>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--tusk)', display: 'grid', placeItems: 'center', position: 'relative', border: '1px solid var(--line)', borderRadius: 4 }}>
              <LogoMark color="var(--abyss)" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--abyss)', opacity: 0.7 }}>Primary · Tusk ground</span>
            </div>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--abyss)', display: 'grid', placeItems: 'center', position: 'relative', borderRadius: 4 }}>
              <LogoMark color="var(--tusk)" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--tusk)', opacity: 0.7 }}>Inverse · Abyss ground</span>
            </div>
          </div>
          <p className="prose" style={{ fontSize: 14 }}>The mark renders as a static SVG/PNG. Vector master files live in <a href="#downloads" style={{ borderBottom: '1px solid var(--ink-faint)' }}>Downloads</a>. Don't recreate it from scratch.</p>
        </section>

        <section>
          <div className="grid-2" style={{ marginBottom: 20 }}>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--tusk)', display: 'grid', placeItems: 'center', position: 'relative', border: '1px solid var(--line)', borderRadius: 4 }}>
              <LogoMark color="var(--abyss)" variant="lockup" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--abyss)', opacity: 0.7 }}>Primary · Tusk ground</span>
            </div>
            <div style={{ aspectRatio: '4 / 3', background: 'var(--abyss)', display: 'grid', placeItems: 'center', position: 'relative', borderRadius: 4 }}>
              <LogoMark color="var(--tusk)" variant="lockup" scale={1.4} />
              <span style={{ position: 'absolute', bottom: 14, left: 18, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--tusk)', opacity: 0.7 }}>Inverse · Abyss ground</span>
            </div>
          </div>
          <p className="prose" style={{ fontSize: 14 }}>Vector master files live in <a href="#downloads" style={{ borderBottom: '1px solid var(--ink-faint)' }}>Downloads</a>. Don't recreate it from scratch.</p>
        </section>

        <section>
          <SectionHead label="1.3" title="Rules" />
          <div className="grid-3">
            {[
              { spec: 'Clear space', v: '1×', d: 'Minimum clear space equals the height of the "X" in JXM, on all sides.' },
              { spec: 'Minimum size', v: '24px', d: 'Digital: 24px wide. Print: 0.5 inches. Below that, drop to a mark-only form.' },
              { spec: 'Backgrounds', v: '3', d: 'Tusk, Abyss, or full-bleed brand imagery with sufficient contrast. Nothing else.' },
            ].map((r, i) => (
              <div key={i} className="card">
                <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 8 }}>{r.spec}</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 300, fontSize: 40, letterSpacing: '-0.02em', lineHeight: 1, color: 'var(--ink)' }}>{r.v}</div>
                <p style={{ fontFamily: 'var(--ff-body)', fontSize: 13, lineHeight: 1.55, color: 'var(--ink-mute)', marginTop: 10 }}>{r.d}</p>
              </div>
            ))}
          </div>
        </section>

        <section>
          <SectionHead label="1.4" title="Do" meta="3 permitted treatments" />
          <div className="grid-3">
            {dos.map((d, i) => (
              <div key={i} style={{ aspectRatio: '5 / 3', background: d.bg, display: 'grid', placeItems: 'center', position: 'relative', borderRadius: 4, border: d.bg === 'var(--tusk)' ? '1px solid var(--line)' : 'none' }}>
                <LogoMark color={d.fg} variant={d.variant || 'lockup'} scale={1.05} />
                <span style={{ position: 'absolute', top: 12, right: 14, fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--kermit)', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <Glyph name="check" size={11} stroke="var(--kermit)" /> {d.note}
                </span>
                <span style={{ position: 'absolute', bottom: 12, left: 16, fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: d.fg, opacity: 0.65 }}>{d.label}</span>
              </div>
            ))}
          </div>
        </section>

        <section>
          <SectionHead label="1.5" title="Don't" meta="If you see it, fix it" />
          <div className="grid-3">
            {donts.map((d, i) => (
              <div key={i} style={{
                aspectRatio: '5 / 3',
                background: d.busy ? 'linear-gradient(135deg, #233935 0%, #BDDEED 50%, #FF6464 100%)' : (d.bg || 'var(--tusk)'),
                display: 'grid', placeItems: 'center', position: 'relative', borderRadius: 4,
                border: !d.bg && !d.busy ? '1px solid var(--line)' : 'none',
                overflow: 'hidden'
              }}>
                <div style={{
                  transform: d.transform || 'none',
                  filter: d.shadow ? 'drop-shadow(0 6px 12px rgba(0,0,0,0.6))' : 'none',
                  opacity: d.outline ? 0.35 : 1,
                  border: d.outline ? '2px dashed var(--abyss)' : 'none',
                  padding: d.outline ? '10px 16px' : 0,
                }}>
                  <LogoMark color={d.fg || 'var(--abyss)'} variant="lockup" scale={1.05} />
                </div>
                <span style={{ position: 'absolute', top: 12, right: 14, fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--compassed)', display: 'flex', alignItems: 'center', gap: 4 }}>
                  <Glyph name="x" size={11} stroke="var(--compassed)" /> {d.label}
                </span>
              </div>
            ))}
          </div>
        </section>

        <section>
          <SectionHead label="1.6" title="At-size guide" meta="Don't drop below the floor" />
          <div className="card" style={{ background: 'var(--bg-elev-2)' }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 40, flexWrap: 'wrap' }}>
              {[16, 24, 40, 64, 96].map(sz => (
                <div key={sz} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
                  <window.JxmLogo color="var(--ink)" height={sz * 0.45} />
                  <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{sz}px {sz < 24 && <span style={{ color: 'var(--compassed)' }}>· too small</span>}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

/* =========================================================================
   COLOR
   ========================================================================= */
function Swatch({ name, c }) {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    if (navigator.clipboard) navigator.clipboard.writeText(c.hex).catch(() => {});
    setCopied(true); setTimeout(() => setCopied(false), 1100);
  };
  const onLight = c.tone === 'light';
  return (
    <div className="card" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer', position: 'relative' }} onClick={copy} role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === 'Enter') copy(); }}>
      <div style={{ height: 132, background: c.hex, position: 'relative', borderBottom: onLight ? '1px solid var(--line)' : 'none' }}>
        {c.restricted && (
          <span style={{
            position: 'absolute', top: 12, right: 12,
            fontFamily: 'var(--ff-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase',
            background: c.restricted === 'hover' ? 'rgba(0,0,0,0.7)' : 'rgba(255,100,100,0.92)',
            color: '#fff', padding: '3px 7px', borderRadius: 2,
          }}>{c.restricted === 'hover' ? 'Hover only' : 'Restricted'}</span>
        )}
        <span style={{
          position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
          fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: onLight ? 'var(--abyss)' : 'var(--tusk)',
          background: copied ? (onLight ? 'rgba(247,242,235,0.85)' : 'rgba(34,31,50,0.85)') : 'transparent',
          opacity: copied ? 1 : 0, transition: 'opacity 160ms ease',
        }}>Copied {c.hex}</span>
      </div>
      <div style={{ padding: '16px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 16, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{name}</div>
          <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--ink-mute)' }}>{c.hex}</div>
        </div>
        <div style={{ fontFamily: 'var(--ff-body)', fontSize: 12, color: 'var(--ink-mute)', marginBottom: 10 }}>{c.role}</div>
        <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, lineHeight: 1.6, color: 'var(--ink-mute)' }}>
          <div>RGB {c.rgb}</div>
          <div>CMYK {c.cmyk}</div>
          <div style={{ color: 'var(--ink)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>{c.pantone}</div>
        </div>
      </div>
    </div>
  );
}

function contrast(hex1, hex2) {
  const lum = (hex) => {
    const c = hex.replace('#', '');
    const r = parseInt(c.slice(0,2), 16) / 255;
    const g = parseInt(c.slice(2,4), 16) / 255;
    const b = parseInt(c.slice(4,6), 16) / 255;
    const [R, G, B] = [r, g, b].map(v => v <= 0.03928 ? v/12.92 : Math.pow((v+0.055)/1.055, 2.4));
    return 0.2126*R + 0.7152*G + 0.0722*B;
  };
  const l1 = lum(hex1), l2 = lum(hex2);
  return ((Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05)).toFixed(2);
}
function rate(ratio) {
  const r = parseFloat(ratio);
  if (r >= 7) return { tag: 'AAA', tone: 'pass' };
  if (r >= 4.5) return { tag: 'AA', tone: 'pass' };
  if (r >= 3) return { tag: 'AA Large', tone: 'warn' };
  return { tag: 'Fail', tone: 'fail' };
}

function ColorPage() {
  const Glyph = window.Glyph;
  const pairs = [
    ['Abyss', 'Tusk'], ['Cedar', 'Tusk'], ['Soylent', 'Tusk'], ['Abyss', 'Kermit'],
    ['Tusk', 'Abyss'], ['Kermit', 'Abyss'], ['Compassed', 'Tusk'], ['Compassed', 'Abyss'],
    ['Fly', 'Abyss'], ['Blurple', 'Tusk'], ['Tusk', 'Compassed'], ['Kermit', 'Tusk'],
  ];
  return (
    <div className="page">
      <PageHeader
        eyebrow="02 · Color"
        title="Deep roots, bright signals."
        lede="Dark naturals carry the weight. Three accents cut through. Tusk is the canvas. Click any swatch to copy the hex."
      />
      <div className="stack">

        <section>
          <SectionHead label="2.1" title="Grounds & signal" />
          <div className="grid-4">
            <Swatch name="Abyss" c={COLORS.abyss} />
            <Swatch name="Cedar" c={COLORS.cedar} />
            <Swatch name="Soylent" c={COLORS.soylent} />
            <Swatch name="Tusk" c={COLORS.tusk} />
          </div>
        </section>

        <section>
          <SectionHead label="2.2" title="Accents" meta="Each has a job" />
          <div className="grid-4">
            <Swatch name="Kermit" c={COLORS.kermit} />
            <Swatch name="Gator" c={COLORS.gator} />
            <Swatch name="Compassed" c={COLORS.compassed} />
            <Swatch name="Fly" c={COLORS.fly} />
          </div>
          <div className="grid-4" style={{ marginTop: 16 }}>
            <Swatch name="Blurple" c={COLORS.blurple} />
          </div>
          <div className="callout callout--warn" style={{ marginTop: 24 }}>
            <div className="callout-eyebrow">Restricted use</div>
            <strong>Gator</strong> is the hover state for <strong>Kermit</strong>- and <strong>Compassed</strong>-coloured buttons. Not a standalone fill. <br/>
            <strong>Fly</strong> and <strong>Blurple</strong> require Matt's approval before use. If you're not sure, default to Kermit.
          </div>
        </section>

        <section>
          <SectionHead label="2.3" title="Distribution" meta="The ratio of a well-made page" />
          <div style={{ display: 'flex', height: 100, borderRadius: 6, overflow: 'hidden', border: '1px solid var(--line)', marginBottom: 18 }}>
            <div style={{ flex: 50, background: 'var(--tusk)' }}></div>
            <div style={{ flex: 28, background: 'var(--abyss)' }}></div>
            <div style={{ flex: 14, background: 'var(--kermit)' }}></div>
            <div style={{ flex: 8, background: 'linear-gradient(90deg, var(--compassed) 0 50%, var(--fly) 50% 100%)' }}></div>
          </div>
          <div className="grid-4">
            {[
              ['Tusk · 50%', 'Reading ground'],
              ['Abyss · 28%', 'Structure & weight'],
              ['Kermit · 14%', 'Signal moments'],
              ['Accents · 8%', 'Specific contexts'],
            ].map(([a, b], i) => (
              <div key={i} style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                <div style={{ fontWeight: 500, color: 'var(--ink)', marginBottom: 4 }}>{a}</div>
                <div style={{ color: 'var(--ink-mute)' }}>{b}</div>
              </div>
            ))}
          </div>
        </section>

        <section>
          <SectionHead label="2.4" title="Accessibility — contrast pairs" meta="WCAG 2.2" />
          <div className="grid-3">
            {pairs.map(([fg, bg], i) => {
              const fgC = COLORS[fg.toLowerCase()]; const bgC = COLORS[bg.toLowerCase()];
              const r = contrast(fgC.hex, bgC.hex);
              const rt = rate(r);
              return (
                <div key={i} style={{ background: bgC.hex, borderRadius: 4, padding: '20px 18px 16px', position: 'relative', border: bgC.tone === 'light' ? '1px solid var(--line)' : 'none', minHeight: 140, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 500, fontSize: 22, color: fgC.hex, letterSpacing: '-0.01em' }}>Aa</div>
                  <div style={{ fontFamily: 'var(--ff-body)', fontSize: 13, color: fgC.hex, opacity: 0.9 }}>{fg} on {bg}</div>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, fontFamily: 'var(--ff-mono)', fontSize: 11 }}>
                    <span style={{ color: fgC.hex, opacity: 0.75 }}>{r} : 1</span>
                    <span style={{
                      padding: '2px 6px', borderRadius: 2,
                      background: rt.tone === 'pass' ? '#49E385' : rt.tone === 'warn' ? '#FFC857' : '#FF6464',
                      color: '#221F32', fontSize: 10, letterSpacing: '0.14em',
                    }}>{rt.tag}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="callout" style={{ marginTop: 24 }}>
            <div className="callout-eyebrow">Rule</div>
            All body copy must hit <strong>4.5:1</strong> minimum (AA). Display type at 24px+ bold or 32px+ regular can drop to <strong>3:1</strong> (AA Large). Never use Kermit on Tusk for text — it fails. Use Abyss instead, and reserve Kermit for fills, hover, or UI signal.
          </div>
        </section>

        <section>
          <SectionHead label="2.5" title="Tokens" meta="CSS · Tailwind · Figma" />
          <div className="grid-3">
            <div>
              <div className="code-head"><span>CSS variables</span><CopyButton text={`:root {\n  --abyss:#221F32;\n  --cedar:#1C2D20;\n  --soylent:#233935;\n  --tusk:#F7F2EB;\n  --kermit:#49E385;\n  --gator:#2EB36A;\n  --compassed:#FF6464;\n  --fly:#BDDEED;\n  --blurple:#5E4FF5;\n}`} /></div>
              <pre className="code">{`:root {
  --abyss:#221F32;
  --cedar:#1C2D20;
  --soylent:#233935;
  --tusk:#F7F2EB;
  --kermit:#49E385;
  --gator:#2EB36A;
  --compassed:#FF6464;
  --fly:#BDDEED;
  --blurple:#5E4FF5;
}`}</pre>
            </div>
            <div>
              <div className="code-head"><span>Tailwind config</span><CopyButton text={`colors: {\n  abyss: '#221F32',\n  cedar: '#1C2D20',\n  soylent: '#233935',\n  tusk: '#F7F2EB',\n  kermit: '#49E385',\n  gator: '#2EB36A',\n  compassed: '#FF6464',\n  fly: '#BDDEED',\n  blurple: '#5E4FF5',\n}`} /></div>
              <pre className="code">{`colors: {
  abyss: '#221F32',
  cedar: '#1C2D20',
  soylent: '#233935',
  tusk: '#F7F2EB',
  kermit: '#49E385',
  gator: '#2EB36A',
  compassed: '#FF6464',
  fly: '#BDDEED',
  blurple: '#5E4FF5',
}`}</pre>
            </div>
            <div>
              <div className="code-head"><span>Figma styles</span><span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10 }}>↗ open library</span></div>
              <pre className="code">{`Color/Abyss        #221F32
Color/Cedar        #1C2D20
Color/Soylent      #233935
Color/Tusk         #F7F2EB
Color/Kermit       #49E385
Color/Gator (hov)  #2EB36A
Color/Compassed    #FF6464
Color/Fly  (rsv)   #BDDEED
Color/Blurple(rsv) #5E4FF5`}</pre>
            </div>
          </div>
        </section>

      </div>
    </div>
  );
}

window.OverviewPage = OverviewPage;
window.AudiencesPage = AudiencesPage;
window.LogoPage = LogoPage;
window.ColorPage = ColorPage;
window.COLORS = COLORS;