// footer-news.jsx
const NEWS_CAT_CLASS = {
  '大会': 'cat-event',
  'ジム戦': 'cat-event',
  'イベント': 'cat-event',
  '出展': 'cat-event',
  '商品': 'cat-product',
  'グッズ': 'cat-product',
  'リリース': 'cat-release',
  'メディア': 'cat-media',
  '寄付': 'cat-info',
  '保全活動': 'cat-info',
  'お知らせ': 'cat-info'
};

function News() {
  const items = (window.NEWS_ITEMS || []).slice(0, 5);
  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>
          <div className="news-list">
            {items.map((n, i) =>
            <a key={i} href={n.url || '#'} {...n.url ? { target: '_blank', rel: 'noopener noreferrer' } : { onClick: (e) => e.preventDefault() }} className={`news-item ${n.url ? '' : 'is-static'}`}>
                <span className="news-date">{n.date}</span>
                <span className={`news-cat ${NEWS_CAT_CLASS[n.cat] || 'cat-info'}`}>{n.cat}</span>
                <span className="news-title">{n.title}</span>
              </a>
            )}
          </div>
          <div className="news-more">
            <a href="News.html" style={{ fontFamily: "\"Zen Kaku Gothic New\"" }}>すべてのお知らせを見る →</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 }}>
            <a href="https://x.com/ecosystem_wars" target="_blank" rel="noopener noreferrer" 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, textDecoration: 'none' }} aria-label="X (Twitter)">X</a>
            <a href="https://lin.ee/yz0KiEf" target="_blank" rel="noopener noreferrer" 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, textDecoration: 'none' }} aria-label="LINE">LN</a>
          </div>
        </div>
        <div>
          <h5>ゲーム</h5>
          <a href="#gameplay">あそびかた</a>
          <a href="#gallery">カード図鑑</a>
          <a href="https://ecosystem.buyshop.jp/" target="_blank" rel="noopener noreferrer">商品ラインナップ (ECへ)</a>
          <a href="https://speakerdeck.com/yui_itoshima/hatumeinoha-hisinesukontesuto" target="_blank" rel="noopener noreferrer">ルールブック（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="https://lin.ee/yz0KiEf" target="_blank" rel="noopener noreferrer">お問い合わせ（公式LINE）</a>
        </div>
      </div>
      <div className="footer-copy">© 2026 生態系ウォーズ製作委員会 ／ All illustrations are for illustrative purposes (placeholder).</div>
    </footer>);

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