function News() {
  useReveal();
  const items = [
    { date: '2026.04.12', cat: 'PRODUCT', title: 'KURA Analytics v3.0 リリース — リアルタイム異常検知機能を追加' },
    { date: '2026.03.28', cat: 'AWARD', title: '日経SaaS Award 2026 ベストプロダクト部門を受賞しました' },
    { date: '2026.03.14', cat: 'CASE', title: '三菱地所向け FM-Suite v2 を本番リリース — 全国12,000件の物件を一元管理' },
    { date: '2026.02.20', cat: 'HIRING', title: '2026年度 春期インターンシップの募集を開始しました' },
    { date: '2026.02.05', cat: 'EVENT', title: 'TypeScript Tokyo Meetup #28 で弊社CTOが登壇します（5/22）' },
    { date: '2026.01.18', cat: 'CASE', title: '地域電力会社向け設備点検モバイルアプリ、現場採用率94%を達成' },
    { date: '2025.12.03', cat: 'PRODUCT', title: '新プロダクト「揺 / Yure」β提供を開始 — SREチーム向け異常観測SaaS' },
  ];
  return (
    <section id="news">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">11</span>NEWS & INSIGHTS — お知らせ</p>
          <h2 className="h-section">最近の、<br/>動き。</h2>
          <div className="meta-row">
            <span className="mono small">/ 最新7件 / <a href="#" style={{ color: 'var(--shu)' }}>全件を見る →</a></span>
            <span className="mono small">2026</span>
          </div>
        </div>
        <div className="news-grid reveal">
          {items.map((n, i) => (
            <div className="news-item" key={i}>
              <div className="n-date">{n.date}</div>
              <div className="n-category">{n.cat}</div>
              <div className="n-title">{n.title}</div>
              <div className="n-arrow">↗</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { News });