// "What is Commonwork Lab?" — a quiet, two-column manifesto block.

const WhatIsLab = () => {
  const principles = [
    {
      n: '01',
      title: 'In the open',
      body: 'Half-finished things are published next to finished ones. The work is the record.',
    },
    {
      n: '02',
      title: 'Slow rewrites',
      body: 'Most projects here are on their second or third version. Improvement is the point.',
    },
    {
      n: '03',
      title: 'Plain materials',
      body: 'Plain text, hairlines, paper, time. Tools chosen for how well they\'ll age.',
    },
  ];

  return (
    <section id="lab" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ The lab</Eyebrow>
          <div>
            <h2>What is <em>Commonwork Lab</em>?</h2>
          </div>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 80,
          alignItems: 'start',
        }}>
          {/* Left: prose */}
          <div>
            <p style={{
              fontFamily: 'var(--font-display)',
              fontWeight: 400,
              fontSize: 26,
              lineHeight: 1.35,
              letterSpacing: '-0.005em',
              color: 'var(--ink)',
              margin: '0 0 22px',
              textWrap: 'balance',
              maxWidth: '24ch',
            }}>
              A working notebook for one person's investigations into
              <em style={{ fontStyle: 'italic' }}> how to live and work better.</em>
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', margin: '0 0 16px', maxWidth: '52ch' }}>
              I reframe the ordinary — kitchens, calendars, inboxes, routines — as
              infrastructure worth designing. Each project is a small experiment with a clear
              question, a built thing, and a written record of what changed.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', margin: 0, maxWidth: '52ch' }}>
              Nothing here is for sale. It's a public field notebook — useful, mostly, to
              people building intentional lives and careers in adjacent corners.
            </p>
          </div>

          {/* Right: principles */}
          <div>
            <Eyebrow style={{ marginBottom: 18 }}>Operating principles</Eyebrow>
            <ol style={{ display: 'grid', gap: 0, borderTop: '1px solid var(--rule)' }}>
              {principles.map((p) => (
                <li key={p.n} style={{
                  display: 'grid',
                  gridTemplateColumns: '56px 1fr',
                  gap: 18,
                  padding: '18px 0',
                  borderBottom: '1px solid var(--rule)',
                  alignItems: 'baseline',
                }}>
                  <span className="meta" style={{ color: 'var(--ink-3)', fontWeight: 500 }}>{p.n}</span>
                  <div>
                    <div style={{
                      fontFamily: 'var(--font-display)', fontStyle: 'italic',
                      fontSize: 22, color: 'var(--ink)', lineHeight: 1.2, marginBottom: 4,
                    }}>
                      {p.title}
                    </div>
                    <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.55, maxWidth: '36ch' }}>
                      {p.body}
                    </div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
};

window.WhatIsLab = WhatIsLab;