// Contents spread — typographic table of contents.
// Chapter list with dot leaders and folio numbers.

function ContentsSpread() {
  const entries = [
    { num: '00', roman: '—', title: 'Foreword', sub: 'On building a house of words', folio: '04', section: 'Prelude' },
    { num: '01', roman: 'I',   title: 'The Archive',  sub: 'Editorial, literary, restrained',       folio: '08', section: 'Directions', status: 'Built', href: 'the-archive.html' },
    { num: '02', roman: 'II',  title: 'The Ledger',   sub: 'Institutional, architectural, precise', folio: '22', section: 'Directions', status: 'Built', href: 'the-ledger.html' },
    { num: '03', roman: 'III', title: 'The Almanac',  sub: 'Modern-classical, editorial, warm',     folio: '36', section: 'Directions', status: 'Built', href: 'the-almanac.html' },
    { num: '04', roman: '—', title: 'Colophon', sub: 'Credits and acknowledgements', folio: '50', section: 'Close' },
  ];

  return (
    <div className="paper-bg" style={{
      minHeight: '100vh',
      padding: 'clamp(60px, 8vw, 140px) clamp(32px, 6vw, 120px)',
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      borderTop: '1px solid var(--rule-soft)',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
        letterSpacing: '0.25em', textTransform: 'uppercase',
        color: 'var(--ink-mute)',
        marginBottom: 60,
        borderBottom: '1px solid var(--rule-soft)',
        paddingBottom: 16,
      }}>
        <span>§ 00.I — Contents</span>
        <span>Page 06</span>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto', width: '100%' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'var(--walnut)', marginBottom: 24,
        }}>
          Contents
        </div>
        <div style={{
          fontFamily: 'Fraunces, serif',
          fontSize: 'clamp(40px, 5vw, 80px)',
          lineHeight: 0.95, letterSpacing: '-0.025em',
          fontWeight: 400,
          marginBottom: 60,
        }}>
          Five chapters, <span style={{ fontStyle: 'italic' }}>in order.</span>
        </div>

        {/* table */}
        <div>
          {entries.map((e, i) => {
            const prev = entries[i - 1];
            const newSection = !prev || prev.section !== e.section;
            return (
              <React.Fragment key={e.num}>
                {newSection && (
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 16,
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    letterSpacing: '0.3em', textTransform: 'uppercase',
                    color: 'var(--ink-mute)',
                    marginTop: i === 0 ? 0 : 28, marginBottom: 8,
                  }}>
                    <span>{e.section}</span>
                    <span style={{ flex: 1, height: 1, background: 'var(--rule-soft)' }} />
                  </div>
                )}
                <a
                  href={e.href || '#'}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr auto 60px',
                    gap: 24,
                    alignItems: 'baseline',
                    padding: '22px 0',
                    borderBottom: '1px solid var(--rule-soft)',
                    textDecoration: 'none',
                    color: 'inherit',
                    cursor: e.href ? 'pointer' : 'default',
                    transition: 'background-color 160ms ease',
                  }}
                  onMouseEnter={ev => { if (e.href) ev.currentTarget.style.backgroundColor = 'rgba(107, 90, 62, 0.06)'; }}
                  onMouseLeave={ev => { ev.currentTarget.style.backgroundColor = 'transparent'; }}
                  onClick={ev => { if (!e.href) ev.preventDefault(); }}
                >
                  <div style={{
                    fontFamily: 'Fraunces, serif', fontStyle: 'italic',
                    fontSize: 26, color: 'var(--walnut)',
                  }}>
                    {e.roman}
                  </div>
                  <div>
                    <div style={{
                      fontFamily: 'Fraunces, serif', fontSize: 'clamp(22px, 2.2vw, 32px)',
                      letterSpacing: '-0.01em', marginBottom: 2, color: 'var(--ink)',
                    }}>
                      {e.title}
                      {e.status && (
                        <span style={{
                          fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                          letterSpacing: '0.25em', textTransform: 'uppercase',
                          color: e.status === 'Built' ? 'var(--harbour)' : 'var(--walnut)',
                          marginLeft: 16, verticalAlign: 'middle',
                          border: `1px solid ${e.status === 'Built' ? 'var(--harbour)' : 'var(--walnut)'}`,
                          padding: '3px 8px', borderRadius: 1,
                        }}>
                          {e.status}
                        </span>
                      )}
                    </div>
                    <div style={{
                      fontFamily: 'Fraunces, serif', fontStyle: 'italic',
                      fontSize: 15, color: 'var(--ink-soft)',
                    }}>
                      {e.sub}
                    </div>
                  </div>
                  <div style={{
                    flex: 1, borderTop: '1px dotted var(--rule)',
                    alignSelf: 'center', height: 1,
                    minWidth: 60,
                  }} />
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
                    color: 'var(--ink-soft)', textAlign: 'right',
                  }}>
                    {e.folio}
                  </div>
                </a>
              </React.Fragment>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ContentsSpread });