// Closing spread — colophon / next steps.

function ClosingSpread() {
  return (
    <div style={{
      minHeight: '100vh',
      background: '#15110a',
      color: 'var(--paper)',
      padding: 'clamp(60px, 8vw, 140px) clamp(32px, 6vw, 120px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      borderTop: '1px solid var(--walnut)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* faint copper patina accent */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url("assets/copper-patina.webp")',
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.08, mixBlendMode: 'screen',
      }} />

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 1200, margin: '0 auto', width: '100%' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'rgba(240, 234, 219, 0.55)',
          marginBottom: 60, paddingBottom: 16,
          borderBottom: '1px solid rgba(240, 234, 219, 0.2)',
        }}>
          <span>§ 04 — Colophon</span>
          <span>Finis</span>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(280px, 1.2fr) minmax(280px, 1fr)',
          gap: 'clamp(40px, 6vw, 100px)',
        }}>
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              letterSpacing: '0.3em', textTransform: 'uppercase',
              color: 'rgba(184, 149, 104, 0.9)', marginBottom: 24,
            }}>
              A choice to make
            </div>
            <div style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(40px, 5vw, 88px)',
              lineHeight: 0.92, letterSpacing: '-0.03em',
              fontWeight: 300,
              marginBottom: 32,
            }}>
              Three rooms,<br/>
              <span style={{ fontStyle: 'italic' }}>fully furnished.</span><br/>
              Which is yours?
            </div>
            <div style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic',
              fontSize: 'clamp(17px, 1.4vw, 21px)',
              lineHeight: 1.5,
              color: 'rgba(240, 234, 219, 0.78)',
              maxWidth: 560,
              marginBottom: 36,
            }}>
              Each direction is built out as a full ten-chapter book.
              Read them end to end, hold them against one another, and tell
              us which feels like Noble Rock — or describe a hybrid worth
              drawing together.
            </div>

            {/* three entry buttons */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 440 }}>
              {[
                { n: 'I',   name: 'The Archive',  href: 'the-archive.html',  sub: 'Editorial · literary · restrained' },
                { n: 'II',  name: 'The Ledger',   href: 'the-ledger.html',   sub: 'Institutional · architectural · precise' },
                { n: 'III', name: 'The Almanac',  href: 'the-almanac.html',  sub: 'Modern-classical · editorial · warm' },
              ].map(b => (
                <a
                  key={b.name}
                  href={b.href}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '48px 1fr auto',
                    alignItems: 'center', gap: 18,
                    padding: '16px 20px',
                    border: '1px solid rgba(240, 234, 219, 0.25)',
                    color: 'var(--paper)', textDecoration: 'none',
                    background: 'rgba(240, 234, 219, 0.03)',
                    transition: 'all 200ms ease',
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.background = 'rgba(184, 149, 104, 0.12)';
                    e.currentTarget.style.borderColor = 'rgba(184, 149, 104, 0.6)';
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.background = 'rgba(240, 234, 219, 0.03)';
                    e.currentTarget.style.borderColor = 'rgba(240, 234, 219, 0.25)';
                  }}
                >
                  <span style={{
                    fontFamily: 'Fraunces, serif', fontStyle: 'italic',
                    fontSize: 28, color: 'rgba(184, 149, 104, 0.95)',
                  }}>{b.n}</span>
                  <span>
                    <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, letterSpacing: '-0.01em' }}>{b.name}</div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(240, 234, 219, 0.55)', marginTop: 3 }}>{b.sub}</div>
                  </span>
                  <span style={{ fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontSize: 20, color: 'rgba(240, 234, 219, 0.7)' }}>→</span>
                </a>
              ))}
            </div>
          </div>

          <div style={{
            borderLeft: '1px solid rgba(240, 234, 219, 0.2)',
            paddingLeft: 'clamp(24px, 3vw, 48px)',
          }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              letterSpacing: '0.25em', textTransform: 'uppercase',
              color: 'rgba(240, 234, 219, 0.5)', marginBottom: 20,
            }}>
              Colophon
            </div>
            <dl style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 14, lineHeight: 1.6,
              color: 'rgba(240, 234, 219, 0.85)',
              margin: 0,
            }}>
              {[
                ['Client', 'Noble Rock Partners'],
                ['Established', 'Sydney · 1978'],
                ['Phase', '01 — Direction exploration'],
                ['Artefacts', 'Three complete brand books'],
                ['Chapters', '10 per direction · 30 total'],
                ['Assets', 'Drawn from nobel4-main/'],
                ['Type', 'Fraunces · JetBrains Mono'],
                ['Prepared', 'MMXXVI'],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '110px 1fr',
                  padding: '10px 0',
                  borderBottom: '1px solid rgba(240, 234, 219, 0.12)',
                }}>
                  <dt style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    letterSpacing: '0.2em', textTransform: 'uppercase',
                    color: 'rgba(240, 234, 219, 0.5)',
                  }}>{k}</dt>
                  <dd style={{ margin: 0, fontStyle: 'italic' }}>{v}</dd>
                </div>
              ))}
            </dl>

            <div style={{
              marginTop: 40,
              display: 'flex', alignItems: 'center', gap: 20,
            }}>
              <img src="assets/logo-crest.png" alt="Noble Rock crest" style={{
                width: 52, height: 'auto',
                filter: 'brightness(0) invert(1)', opacity: 0.75,
              }} />
              <div>
                <div style={{
                  fontFamily: 'Fraunces, serif',
                  fontSize: 18, letterSpacing: '0.15em', textTransform: 'uppercase',
                  color: 'var(--paper)',
                }}>
                  Noble Rock
                </div>
                <div style={{
                  fontFamily: 'Fraunces, serif', fontStyle: 'italic',
                  fontSize: 12,
                  color: 'rgba(240, 234, 219, 0.6)',
                }}>
                  Private Wealth · Est. 1978
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 80, paddingTop: 24,
          borderTop: '1px solid rgba(240, 234, 219, 0.2)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'rgba(240, 234, 219, 0.4)',
        }}>
          <span>End of Phase 01</span>
          <span>✦</span>
          <span>Three directions delivered</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ClosingSpread });