/* global React, FadeUp, SectionHead, SP_DATA */

function News() {
  const list = SP_DATA.NEWS;
  return (
    <FadeUp className="section" id="news">
      <SectionHead
        eyebrow="// 體育新聞"
        title="體育新聞與分析"
        sub="編輯部精選 + AI 自動摘要，每日更新"
        right={<button className="btn btn-ghost">查看全部 →</button>}
      />
      <div className="news-grid">
        {list.map((n, i) => (
          <article key={i} className={`news-card ${n.featured ? "featured" : ""}`}>
            <div className="thumb">
              <div className={`ph ${n.color || ""}`}>{n.tag.toUpperCase()}</div>
            </div>
            <div className="body">
              <div className="meta">
                <span>{n.tag}</span>
                <span style={{color:'var(--fg-3)'}}>·</span>
                <span>{n.date}</span>
              </div>
              <h3 className="title">{n.title}</h3>
              <p className="excerpt">{n.excerpt}</p>
            </div>
          </article>
        ))}
      </div>
    </FadeUp>
  );
}

window.News = News;