/* お知らせページ（ログイン不要・公開） */

const NEWS_DATA = [
  {
    date: "2026.08.16",
    category: "content", // content / maintenance / info
    title: "配当株投資コースを追加しました",
    body: "応用コースに「配当株投資コース」（全5レッスン）を追加しました。配当の基礎から銘柄選定、暴落対応、実践ステップまで学べます。",
  },
  {
    date: "2026.08.16",
    category: "content",
    title: "投資スタイル診断に配当株投資を追加",
    body: "投資スタイル診断の対象に「配当株投資」を8つ目の投資法として追加しました。あなたに合った投資スタイルを診断してみましょう。",
  },
  {
    date: "2026.08.14",
    category: "info",
    title: "サービス正式ローンチ",
    body: "株次郎は本日より正式にサービスを開始しました。月額1,480円で基礎から応用まで、株式投資を体系的に学ぶことができます。",
  },
  {
    date: "2026.08.13",
    category: "content",
    title: "決算短信の読み方・株の買い付け方ガイドを追加",
    body: "「始め方・準備」セクションに、トヨタの決算短信を使った実践的な読み方ガイドと、SBI証券・楽天証券での買い付け方ガイドを追加しました。",
  },
  {
    date: "2026.08.04",
    category: "content",
    title: "特定商取引法に基づく表記ページを公開",
    body: "法令に基づき、特定商取引法に基づく表記ページを公開しました。",
  },
];

const NEWS_CATEGORIES = [
  { key: "all",         label: "全て" },
  { key: "content",     label: "コンテンツ更新" },
  { key: "maintenance", label: "メンテナンス" },
  { key: "info",        label: "お知らせ" },
];

const NEWS_CATEGORY_META = {
  content:     { label: "コンテンツ更新", dot: "🟢", cls: "news-badge-content" },
  maintenance: { label: "メンテナンス",   dot: "🟡", cls: "news-badge-maintenance" },
  info:        { label: "お知らせ",       dot: "🔵", cls: "news-badge-info" },
};

function NewsPage({ nav }) {
  const [activeCategory, setActiveCategory] = React.useState("all");

  const filtered = activeCategory === "all"
    ? NEWS_DATA
    : NEWS_DATA.filter(n => n.category === activeCategory);

  return (
    <>
      <style>{`
        .news-main {
          padding: 32px 28px 80px;
          max-width: 860px;
        }
        .news-page-header {
          margin-bottom: 24px;
        }
        .news-page-header h1 {
          font-size: 22px;
          font-weight: 900;
          color: var(--navy-900);
          margin: 0 0 8px;
        }
        .news-page-header p {
          font-size: 14px;
          color: var(--ink-500);
          margin: 0;
          line-height: 1.6;
        }
        .news-tabs {
          display: flex;
          gap: 8px;
          overflow-x: auto;
          margin-bottom: 24px;
          padding-bottom: 4px;
        }
        .news-tab {
          flex-shrink: 0;
          background: var(--white);
          color: var(--ink-500);
          border: 1.5px solid var(--navy-100);
          font-size: 13px;
          font-weight: 700;
          padding: 8px 16px;
          border-radius: 99px;
          cursor: pointer;
          transition: background .15s, color .15s, border-color .15s;
          white-space: nowrap;
        }
        .news-tab:hover { border-color: var(--navy-300); }
        .news-tab.active {
          background: var(--navy-900);
          color: #fff;
          border-color: var(--navy-900);
        }
        .news-list {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .news-card {
          background: var(--white);
          border-radius: var(--radius-md);
          box-shadow: var(--shadow-md);
          padding: 20px 22px;
          border: 1.5px solid transparent;
        }
        .news-card-top {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 10px;
        }
        .news-badge {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 11px;
          font-weight: 700;
          padding: 3px 10px;
          border-radius: 99px;
        }
        .news-badge-content     { background: var(--green-50, #f0fdf4); color: var(--green-700, #15803d); }
        .news-badge-maintenance { background: #FFF8E1; color: #B45309; }
        .news-badge-info        { background: #EFF6FF; color: #1D4ED8; }
        .news-date {
          font-size: 12px;
          color: var(--ink-300);
          margin-left: auto;
        }
        .news-card-title {
          font-size: 15.5px;
          font-weight: 800;
          color: var(--navy-900);
          margin: 0 0 8px;
          line-height: 1.5;
        }
        .news-card-body {
          font-size: 13px;
          color: var(--ink-700);
          line-height: 1.75;
          margin: 0;
        }
        .news-empty {
          text-align: center;
          padding: 60px 20px;
          color: var(--ink-300);
          font-size: 14px;
        }
        @media (max-width: 600px) {
          .news-main { padding: 20px 16px 80px; }
          .news-card { padding: 16px; }
        }
      `}</style>

      <main className="main news-main">
        <div className="news-page-header">
          <h1>📢 お知らせ</h1>
          <p>コンテンツ追加・メンテナンス・サービスに関するお知らせをまとめています。</p>
        </div>

        <div className="news-tabs">
          {NEWS_CATEGORIES.map(c => (
            <button
              key={c.key}
              className={`news-tab ${activeCategory === c.key ? "active" : ""}`}
              onClick={() => setActiveCategory(c.key)}
            >
              {c.label}
            </button>
          ))}
        </div>

        {filtered.length === 0 ? (
          <div className="news-empty">該当するお知らせはありません。</div>
        ) : (
          <div className="news-list">
            {filtered.map((n, i) => {
              const meta = NEWS_CATEGORY_META[n.category] || NEWS_CATEGORY_META.info;
              return (
                <div key={i} className="news-card">
                  <div className="news-card-top">
                    <span className={`news-badge ${meta.cls}`}>{meta.dot} {meta.label}</span>
                    <span className="news-date">{n.date}</span>
                  </div>
                  <h2 className="news-card-title">{n.title}</h2>
                  <p className="news-card-body">{n.body}</p>
                </div>
              );
            })}
          </div>
        )}
      </main>
    </>
  );
}

window.NewsPage = NewsPage;