// ─────────────────────────────────────────────────────────
//  Writing — essay teasers
// ─────────────────────────────────────────────────────────

const ESSAYS = [
  {
    id:'400ms',
    cat:'Performance · Essay 01',
    read:'7 min',
    title:'Why premium sites bleed leads in the first 400 milliseconds.',
    desc:'A breakdown of the TTFB-to-conversion link no one talks about — and the three architectural moves that fix it.',
    date:'May 2026',
  },
  {
    id:'47',
    cat:'Operator essay · 02',
    read:'12 min',
    title:'The 47-build playbook: what shipping fast taught us.',
    desc:'Notes from a year of running a one-operator studio at agency pace — without burnout, without compromise.',
    date:'April 2026',
  },
  {
    id:'n8n',
    cat:'Systems · 03',
    read:'9 min',
    title:'n8n for the rest of us: lead workflows that don\u2019t need an engineer.',
    desc:'How to design self-healing lead capture flows that survive outages, route by intent, and ping you in three seconds.',
    date:'March 2026',
  },
];

function Writing() {
  return (
    <section className="section shell" data-screen-label="Writing">
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
        <div>
          <div className="kicker">§Writing · Studio essays</div>
          <h2 style={{
            fontFamily:'var(--serif)', fontWeight:400,
            fontSize:'clamp(40px, 5vw, 76px)', lineHeight:1.0,
            letterSpacing:'-0.02em', margin:'18px 0 0', maxWidth:'20ch',
            textWrap:'balance',
          }}>
            Field notes,<br/>
            <span style={{fontStyle:'italic', color:'var(--accent)'}}>not whitepapers.</span>
          </h2>
        </div>
        <div style={{
          fontFamily:'var(--mono)', fontSize:11,
          letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)',
          textAlign:'right',
        }}>
          Newsletter · 2,400 subs<br/>
          One essay / month
        </div>
      </div>

      <div className="writing-grid">
        {ESSAYS.map(e => (
          <a key={e.id} href={`essays/${e.id}.html`} className="essay magnetic-trigger">
            <div className="essay-meta">
              <span>{e.cat}</span>
              <span className="read">{e.read} read</span>
            </div>
            <h4>{e.title}</h4>
            <p>{e.desc}</p>
            <div className="essay-arrow">Read essay <span>→</span></div>
          </a>
        ))}
      </div>
    </section>
  );
}

window.Writing = Writing;