// footer-news.jsx
function News() {
  return (
    <section className="news" id="news">
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 60, alignItems: 'start' }}>
        <SectionHeader label="◤ NEWS" title={<>お知らせ</>} subtitle="新商品・大会・メディア情報などをお届けします。" />
        <div className="news-list">
          {window.NEWS_ITEMS.map((n, i) =>
          <div key={i} className="news-item">
              <span className="news-date">{n.date}</span>
              <span className="news-cat">{n.cat}</span>
              <span className="news-title">{n.title}</span>
            </div>
          )}
          <div style={{ textAlign: 'right', marginTop: 20 }}>
            <a href="#" style={{ fontFamily: 'Zen Antique', fontSize: 14, color: 'var(--ink)' }}>すべてのお知らせ →</a>
          </div>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div>
          <img src="assets/logo.png" alt="" style={{ width: 200, marginBottom: 16, filter: 'drop-shadow(3px 3px 0 rgba(0,0,0,0.3))' }} />
          <p style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', maxWidth: 320 }}>遊び・知り・守る。<br />生態系ウォーズは、絶滅危惧種と固有種の保全を応援するトレーディングカードゲームです。</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            {['X', 'IG', 'YT', 'LN'].map((s) =>
            <div key={s} style={{ width: 38, height: 38, border: '2px solid var(--accent-yellow)', borderRadius: 8, display: 'grid', placeItems: 'center', color: 'var(--accent-yellow)', fontFamily: 'Zen Antique', fontSize: 12 }}>{s}</div>
            )}
          </div>
        </div>
        <div>
          <h5>ゲーム</h5>
          <a href="#gameplay">あそびかた</a>
          <a href="#gallery">カード図鑑</a>
          <a href="#lineup">商品ラインナップ (ECへ)</a>
          <a href="#">ルールブック（PDF）</a>
        </div>
        <div>
          <h5>コミュニティ</h5>
          <a href="#events">大会・体験会</a>
          <a href="#"></a>
          <a href="#"></a>
          <a href="#">ジャッジ認定制度</a>
        </div>
        <div>
          <h5>運営</h5>
          <a href="#story">(開発ストーリー)</a>
          <a href="#"></a>
          <a href="#">(寄付レポート)</a>
          <a href="#">お問い合わせ</a>
        </div>
      </div>
      <div className="footer-copy">© 2026 生態系ウォーズ製作委員会 ／ All illustrations are for illustrative purposes (placeholder).</div>
    </footer>);

}
Object.assign(window, { News, Footer });