// Writing — placeholder posts to seed authority
const POSTS = [
  {
    date: 'apr · 2026',
    cat: 'time back',
    title: 'the cheapest automation is the one you didn\'t need',
    read: '4 min',
  },
  {
    date: 'apr · 2026',
    cat: 'websites',
    title: 'why a one-page site beats a fancy ten-page one',
    read: '6 min',
  },
  {
    date: 'mar · 2026',
    cat: 'getting clients',
    title: 'twelve emails a day, real replies, zero spam',
    read: '8 min',
  },
];

function Writing() {
  return (
    <section id="writing" className="section">
      <SectionHead
        id="from.the.studio"
        kicker="the field notes"
        title='what i’ve learned<br/><span class="italic-em">building this stuff.</span>'
        lede="short, honest essays about what works, what doesn’t, and the mistakes i’d save you from making."
      />

      <div className="container">
        <div style={{ display: 'grid', gap: 0 }}>
          {POSTS.map((p, i) => (
            <Reveal key={p.title} delay={(i % 3) + 1}>
              <PostRow p={p} last={i === POSTS.length - 1}/>
            </Reveal>
          ))}
        </div>

        <div style={{ marginTop: 40, textAlign: 'center' }}>
          <span className="btn btn--ghost" style={{ cursor: 'default', opacity: 0.6 }}>read all posts (coming soon)</span>
        </div>
      </div>
    </section>
  );
}

function PostRow({ p, last }) {
  return (
    <div className="post-grid" style={{
      display: 'grid',
      gridTemplateColumns: '120px 100px 1fr 80px 80px',
      gap: 24,
      padding: '28px 0',
      alignItems: 'center',
      borderTop: '1px solid var(--line-2)',
      borderBottom: last ? '1px solid var(--line-2)' : 'none',
      opacity: 0.7,
    }}>
      <span className="mono post-date" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{p.date}</span>
      <span className="pill">{p.cat}</span>
      <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.15, letterSpacing: '-0.02em', margin: 0, fontWeight: 400, textWrap: 'balance' }}>
        {p.title}
      </h3>
      <span className="mono post-read" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{p.read}</span>
      <span className="mono" style={{ fontSize: 10, color: 'var(--accent)', fontWeight: 600, letterSpacing: '0.04em' }}>soon</span>
    </div>
  );
}

Object.assign(window, { Writing });