// Direction 3: The Almanac — modern-classical hybrid
// Oversized display serif for emotion, mono for data, warm accent color.
// Expressive yet dignified. Mubi yearbook energy — confident, literary, alive.

const almanacStyles = {
  paper: '#f2ebe0',
  ink: '#14100a',
  inkMid: '#4a4238',
  inkSoft: '#8a7f6f',
  rule: '#d6cbba',
  accent: '#b8441f', // warm terracotta / dim vermillion
  accentDeep: '#7a2e15',
  serif: '"GT Sectra", "Tiempos Headline", "Canela", Georgia, serif',
  bodySerif: '"Tiempos Text", "Canela Text", Georgia, serif',
  mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace',
};

function AlmanacCover() {
  const s = almanacStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      fontFamily: s.bodySerif, position: 'relative', overflow: 'hidden',
    }}>
      {/* massive display type bleeds */}
      <div style={{
        position: 'absolute', top: 120, left: -20, right: -20,
        fontFamily: s.serif, fontSize: 220, lineHeight: 0.82,
        letterSpacing: -8, fontWeight: 400, color: s.ink,
      }}>
        <div>Noble</div>
        <div style={{ color: s.accent, fontStyle: 'italic', paddingLeft: 60 }}>Rock</div>
        <div>Partners.</div>
      </div>

      {/* top corner meta */}
      <div style={{ position: 'absolute', top: 32, left: 32, right: 32, display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkMid }}>
        <span>The Almanac ✦ MMXXVI</span>
        <span>№ 01</span>
      </div>

      {/* bottom block */}
      <div style={{ position: 'absolute', bottom: 32, left: 32, right: 32 }}>
        <div style={{ width: 64, height: 1, background: s.accent, marginBottom: 16 }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24 }}>
          <div style={{ fontFamily: s.serif, fontSize: 22, lineHeight: 1.15, fontStyle: 'italic', maxWidth: 340 }}>
            An almanac of voice, form, and bearing — for those entrusted with the brand.
          </div>
          <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkMid, textAlign: 'right', whiteSpace: 'nowrap' }}>
            Brand<br/>Guidelines<br/>Vol. I
          </div>
        </div>
      </div>

      {/* corner accent — real crest */}
      <img
        src="assets/logo-crest.png"
        alt="Noble Rock crest"
        style={{ position: 'absolute', top: 72, right: 32, width: 72, height: 'auto', opacity: 0.85 }}
      />
    </div>
  );
}

function AlmanacSpread() {
  const s = almanacStyles;
  return (
    <div style={{
      width: 600, height: 800, background: s.paper, color: s.ink,
      fontFamily: s.bodySerif, position: 'relative',
    }}>
      {/* header */}
      <div style={{ padding: '24px 40px 0', display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkSoft }}>
        <span>Chapter Four</span>
        <span>Palette</span>
        <span>024</span>
      </div>

      {/* section mark */}
      <div style={{ padding: '52px 40px 0' }}>
        <div style={{ fontFamily: s.mono, fontSize: 11, letterSpacing: '0.2em', color: s.accent, marginBottom: 12 }}>
          — IV.I —
        </div>
        <div style={{ fontFamily: s.serif, fontSize: 84, lineHeight: 0.9, letterSpacing: -2.5, fontWeight: 400, marginBottom: 4 }}>
          Colour, as
        </div>
        <div style={{ fontFamily: s.serif, fontSize: 84, lineHeight: 0.9, letterSpacing: -2.5, fontWeight: 400, fontStyle: 'italic', color: s.accent, marginBottom: 20 }}>
          atmosphere.
        </div>
        <div style={{ fontFamily: s.serif, fontSize: 17, lineHeight: 1.45, fontStyle: 'italic', color: s.inkMid, maxWidth: 440, marginBottom: 36 }}>
          We do not decorate with colour. We set a room with it — the way light through a window sets a room at dusk.
        </div>
      </div>

      {/* colour strip — full bleed horizontal */}
      <div style={{ display: 'flex', height: 180, marginBottom: 24 }}>
        {[
          { hex: '#14100a', name: 'Obsidian' },
          { hex: '#f2ebe0', name: 'Parchment', dark: true },
          { hex: '#b8441f', name: 'Vermilion' },
          { hex: '#2d3a2a', name: 'Cypress' },
          { hex: '#9a7d3e', name: 'Brass' },
        ].map(c => (
          <div key={c.name} style={{
            flex: 1, background: c.hex, position: 'relative',
            color: c.dark ? s.ink : s.paper,
            padding: 16, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            borderRight: c.dark ? `1px solid ${s.rule}` : 'none',
          }}>
            <div style={{ fontFamily: s.serif, fontSize: 18, fontStyle: 'italic', letterSpacing: -0.2 }}>{c.name}</div>
            <div style={{ fontFamily: s.mono, fontSize: 10, letterSpacing: '0.1em', opacity: 0.7, marginTop: 2 }}>{c.hex}</div>
          </div>
        ))}
      </div>

      {/* running body */}
      <div style={{ padding: '0 40px', display: 'grid', gridTemplateColumns: '60px 1fr 1fr', gap: 20 }}>
        <div style={{ fontFamily: s.serif, fontSize: 48, lineHeight: 0.9, color: s.accent, fontStyle: 'italic' }}>“</div>
        <div style={{ fontSize: 12, lineHeight: 1.6, color: s.inkMid, gridColumn: '2 / 4', columnCount: 2, columnGap: 20 }}>
          Obsidian carries the weight of authority. Parchment is the breath between sentences. Vermilion is the rare emphasis — a single underlined word in a letter. Cypress and Brass appear only where ceremony requires them.
        </div>
      </div>

      {/* footer */}
      <div style={{ position: 'absolute', bottom: 20, left: 40, right: 40, display: 'flex', justifyContent: 'space-between', fontFamily: s.mono, fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: s.inkSoft, borderTop: `1px solid ${s.rule}`, paddingTop: 12 }}>
        <span>✦ Noble Rock</span>
        <span>The Almanac · Vol. I</span>
      </div>
    </div>
  );
}

Object.assign(window, { AlmanacCover, AlmanacSpread });