/* ds-page.jsx — top-level shell */

const Cover = () => (
  <header style={{
    background: T.ink, color: T.bone,
    padding: `${S[9]}px ${S[7]}px ${S[8]}px`,
    borderBottom: `1px solid ${T.ink}`,
    display:'grid', gridTemplateColumns:'1fr auto', alignItems:'flex-end', gap: S[7],
  }}>
    <div>
      <div className="mono" style={{ fontSize:11, letterSpacing:'.2em', color: T.neon, marginBottom: S[5] }}>
        F1B · DESIGN SYSTEM · v0.1
      </div>
      <h1 style={{
        fontWeight:900, fontSize:120, letterSpacing:'-0.045em', lineHeight:.92, margin:0,
      }}>
        Glosé<br/>Design System.
      </h1>
      <p style={{
        marginTop: S[6], fontSize:18, lineHeight:1.55, maxWidth:560, color: T.n300,
      }}>
        Single source of truth for every screen, email, and surface.
        Built on F1A brand identity. Locked tokens · interactive components · production-ready patterns.
      </p>
    </div>
    <Wordmark size={88} color={T.bone}/>
  </header>
);

const TOC = () => (
  <nav style={{
    background: T.bone2, borderBottom: `1px solid ${T.ink}`,
    padding: `${S[5]}px ${S[7]}px`,
    display:'flex', gap: S[6], flexWrap:'wrap',
    fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
    position:'sticky', top:0, zIndex: Z.sticky,
  }}>
    {[
      ['01','Tokens'], ['02','Typography'], ['03','Components'],
      ['04','Patterns'], ['05','Motion'],
    ].map(([n, t]) => (
      <a key={n} href={`#sec-${n}`} style={{ color: T.ink, textDecoration:'none', display:'flex', gap: S[2] }}>
        <span style={{ opacity:.5 }}>{n}</span><span>{t}</span>
      </a>
    ))}
  </nav>
);

const FooterStrip = () => (
  <footer style={{
    background: T.ink, color: T.bone, padding:`${S[7]}px ${S[7]}px`,
    display:'flex', justifyContent:'space-between', alignItems:'center',
    fontFamily:'"JetBrains Mono", monospace', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase',
  }}>
    <span>GLOSÉ · DESIGN SYSTEM v0.1</span>
    <Wordmark size={20} color={T.bone}/>
    <span style={{ opacity:.5 }}>NEXT → SHOPIFY THEME SPEC (F2)</span>
  </footer>
);

const DesignSystemPage = () => (
  <div style={{ minHeight:'100vh' }}>
    <Cover/>
    <TOC/>
    <div id="sec-01"><Tokens/></div>
    <div id="sec-02"><Typography/></div>
    <div id="sec-03"><Components/></div>
    <div id="sec-04"><Patterns/></div>
    <div id="sec-05"><Motion/></div>
    <FooterStrip/>
  </div>
);

Object.assign(window, { DesignSystemPage });