// Direction 2: The Ledger — institutional/architectural
// Swiss-meets-private-banking. Structured grid, monospace spec language,
// tonal neutrals. Feels like a Patek service manual or a Braun product sheet.

const ledgerStyles = {
  paper: '#fafaf7',
  ink: '#0f0f0e',
  inkMid: '#555450',
  inkSoft: '#8a8883',
  rule: '#1a1a18',
  ruleLight: '#d8d6cf',
  accent: '#1a3a2e', // deep bottle green
  sans: '"Neue Haas Grotesk", "Inter", -apple-system, sans-serif',
  serif: '"GT Sectra", "Tiempos Headline", Georgia, serif',
  mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',
};

function LedgerCover() {
  const s = ledgerStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      fontFamily: s.sans, display: 'flex', flexDirection: 'column',
    }}>
      {/* top bar */}
      <div style={{ borderBottom: `1px solid ${s.rule}`, padding: '18px 32px', display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
        <span>NRP/BRAND/GUIDELINES</span>
        <span>REV. 2026.01</span>
      </div>

      {/* grid overlay */}
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gridTemplateRows: 'repeat(16, 1fr)', padding: 32, position: 'relative' }}>
        {/* thin grid lines */}
        <div style={{ position: 'absolute', inset: 32, backgroundImage: `linear-gradient(to right, ${s.ruleLight} 1px, transparent 1px)`, backgroundSize: `${(600-64)/12}px 100%`, opacity: 0.4, pointerEvents: 'none' }} />

        {/* mark */}
        <div style={{ gridColumn: '1 / 3', gridRow: '1 / 2', fontFamily: s.mono, fontSize: 10, color: s.inkSoft, letterSpacing: '0.15em' }}>01 / MARK</div>
        <div style={{ gridColumn: '1 / 4', gridRow: '2 / 5', display: 'flex', alignItems: 'center', justifyContent: 'center', background: s.ink, position: 'relative', zIndex: 1 }}>
          <img src="assets/logo-crest.png" alt="Noble Rock crest" style={{ width: '62%', height: 'auto', filter: 'brightness(0) invert(1)', opacity: 0.92 }} />
        </div>

        {/* title block */}
        <div style={{ gridColumn: '1 / 13', gridRow: '7 / 13', position: 'relative', zIndex: 1 }}>
          <div style={{ fontFamily: s.mono, fontSize: 10, color: s.inkSoft, letterSpacing: '0.15em', marginBottom: 12 }}>02 / DOCUMENT</div>
          <div style={{ fontFamily: s.serif, fontSize: 84, lineHeight: 0.9, letterSpacing: -2, fontWeight: 400 }}>
            Brand<br/>Standards
          </div>
          <div style={{ marginTop: 20, fontSize: 13, color: s.inkMid, maxWidth: 320, lineHeight: 1.5 }}>
            The operating manual for the visual, verbal, and spatial identity of Noble Rock Partners.
          </div>
        </div>

        {/* specs row */}
        <div style={{ gridColumn: '1 / 13', gridRow: '15 / 17', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignContent: 'end', borderTop: `1px solid ${s.rule}`, paddingTop: 16, position: 'relative', zIndex: 1, background: s.paper }}>
          {[
            ['ISSUER', 'Noble Rock'],
            ['ORIGIN', 'Sydney, AU'],
            ['FOUNDED', 'MCMLXXVIII'],
            ['VERSION', '1.0.0'],
          ].map(([k, v]) => (
            <div key={k}>
              <div style={{ fontFamily: s.mono, fontSize: 9, color: s.inkSoft, letterSpacing: '0.15em', marginBottom: 4 }}>{k}</div>
              <div style={{ fontSize: 14, fontWeight: 500 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function LedgerSpread() {
  const s = ledgerStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      fontFamily: s.sans, display: 'flex', flexDirection: 'column',
    }}>
      {/* header */}
      <div style={{ borderBottom: `1px solid ${s.rule}`, padding: '16px 32px', display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', color: s.inkMid }}>
        <span>§ 04 — COLOUR SYSTEM</span>
        <span>NRP-04.01</span>
        <span>P. 24</span>
      </div>

      <div style={{ padding: 32, flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* section number + title */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 6 }}>
          <div style={{ fontFamily: s.mono, fontSize: 11, color: s.accent, letterSpacing: '0.15em' }}>04.01</div>
          <div style={{ flex: 1, height: 1, background: s.rule }} />
        </div>
        <div style={{ fontFamily: s.serif, fontSize: 42, lineHeight: 1, letterSpacing: -1, fontWeight: 400, marginBottom: 8 }}>
          Primary Palette
        </div>
        <div style={{ fontSize: 13, color: s.inkMid, maxWidth: 440, marginBottom: 28, lineHeight: 1.5 }}>
          Four colours form the core identity. Each is specified for print (CMYK, Pantone), screen (HEX, RGB), and material (where applicable).
        </div>

        {/* swatch table */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: s.rule, border: `1px solid ${s.rule}` }}>
          {[
            { name: 'Obsidian', hex: '#0f0f0e', rgb: '15 · 15 · 14', pms: 'Pantone Black 6', role: 'Primary' },
            { name: 'Parchment', hex: '#fafaf7', rgb: '250 · 250 · 247', pms: 'Pantone 9040', role: 'Ground' },
            { name: 'Bottle', hex: '#1a3a2e', rgb: '26 · 58 · 46', pms: 'Pantone 5535', role: 'Accent' },
            { name: 'Brass', hex: '#9a7d3e', rgb: '154 · 125 · 62', pms: 'Pantone 871', role: 'Special' },
          ].map(c => (
            <div key={c.name} style={{ background: s.paper, padding: 16 }}>
              <div style={{ height: 80, background: c.hex, marginBottom: 14 }} />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                <div style={{ fontSize: 16, fontWeight: 600, letterSpacing: -0.2 }}>{c.name}</div>
                <div style={{ fontFamily: s.mono, fontSize: 9, color: s.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{c.role}</div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '52px 1fr', rowGap: 3, fontFamily: s.mono, fontSize: 10, color: s.inkMid }}>
                <span style={{ color: s.inkSoft }}>HEX</span><span>{c.hex}</span>
                <span style={{ color: s.inkSoft }}>RGB</span><span>{c.rgb}</span>
                <span style={{ color: s.inkSoft }}>PMS</span><span>{c.pms}</span>
              </div>
            </div>
          ))}
        </div>

        {/* footnote */}
        <div style={{ marginTop: 'auto', paddingTop: 20, display: 'flex', gap: 12, alignItems: 'flex-start' }}>
          <div style={{ fontFamily: s.mono, fontSize: 10, color: s.accent, letterSpacing: '0.15em' }}>NOTE</div>
          <div style={{ fontSize: 11, color: s.inkMid, lineHeight: 1.5, maxWidth: 440 }}>
            Brass is reserved for ceremonial applications — embossing, foil stamping, annual reports. Never used digitally except as a photographic accent.
          </div>
        </div>
      </div>

      {/* footer */}
      <div style={{ borderTop: `1px solid ${s.rule}`, padding: '12px 32px', display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 9, letterSpacing: '0.15em', textTransform: 'uppercase', color: s.inkSoft }}>
        <span>NOBLE ROCK PARTNERS</span>
        <span>BRAND STANDARDS / REV 2026.01</span>
      </div>
    </div>
  );
}

Object.assign(window, { LedgerCover, LedgerSpread });