const contentsStyles = {
  wrap: { padding: '100px 0', background: 'var(--paper)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' },
  head: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48, flexWrap: 'wrap', gap: 24 },
  title: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 'clamp(36px, 4.8vw, 64px)', lineHeight: 1, color: 'var(--ink)', letterSpacing: '-0.03em' },
  meta: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)' },

  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' },
  cell: {
    padding: '28px 24px',
    borderRight: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
    display: 'flex', flexDirection: 'column', gap: 8,
    textDecoration: 'none', color: 'var(--ink)',
    transition: 'background .2s ease',
    minHeight: 150,
    justifyContent: 'space-between',
  },
  cellTop: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 },
  cellKicker: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--muted)', whiteSpace: 'nowrap' },
  cellArrow: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontSize: 22, color: 'var(--pink)', lineHeight: 1 },
  cellName: { fontFamily: 'Plus Jakarta Sans, sans-serif', fontWeight: 800, fontSize: 22, color: 'var(--ink)', letterSpacing: '-0.02em', marginTop: 8 },
  cellDesc: { fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 },
};

const TOC = [
  { kicker: '01', name: 'Why Dream exists', desc: 'The mission and the vision', href: '#manifesto' },
  { kicker: '02', name: 'The companies', desc: 'Eight companies, one ecosystem', href: '#companies' },
  { kicker: '03', name: 'HelpBnk · up close', desc: 'The platform we\'re building first', href: '#helpbnk' },
  { kicker: '04', name: 'The co-founder', desc: 'Simon Squibb', href: '#simon' },
  { kicker: '05', name: 'DreamMedia', desc: 'The content engine behind the audience', href: '#dream-media' },
  { kicker: '06', name: 'DreamBrew', desc: 'A dream in every can', href: '#dreambrew' },
  { kicker: '07', name: 'DreamVentures', desc: 'The companies we back', href: '#ventures' },
  { kicker: '08', name: 'DreamData', desc: '600k+ entrepreneurs we know', href: '#database' },
  { kicker: '09', name: 'Dreams realised', desc: 'Stories from the community', href: '#stories' },
  { kicker: '10', name: 'The team', desc: 'The people building Dream', href: '#team' },
];

function Contents() {
  return (
    <section id="contents" style={contentsStyles.wrap}>
      <div className="container">
        <div style={contentsStyles.head}>
          <h2 style={contentsStyles.title}>What's inside.</h2>
          <span style={contentsStyles.meta}>● A complete overview of the Dream Group</span>
        </div>

        <div style={contentsStyles.grid} className="toc-grid">
          {TOC.map((row, i) => (
            <a key={i} href={row.href} style={contentsStyles.cell} className="toc-cell">
              <div style={contentsStyles.cellTop}>
                <span style={contentsStyles.cellKicker}>● {row.kicker}</span>
                <span style={contentsStyles.cellArrow}>→</span>
              </div>
              <div>
                <div style={contentsStyles.cellName}>{row.name}</div>
                <div style={contentsStyles.cellDesc}>{row.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .toc-cell:hover { background: rgba(255,214,10,.18); }
        @media (max-width: 880px) { .toc-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) {
          .toc-grid { grid-template-columns: 1fr !important; }
          /* collapse the tall space-between gap once cells are full-width */
          .toc-cell { min-height: auto !important; gap: 14px !important; padding: 22px 20px !important; }
        }
      `}</style>
    </section>
  );
}