/* spec-page.jsx — top-level SpecPage shell */

const SpecCover = () => (
  <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] }}>
        F2 · SHOPIFY THEME SPEC · v0.1
      </div>
      <h1 style={{ fontWeight:900, fontSize:112, letterSpacing:'-0.045em', lineHeight:.92, margin:0 }}>
        Glosé<br/>Theme Spec.
      </h1>
      <p style={{ marginTop:S[6], fontSize:17, lineHeight:1.55, maxWidth:560, color:T.n400 }}>
        Technical handoff from F1B Design System to Shopify OS 2.0 theme.
        Section schemas, snippet APIs, CSS custom properties, JS patterns, and build checklist.
      </p>
      <div style={{ marginTop:S[6], display:'flex', gap:S[3], flexWrap:'wrap' }}>
        {[
          ['Base', 'Dawn 14+'],
          ['Type direction', 'C · Helvetica + Mono'],
          ['Viewport', '1440px desktop · 375px mobile'],
          ['Markets', 'EN / CS / IT'],
        ].map(([k, v]) => (
          <div key={k} style={{ border:`1px solid ${T.n500}`, padding:`${S[2]}px ${S[4]}px` }}>
            <span className="mono" style={{ fontSize:9, letterSpacing:'.18em', textTransform:'uppercase', color:T.n400 }}>{k} · </span>
            <span className="mono" style={{ fontSize:10, letterSpacing:'.12em', color:T.neon }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
    <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:S[5] }}>
      <Wordmark size={72} color={T.bone}/>
      <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:T.n500, textAlign:'right' }}>
        Based on F1A Brand<br/>+ F1B Design System
      </div>
    </div>
  </header>
);

const SpecTOC = () => (
  <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', 'Architecture'],
      ['02', 'Sections'],
      ['03', 'Snippets'],
      ['04', 'Settings'],
      ['05', 'Handoff'],
    ].map(([n, t]) => (
      <a key={n} href={`#spec-${n}`} style={{ color:T.ink, textDecoration:'none', display:'flex', gap:S[2] }}>
        <span style={{ opacity:.5 }}>{n}</span><span>{t}</span>
      </a>
    ))}
    <span style={{ marginLeft:'auto', opacity:.4 }}>↑ Prev: F1B Design System</span>
  </nav>
);

const SpecFooter = () => (
  <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É · SHOPIFY THEME SPEC F2 · v0.1</span>
    <Wordmark size={20} color={T.bone}/>
    <span style={{ opacity:.5 }}>NEXT → F2b MOBILE MOCKY</span>
  </footer>
);

const SpecPage = () => (
  <div style={{ minHeight:'100vh' }}>
    <SpecCover/>
    <SpecTOC/>
    <div id="spec-01"><ArchitectureSection/></div>
    <div id="spec-02"><SectionsSection/></div>
    <div id="spec-03"><SnippetsSection/></div>
    <div id="spec-04"><SettingsSection/></div>
    <div id="spec-05"><HandoffSection/></div>
    <SpecFooter/>
  </div>
);

Object.assign(window, { SpecPage });