// 05 Works (LP mini) — 抜粋4本のみ。詳細は works/ ページへ。
function Works() {
  const items = [
    { year: '2024',   place: '都内',   title: '音楽 × 防災イベント（さいぼうさい）' },
    { year: '継続',   place: '研究',   title: 'SOUBI / ごとうち贈備食 — 贈ることから始まる備え' },
    { year: '2025',   place: '和歌山', title: 'すさみアートギャラリー展示 — すさみからまなぶ 都市の防災' },
    { year: '2024',   place: '都内',   title: '信頼できる人たちをつなぐ実験イベント' },
  ];

  return (
    <section className="s" id="works">
      <div className="reveal" style={{ marginBottom: 56 }}>
        <div className="sect-mark" style={{ marginBottom: 24 }}>
          <span>06 / Works</span><span className="bar" /><span>Selected</span>
        </div>
        <div className="hd" style={{ fontSize: 'clamp(24px, 2.8vw, 40px)', fontWeight: 700 }}>これまでの活動。</div>
        <div style={{ marginTop: 24, fontSize: 15, lineHeight: 2.0, color: 'var(--ink-soft)', maxWidth: 600 }}>
          CONENを立ち上げる前から、わたしは個人として、<br />
          防災・コミュニティ・デザインの現場で実践を重ねてきました。<br />
          ここに並ぶのは、その探究の記録の一部です。
        </div>
      </div>

      <div className="reveal delay-2" style={{ borderTop: '0.5px solid var(--rule)' }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '80px 80px 1fr 40px',
            gap: 24,
            padding: '26px 0',
            borderBottom: '0.5px solid var(--rule-soft)',
            alignItems: 'baseline',
          }}>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.08em' }}>{it.year}</span>
            <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>{it.place}</span>
            <span style={{ fontSize: 16, color: 'var(--ink)', lineHeight: 1.7 }}>{it.title}</span>
            <span style={{ textAlign: 'right', color: 'var(--ink-faint)' }}>—</span>
          </div>
        ))}
      </div>

      <div className="reveal delay-3" style={{ marginTop: 48, display: 'flex', justifyContent: 'flex-end' }}>
        <a href="works/" className="cta ghost hot">活動の一覧を見る</a>
      </div>
    </section>
  );
}
window.Works = Works;