function News() {
  const items = [
    { d: '2026-04-24', t: '新コーポレートサイト zunoworks.ai を公開',             l: null },
    { d: '2026-04-22', t: 'GateGuard v0.4.0 を PyPI に公開',                      l: 'https://pypi.org/project/gateguard-ai/', ext: true },
    { d: '2026-04-20', t: 'everything-claude-code (159K★) に公式 merge',          l: 'https://github.com/affaan-m/everything-claude-code', ext: true },
    { d: '2024-07-01', t: '株式会社ズノーワークス 設立',                          l: null },
  ];
  return (
    <section id="news" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">News</div>
          <h2 className="section-title"><span className="en">Recent Updates</span>お知らせ</h2>
          <span/>
        </div>
        <div className="blog-list">
          {items.map((it, i) => {
            const inner = (
              <>
                <div className="date">{it.d}</div>
                <div><h4 style={{margin:0}}>{it.t}</h4></div>
                <span className="arrow">{it.l ? '→' : ''}</span>
              </>
            );
            return it.l ? (
              <a key={i} href={it.l} target={it.ext ? '_blank' : undefined} rel={it.ext ? 'noopener noreferrer' : undefined} className="post" style={{textDecoration:'none', color:'inherit'}}>
                {inner}
              </a>
            ) : (
              <div key={i} className="post" style={{cursor:'default'}}>
                {inner}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.News = News;