// Direction 1: The Archive — editorial/literary
// Feels like a rare-book publisher's monograph. Cream paper,
// generous margins, restrained type, quiet confidence through restraint.

const archiveStyles = {
  paper: '#f5f1e8',
  ink: '#1a1612',
  inkSoft: '#4a4338',
  rule: '#c8beab',
  accent: '#6b5a3e', // warm walnut
  serif: '"GT Sectra", "Tiempos Headline", "EB Garamond", Georgia, serif',
  bodySerif: '"Tiempos Text", "EB Garamond", "Iowan Old Style", Georgia, serif',
  mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',
};

function ArchiveCover() {
  const s = archiveStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      position: 'relative', padding: '64px 56px',
      fontFamily: s.bodySerif,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    }}>
      {/* top meta */}
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: s.inkSoft }}>
        <span>N · R · P</span>
        <span>Volume 01 · MMXXVI</span>
        <span>Sydney</span>
      </div>

      {/* center mark */}
      <div style={{ textAlign: 'center' }}>
        <img src="assets/logo-crest.png" alt="Noble Rock crest" style={{ width: 96, height: 'auto', display: 'block', margin: '0 auto 28px', opacity: 0.92 }} />
        <div style={{ fontFamily: s.serif, fontSize: 68, lineHeight: 0.95, letterSpacing: -1.2, fontWeight: 400, fontStyle: 'italic' }}>
          The<br/>Noble Rock<br/>Compendium
        </div>
        <div style={{ marginTop: 28, fontSize: 15, fontStyle: 'italic', color: s.inkSoft, letterSpacing: 0.2 }}>
          A guide to the voice, form, and bearing<br/>of Noble Rock Partners.
        </div>
      </div>

      {/* bottom */}
      <div>
        <div style={{ height: 1, background: s.rule, marginBottom: 18 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, letterSpacing: '0.15em', textTransform: 'uppercase', color: s.inkSoft }}>
          <span>Brand Guidelines</span>
          <span>First Edition</span>
        </div>
      </div>
    </div>
  );
}

function ArchiveSpread() {
  const s = archiveStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      position: 'relative', padding: '56px 56px 48px',
      fontFamily: s.bodySerif,
      display: 'flex', flexDirection: 'column',
    }}>
      {/* running head */}
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkSoft, marginBottom: 48 }}>
        <span>§ II — Colour</span>
        <span>Page 24</span>
      </div>

      {/* chapter number */}
      <div style={{ fontFamily: s.serif, fontSize: 14, fontStyle: 'italic', color: s.accent, marginBottom: 8 }}>Chapter II</div>

      {/* heading */}
      <div style={{ fontFamily: s.serif, fontSize: 54, lineHeight: 1, letterSpacing: -0.8, fontWeight: 400, marginBottom: 24 }}>
        On the <i>Colour</i> of<br/>the House.
      </div>

      {/* lede */}
      <div style={{ fontFamily: s.serif, fontSize: 17, lineHeight: 1.5, fontStyle: 'italic', color: s.inkSoft, maxWidth: 420, marginBottom: 36 }}>
        Our palette is drawn from weathered sandstone, aged parchment, and the deep green of a Sydney Harbour at dusk.
      </div>

      {/* color swatches - as illustrated plates */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 24px', marginBottom: 28 }}>
        {[
          { name: 'Sandstone', hex: '#c8b084', num: '01' },
          { name: 'Ink', hex: '#1a1612', num: '02' },
          { name: 'Walnut', hex: '#6b5a3e', num: '03' },
          { name: 'Harbour', hex: '#2f4238', num: '04' },
        ].map(c => (
          <div key={c.num} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
            <div style={{ width: 56, height: 72, background: c.hex, border: `1px solid ${s.rule}` }} />
            <div style={{ paddingTop: 2 }}>
              <div style={{ fontFamily: s.mono, fontSize: 9, letterSpacing: '0.2em', color: s.inkSoft, marginBottom: 4 }}>№ {c.num}</div>
              <div style={{ fontFamily: s.serif, fontSize: 18, fontStyle: 'italic' }}>{c.name}</div>
              <div style={{ fontFamily: s.mono, fontSize: 10, color: s.inkSoft, marginTop: 2 }}>{c.hex}</div>
            </div>
          </div>
        ))}
      </div>

      {/* body text */}
      <div style={{ fontSize: 13, lineHeight: 1.65, color: s.inkSoft, maxWidth: 480, columnCount: 2, columnGap: 24 }}>
        Colour is applied sparingly. A Noble Rock document is a quiet room — light enters through careful apertures. The house colour, Walnut, is reserved for emphasis, never decoration. It is the author's hand, not the illustrator's flourish.
      </div>

      {/* folio */}
      <div style={{ marginTop: 'auto', paddingTop: 20, borderTop: `1px solid ${s.rule}`, display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkSoft }}>
        <span>Noble Rock Partners</span>
        <span>✦</span>
        <span>Est. MCMLXXVIII</span>
      </div>
    </div>
  );
}

Object.assign(window, { ArchiveCover, ArchiveSpread });