// Cover spread — full-bleed hero with overlaid wordmark & crest.
// This is the book's title page.

function CoverSpread() {
  return (
    <div style={{
      position: 'relative', minHeight: '100vh', width: '100%',
      background: '#0b0805',
      color: 'var(--paper)',
      overflow: 'hidden',
      paddingTop: 40,
    }}>
      {/* hero image — library */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url("assets/hero-main.webp")',
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        opacity: 0.55,
      }} />
      {/* subtle vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 0%, rgba(11,8,5,0.6) 100%)',
      }} />

      {/* content grid */}
      <div style={{
        position: 'relative', zIndex: 2,
        minHeight: 'calc(100vh - 40px)',
        padding: 'clamp(32px, 5vw, 80px)',
        display: 'grid',
        gridTemplateRows: 'auto 1fr auto',
        gap: 40,
      }}>
        {/* top meta row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'rgba(240, 234, 219, 0.7)',
        }}>
          <div>
            <div style={{ marginBottom: 6 }}>№ 01 / 03</div>
            <div>Brand Direction Exploration</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ marginBottom: 6 }}>Private Circulation</div>
            <div>For Review · April MMXXVI</div>
          </div>
        </div>

        {/* title block — bottom-aligned hero type */}
        <div style={{ alignSelf: 'end', maxWidth: 1100 }}>
          <img
            src="assets/logo-crest.png"
            alt="Noble Rock crest"
            style={{
              width: 'clamp(80px, 9vw, 130px)',
              height: 'auto',
              filter: 'brightness(0) invert(1)',
              opacity: 0.85,
              marginBottom: 'clamp(24px, 4vw, 48px)',
            }}
          />
          <div style={{
            fontFamily: 'Fraunces, serif',
            fontSize: 'clamp(48px, 9vw, 148px)',
            lineHeight: 0.92,
            letterSpacing: '-0.035em',
            fontWeight: 300,
            color: 'var(--paper)',
            marginBottom: 24,
          }}>
            Three ways<br/>
            <span style={{ fontStyle: 'italic', fontWeight: 300 }}>to build</span> a<br/>
            brand book.
          </div>
          <div style={{
            width: 80, height: 1, background: 'rgba(240, 234, 219, 0.5)',
            marginBottom: 24,
          }} />
          <div style={{
            fontFamily: 'Fraunces, serif',
            fontSize: 'clamp(16px, 1.5vw, 20px)',
            fontStyle: 'italic',
            color: 'rgba(240, 234, 219, 0.82)',
            maxWidth: 540, lineHeight: 1.45,
          }}>
            Three stylistic directions for the Noble Rock
            guidelines, each an interpretation of modern-classical,
            quietly confident, warm.
          </div>
        </div>

        {/* bottom meta */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'end',
          borderTop: '1px solid rgba(240, 234, 219, 0.25)',
          paddingTop: 20,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'rgba(240, 234, 219, 0.6)',
        }}>
          <span>Noble Rock Partners</span>
          <span style={{
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'Fraunces, serif', fontStyle: 'italic',
            fontSize: 13, letterSpacing: 0, textTransform: 'none',
            color: 'rgba(240, 234, 219, 0.8)',
          }}>
            <span style={{ width: 24, height: 1, background: 'rgba(240, 234, 219, 0.4)' }} />
            Scroll to begin
            <span style={{ width: 24, height: 1, background: 'rgba(240, 234, 219, 0.4)' }} />
          </span>
          <span>Est. 1978 · Sydney</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CoverSpread });