// Sybre — Spec appendix page

function SpecPage() {
  return (
    <Page>
      <section className="page-hero">
        <div className="container">
          <Reveal>
            <div className="eyebrow accent" style={{ marginBottom: 24 }}>Spec appendix</div>
            <h1 className="h-hero" style={{ marginBottom: 24 }}>Build <em className="accent">spec</em>.</h1>
            <p className="lead lg">A reference for the developer or follow-up build session: tokens, copy deck, components, asset list, build order, acceptance criteria, and open questions.</p>
          </Reveal>
        </div>
      </section>

      {/* TOC */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <Reveal stagger className="grid-3">
            {[
              ['01 · Site map',          '#sitemap'],
              ['02 · Design tokens',      '#tokens'],
              ['03 · Component inventory','#components'],
              ['04 · Copy deck',          '#copy'],
              ['05 · Asset list',         '#assets'],
              ['06 · Build order',        '#build'],
              ['07 · Acceptance',         '#acceptance'],
              ['08 · Live-site fixes',    '#fixes'],
              ['09 · Open questions',     '#open'],
            ].map(([t, h]) => (
              <a key={h} href={h} className="card is-link" style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <span style={{ fontFamily:'var(--font-display)', fontSize: 16, fontWeight: 500 }}>{t}</span>
                <span style={{ color:'var(--burnt-orange)' }}>↓</span>
              </a>
            ))}
          </Reveal>
        </div>
      </section>

      {/* SITEMAP */}
      <SpecSection id="sitemap" num="01" label="Site map" title="Eight <em>routes</em>.">
        <pre style={specPre}>{`/                              Home
/services/                     Services overview
/services/managed-it/          Managed IT
/services/cybersecurity/       Cybersecurity
/services/ai/                  AI infrastructure   ← the wedge
/services/consulting/          Consulting & design
/about/                        About
/insights/                     Insights (placeholder grid)
/contact/                      Contact

Header order: Services · About · Insights · Contact · [Book discovery]
Footer: contact block · sitemap · legal · privacy`}</pre>
      </SpecSection>

      {/* TOKENS */}
      <SpecSection id="tokens" num="02" label="Design tokens" title="The <em>full set</em>.">
        <div className="grid-2">
          <TokenCard title="Colour" rows={[
            ['--sybre-black',        '#121010', 'Primary background'],
            ['--off-black',          '#1A1818', 'Cards, elevated surfaces'],
            ['--sybre-white',        '#FFFFFF', 'Text on dark'],
            ['--light-grey',         '#D8D8D8', 'Supporting neutral'],
            ['--mid-grey',           '#888888', 'Supporting neutral / meta only'],
            ['--burnt-orange',       '#C8652A', 'Primary accent — CTAs, eyebrows'],
            ['--burnt-orange-hover', '#A84F1C', 'Filled-button hover'],
            ['--soft-sage',          '#8DBFB0', 'Data-vis accent only'],
            ['--soft-sage-hover',    '#7AAD9E', 'Data-vis hover'],
          ]} />
          <TokenCard title="Foreground (on dark)" rows={[
            ['--fg1', '#FFFFFF',                'Headings, primary'],
            ['--fg2', 'rgba(255,255,255,0.55)', 'Body'],
            ['--fg3', 'rgba(255,255,255,0.40)', 'Secondary'],
            ['--fg4', 'rgba(255,255,255,0.30)', 'Captions / meta'],
            ['--fg5', 'rgba(255,255,255,0.18)', 'Strong dividers'],
          ]} />
          <TokenCard title="Borders" rows={[
            ['--border-1', 'rgba(255,255,255,0.06)', 'Card default'],
            ['--border-2', 'rgba(255,255,255,0.10)', 'Subtle definition'],
            ['--border-3', 'rgba(255,255,255,0.18)', 'Hover / interactive'],
            ['--border-4', 'rgba(255,255,255,0.30)', 'Ghost button rest'],
            ['--border-5', 'rgba(255,255,255,0.45)', 'Ghost button hover'],
          ]} />
          <TokenCard title="Radii / spacing" rows={[
            ['--r-card',        '24px',  'Cards, major containers'],
            ['--r-inner',       '16px',  'Inner cards, inputs'],
            ['--r-pill',        '99px',  'Buttons, pills, tags'],
            ['--pad-section',   '80px',  'Section vertical pad (desktop)'],
            ['--pad-section-mobile', '56px', 'Section vertical pad (mobile)'],
            ['--pad-side',      '60px',  'Side pad (desktop)'],
            ['--pad-side-mobile','24px', 'Side pad (mobile)'],
            ['--max-w',         '1200px','Max content width'],
          ]} />
          <TokenCard title="Type families" rows={[
            ['--font-display', "'Sora', system-ui",   'Display / headings — weights 300, 400, 500, 600, 700'],
            ['--font-body',    "'DM Sans', system-ui",'Body / UI — weights 300, 400, 500'],
          ]} />
          <TokenCard title="Type scale (semantic)" rows={[
            ['.h-hero',       'clamp(44, 7vw, 72)px / 700 / -0.04em', 'Page H1'],
            ['.h-section',    'clamp(36, 4.5vw, 52)px / 700 / -0.03em', 'Section H2 (Bold + Light <em>)'],
            ['.h-card',       '22px / 500',     'Card heading'],
            ['.eyebrow',      '13px / 500 / 0.12em UPPER', 'Eyebrow'],
            ['.section-num',  '13px / 600 / 0.12em UPPER', 'Section number — accent'],
            ['.lead',         '17–18px / 300',  'Lead paragraph'],
            ['.body',         '15px / 400',     'Body'],
            ['.meta',         '13px / 400 / 0.04em', 'Meta / caption'],
            ['.stat-num',     'clamp(56, 8vw, 96)px / 700 / -0.04em', 'Stat'],
          ]} />
        </div>
      </SpecSection>

      {/* COMPONENTS */}
      <SpecSection id="components" num="03" label="Component inventory" title="Every <em>building block</em>.">
        <div className="grid-2">
          {[
            { t:'Site header', s:'72px desktop / 64px mobile · sticky · backdrop-blur 14 · 1px bottom border at 6% white. Logo left · pill nav centre · primary CTA right · hamburger ≤920px.' },
            { t:'Mobile nav', s:'Full-screen overlay below header. Sora 28px links. Service routes indented as sub-links. Primary CTA pinned at bottom.' },
            { t:'Primary button', s:'Pill 99px · 44px min-height · 11×26 padding · burnt-orange fill · white text · hover #A84F1C · focus-visible 2px orange outline at 2px offset.' },
            { t:'Ghost button', s:'Pill · transparent · 1px border at 30% white · hover 45%.' },
            { t:'Text button (.btn-text)', s:'Burnt-orange link · 14px / 0.04em / UPPER · optional → that translates 3px on hover.' },
            { t:'Card (default)', s:'#1A1818 · 24px radius · 1px 6% white border · 36px padding · hover border 18% + 2px lift on .is-link variant.' },
            { t:'Card (accent)', s:'rgba(200,101,42,0.06) bg · rgba(200,101,42,0.20) border. Used for AI cards.' },
            { t:'Inner card', s:'#1A1818 · 16px radius · 24px padding. Inputs, sub-cards inside cards.' },
            { t:'Pill / tag', s:'99px · 6×14 · burnt-orange-15% bg · burnt-orange text · 12px / 0.04em.' },
            { t:'Section number label', s:'Sora 13/600/0.12em UPPER · burnt-orange · format "01 · SERVICES" with 32×1px line after.' },
            { t:'Section head', s:'Section number → H2 (Bold + Light <em>) → optional lead paragraph (17px/300/55%, max 560).' },
            { t:'Form field', s:'#1A1818 bg · 1px 12% white border · 16px radius · 14×18 padding · 15px DM Sans. Focus → border burnt-orange. Error → border burnt-orange + 12px message below.' },
            { t:'Form select', s:'Same chrome. Custom chevron SVG, 18px right.' },
            { t:'Stat block', s:'Stat number Sora clamp(56–96) Bold -0.04em + label DM Sans 14px / 40% opacity, 12px gap. Optional .accent tint.' },
            { t:'Architecture diagram', s:'820×400 SVG, 6 nodes, 7 edges. Hover/focus a node → ripple ring + edge highlights + description card below. Sage edges, mixed orange/sage rings.' },
            { t:'Image placeholder', s:'Dashed orange border on #1A1818, eyebrow caption inside, gives the brief flag a visual home.' },
            { t:'Reveal animation', s:'IO threshold 0.12, rootMargin -40px bottom. Single .reveal: 24px → 0 / 0 → 1 over 0.8s. .reveal-stagger: each child 0.07s after the last. Honoured prefers-reduced-motion.' },
            { t:'Site footer', s:'4-col grid (2/1/1/1). Brand block + Services + Company + Contact. 1px top divider above legal row. ABN flagged.' },
          ].map(c => (
            <div key={c.t} className="card">
              <h3 className="h-card" style={{ marginBottom: 10, fontSize: 18 }}>{c.t}</h3>
              <p className="body">{c.s}</p>
            </div>
          ))}
        </div>
      </SpecSection>

      {/* COPY DECK */}
      <SpecSection id="copy" num="04" label="Copy deck" title="Final <em>approved copy</em>.">
        <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
          {[
            { p:'Home / hero', items:[
              ['Eyebrow', 'Managed technology · Sydney'],
              ['H1',      'Secure, responsive, personal.'],
              ['Lead',    'Boutique managed services for Australian SMBs. Technology delivered by people who explain what they’re doing — and why.'],
              ['CTA-1',   'Book a discovery call'],
              ['CTA-2',   'See how we work →'],
              ['Meta',    '100% breach prevention track record · 15+ years in technology consulting · 24/7 monitoring on critical systems'],
            ]},
            { p:'Home / services (01)', items:[
              ['H2',   'What we do.'],
              ['Lead', 'Five practices, one team. Every engagement is led by a senior engineer — not a triage queue.'],
            ]},
            { p:'Home / why (02)', items:[
              ['H2',  'Boutique by design.'],
              ['V01', 'Senior engineers, on every engagement. — No tier-1 ticket gauntlet.'],
              ['V02', 'Local AI, when it matters. — We deploy LLMs on your premises — not someone else’s cloud.'],
              ['V03', 'Boutique scale. — Few clients, deep relationships, real accountability.'],
            ]},
            { p:'AI page', items:[
              ['H1',   'Your data stays on your premises.'],
              ['Lead', 'Your model is fine-tuned on your documents. Your team gets answers in seconds, not minutes. And no client information ever leaves the building.'],
              ['Hardware', 'We design around current-generation NVIDIA professional GPUs (RTX PRO 6000 Blackwell class) for 30B–70B parameter models, integrated with Microsoft Entra ID for SSO and audited access.'],
            ]},
            { p:'Footer', items:[
              ['Block', 'Sybre Pty Ltd · Suite 203, Level 8, 99 Walker St, North Sydney NSW 2060 · info@sybre.com.au · (02) 7234 1455 · © 2026 Sybre Pty Ltd. All rights reserved.'],
            ]},
            { p:'Banned phrases — must never appear', items:[
              ['Banned', 'empower / empowering · cutting-edge · industry-leading · world-class · revolutionise · unprecedented · game-changing · synergies · digital transformation journey · "solutions" (vague) · leverage (verb) · unlock potential · ALL CAPS · multiple !!! · emojis · super excited · hedge stacks'],
            ]},
            { p:'Live-site rewrites', items:[
              ['Was', '"Empowering your Business in the Digital Age"'],
              ['Now', '"Secure, responsive, personal."'],
              ['Was', '"Technology empowered, human led."'],
              ['Now', '"Technology delivered by people who explain what they’re doing."'],
              ['Was', '"cutting-edge, industry leading solutions"'],
              ['Now', '"Considered, current, and chosen for the job."'],
              ['Was', '"navigate the complexities of the digital world"'],
              ['Now', '"Help your team get on with their work."'],
              ['Was', '"leading IT Managed Service Provider"'],
              ['Now', '"A boutique MSP based in North Sydney."'],
            ]},
          ].map(group => (
            <div key={group.p} className="card">
              <div className="eyebrow accent" style={{ marginBottom: 16 }}>{group.p}</div>
              <table style={specTable}>
                <tbody>
                  {group.items.map(([k, v], i) => (
                    <tr key={i}>
                      <td style={{ ...specTd, color:'var(--fg3)', width: 120, verticalAlign:'top', fontFamily:'var(--font-display)', fontSize: 12, letterSpacing:'0.08em', textTransform:'uppercase' }}>{k}</td>
                      <td style={specTd}>{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ))}
        </div>
      </SpecSection>

      {/* ASSETS */}
      <SpecSection id="assets" num="05" label="Asset list" title="What we <em>need</em>.">
        <div className="grid-2">
          <div className="card">
            <h3 className="h-card" style={{ marginBottom: 16 }}>Already supplied (in brand skill)</h3>
            <ul className="list-clean">
              <li>assets/logo-white.png · assets/logo-dark.png</li>
              <li>assets/icon-white-on-black.png · icon-black-on-white.png · icon-orange-on-black.png · icon-white-on-orange.png</li>
              <li>assets/bg-architectural.jpg · bg-bokeh.jpg · bg-network.jpg</li>
              <li>Sora + DM Sans woff2 (self-hosted in production)</li>
            </ul>
          </div>
          <div className="card accent">
            <h3 className="h-card" style={{ marginBottom: 16 }}>To commission <span className="placeholder">human input</span></h3>
            <ul className="list-clean">
              <li>Hero photography — desaturated, real working environment</li>
              <li>Headshot of Varant + remaining team (3 photos minimum)</li>
              <li>Service icons — minimal line art, 24px stroke @ 1.5px (Lucide-style)</li>
              <li>Three case-study cover images (anonymised)</li>
              <li>Six insight article cover images</li>
              <li>One real client testimonial per service page (4 total)</li>
              <li>Embedded map asset (Mapbox static tile or styled SVG)</li>
              <li>Calendar booking link (Calendly / Cal.com)</li>
              <li>ABN for footer legal block</li>
            </ul>
          </div>
        </div>
      </SpecSection>

      {/* BUILD ORDER */}
      <SpecSection id="build" num="06" label="Build order" title="Recommended <em>sequence</em>.">
        <ol style={{ listStyle:'none', counterReset:'step', display:'flex', flexDirection:'column', gap: 12 }}>
          {[
            ['Tokens',    'Drop the custom-property block from §02 into a single CSS file. Self-host Sora + DM Sans via @font-face, woff2, font-display: swap.'],
            ['Layout shell', 'Header, footer, page wrapper, container, section padding. Verify sticky header + mobile menu.'],
            ['Components',  'Buttons, cards, pills, form fields, section number labels, image placeholder. Lock states (hover, focus, error).'],
            ['Home',        'Hero → services → why → stats → recent work → final CTA. Reveal animations, meta row, dropdown nav.'],
            ['Services overview', 'Stacked rows linking to four service detail pages.'],
            ['AI page',     'Hero, outcomes, interactive architecture SVG, hardware spec, three deployment patterns, testimonial.'],
            ['Other service pages', 'Managed IT, Cybersecurity, Consulting — built off shared template.'],
            ['About / Insights / Contact', 'Final pages, including form validation + success state.'],
            ['SEO + a11y pass', 'Page titles, meta descriptions, Open Graph, Organization / Service / BreadcrumbList schema, focus order, alt text, contrast.'],
            ['Performance pass', 'Lazy-load below-fold imagery, preload Sora 700 + DM Sans 400, validate LCP < 2s on 4G, total HTML+CSS < 500kb.'],
          ].map(([t, b], i) => (
            <li key={i} className="card" style={{ display:'grid', gridTemplateColumns:'80px 200px 1fr', gap:24, alignItems:'center', padding:'24px 32px' }}>
              <span className="section-num"><span>{String(i+1).padStart(2,'0')}</span></span>
              <span style={{ fontFamily:'var(--font-display)', fontSize:18, fontWeight:500 }}>{t}</span>
              <span className="body">{b}</span>
            </li>
          ))}
        </ol>
      </SpecSection>

      {/* ACCEPTANCE */}
      <SpecSection id="acceptance" num="07" label="Acceptance criteria" title="Done <em>means done</em>.">
        <div className="card">
          <ul className="list-clean">
            {[
              'Every page has wireframe, copy deck entries, and component reference.',
              'No banned phrase appears anywhere in copy.',
              'All colours match the §02 palette exactly. No hex outside the palette.',
              'All radii are 16px, 24px, or 99px — no others.',
              'All H2s use sentence case and the Bold + Light pattern with terminal full-stop.',
              'One accent (Burnt Orange) site-wide. Sage only on the AI architecture diagram.',
              'All copy is Australian English. All dates are DMY. Currency is $X,XXX.',
              'WCAG 2.2 AA: contrast verified, focus rings visible, semantic HTML, alt text everywhere.',
              'LCP < 2.0s on 4G. Total page weight < 500kb on home (excl. hero photo).',
              'og:site_name = "Sybre" on every page. No Wix template URLs survive.',
            ].map((c, i) => <li key={i}>{c}</li>)}
          </ul>
        </div>
      </SpecSection>

      {/* LIVE SITE FIXES */}
      <SpecSection id="fixes" num="08" label="Live-site fixes" title="What this rebuild <em>resolves</em>.">
        <div className="grid-2">
          {[
            ['Light-mode template', 'Dark-first design with #121010 background as default. Light mode reserved for print stylesheet.'],
            ['Wrong fonts', 'Sora + DM Sans applied throughout, self-hosted woff2.'],
            ['Missing accents', 'Burnt Orange (#C8652A) is the single accent across CTAs, eyebrows, section numbers, and accent cards. Soft Sage reserved for the AI architecture diagram only.'],
            ['Geometry', '24/16/99 radius system applied consistently. 36–48px card padding. 80/56 section padding.'],
            ['Banned copy', 'Every banned phrase rewritten — see §04 copy deck.'],
            ['Wix artefacts', 'og:site_name = "Sybre". No demone2.wixsite.com URLs anywhere. Custom favicon and OG image required.'],
            ['No AI service line', 'Dedicated /services/ai page added. Featured prominently on home and Services overview.'],
            ['Generic IA', 'Five service routes, About, Insights, Contact. Header order locked: Services · About · Insights · Contact · CTA.'],
          ].map(([was, now]) => (
            <div key={was} className="card">
              <div className="eyebrow" style={{ marginBottom: 10, color:'var(--fg4)' }}>Was</div>
              <p className="body" style={{ marginBottom: 16 }}>{was}</p>
              <div className="eyebrow accent" style={{ marginBottom: 10 }}>Now</div>
              <p className="body" style={{ color:'var(--fg1)' }}>{now}</p>
            </div>
          ))}
        </div>
      </SpecSection>

      {/* OPEN QUESTIONS */}
      <SpecSection id="open" num="09" label="Open questions" title="Needs <em>human input</em>.">
        <div className="card">
          <ul className="list-clean">
            <li><strong style={{ color:'var(--fg1)' }}>ABN</strong> — required for footer legal line.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Hero photography</strong> — desaturated, real working environment. To commission or licence.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Team headshots & bios</strong> — Varant first, plus two further engineers minimum. Card layout already supports up to 6.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Testimonials</strong> — one per service page (4 total), real client wording, attribution permission cleared.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Case-study imagery</strong> — three cover images for the home recent-work block.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Insights articles</strong> — two are seeded as real placeholders ("Local LLMs in 2026", "Essential Eight maturity"); four more to commission.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Calendar booking link</strong> — Cal.com / Calendly URL for the contact page.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Embedded map</strong> — Mapbox static or styled SVG of North Sydney; current placeholder is a stylised SVG with an animated pin.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Service icons</strong> — minimal line art set; current cards lead with section numbers in lieu.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Form submission target</strong> — endpoint (Formspree, custom serverless, or CRM webhook) for the contact form.</li>
            <li><strong style={{ color:'var(--fg1)' }}>Privacy policy + Terms</strong> — copy to write before launch; placeholder routes wired in footer.</li>
          </ul>
        </div>
      </SpecSection>
    </Page>
  );
}

const specPre = {
  background:'var(--off-black)',
  border:'1px solid var(--border-1)',
  borderRadius:'var(--r-inner)',
  padding:'24px 28px',
  fontFamily:'ui-monospace, "SF Mono", monospace',
  fontSize: 13,
  lineHeight: 1.7,
  color:'var(--fg2)',
  overflowX: 'auto',
  whiteSpace: 'pre',
};

const specTable = { width: '100%', borderCollapse: 'collapse' };
const specTd = { padding: '10px 0', borderBottom: '1px solid var(--border-1)', fontSize: 14, color: 'var(--fg2)', verticalAlign: 'top' };

function SpecSection({ id, num, label, title, children }) {
  return (
    <section id={id} className="section" style={{ scrollMarginTop: 80 }}>
      <div className="container">
        <SectionHead num={num} label={label} title={title} />
        {children}
      </div>
    </section>
  );
}

function TokenCard({ title, rows }) {
  return (
    <div className="card">
      <h3 className="h-card" style={{ marginBottom: 16, fontSize: 18 }}>{title}</h3>
      <table style={specTable}>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              <td style={{ ...specTd, fontFamily:'ui-monospace, monospace', color:'var(--burnt-orange)', fontSize: 12 }}>{r[0]}</td>
              <td style={{ ...specTd, fontFamily:'ui-monospace, monospace', color:'var(--fg1)', fontSize: 12 }}>{r[1]}</td>
              <td style={{ ...specTd, fontSize: 13, color:'var(--fg3)' }}>{r[2]}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

Object.assign(window, { SpecPage });