// バリエーションC: ニュース速報風 (情報密度MAX・ターミナル系)

function VariationC({ activeCategory, setActiveCategory }) {
  const data = useData();
  const articles = activeCategory === "all" ? data.articles : data.articles.filter((a) => a.cat === activeCategory);

  return (
    <div style={{ background: "#0d1420", color: "#d4d8e0", fontFamily: "var(--sans)", minHeight: "100%" }}>
      {/* Top status bar */}
      <div style={{ background: "#070b13", borderBottom: "1px solid #1a2538", padding: "6px 0", fontFamily: "var(--mono)", fontSize: 11 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "flex", gap: 24, alignItems: "center", color: "#7a89a3" }}>
          <span style={{ color: "#10b981" }}>● ONLINE</span>
          <span>SYS:OPS-3</span>
          <span>UPLINK:OK</span>
          <span style={{ marginLeft: "auto" }}>JST {new Date().toLocaleTimeString("ja-JP")}</span>
          <span>UTC {new Date().toUTCString().slice(17, 25)}</span>
          <span>DEFCON-MON ▒▒▒▒▓ 4</span>
        </div>
      </div>

      {/* Header */}
      <header style={{ background: "#0a111d", borderBottom: "2px solid #1f2d44" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px 24px", display: "flex", alignItems: "center", gap: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{ width: 42, height: 42, border: "2px solid #c5a572", color: "#c5a572", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)", fontSize: 16, fontWeight: 700 }}>M.S</div>
            <div>
              <div style={{ fontFamily: "var(--mono)", fontSize: 20, fontWeight: 700, color: "#fff", letterSpacing: ".12em" }}>
                {data.siteName}<span style={{ color: "#c5a572" }}>_</span>
              </div>
              <div style={{ fontSize: 10, color: "#7a89a3", letterSpacing: ".25em", fontFamily: "var(--mono)" }}>
                {data.siteNameEn} // INTEL FEED v2.6.1
              </div>
            </div>
          </div>
          <div style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
            <input placeholder="> SEARCH INTEL_" style={{
              background: "#070b13", border: "1px solid #1f2d44", color: "#d4d8e0",
              padding: "8px 12px", fontFamily: "var(--mono)", fontSize: 12, width: 260, outline: "none",
            }} />
            <button style={{ background: "#c5a572", color: "#0a111d", border: "none", padding: "8px 14px", fontFamily: "var(--mono)", fontSize: 12, fontWeight: 700, cursor: "pointer" }}>EXEC</button>
          </div>
        </div>
        {/* Category tabs */}
        <div style={{ borderTop: "1px solid #1f2d44", background: "#070b13" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "flex", overflowX: "auto" }}>
            <button onClick={() => setActiveCategory("all")} style={termTabStyle(activeCategory === "all")}>
              [ALL] <span style={{ opacity: .6 }}>{data.articles.length}</span>
            </button>
            {data.categories.map((c) => (
              <button key={c.slug} onClick={() => setActiveCategory(c.slug)} style={termTabStyle(activeCategory === c.slug)}>
                [{c.slug.toUpperCase()}] {c.name} <span style={{ opacity: .6 }}>{c.count}</span>
              </button>
            ))}
          </div>
        </div>
      </header>

      {/* Ticker */}
      <div style={{ background: "#1a0f10", borderBottom: "1px solid #3a1414", padding: "7px 0", overflow: "hidden" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "flex", alignItems: "center", gap: 14, fontFamily: "var(--mono)", fontSize: 12 }}>
          <span style={{ color: "#fca5a5", fontWeight: 700, letterSpacing: ".2em", padding: "2px 8px", border: "1px solid #fca5a5" }}>FLASH</span>
          <span style={{ color: "#fca5a5" }}>14:32 [DPRK] 火星19 発射 / ALT 6,200km / DIST 1,100km</span>
          <span style={{ color: "#7a89a3" }}>▸</span>
          <span>13:08 [JMSDF] FFM-5 やはぎ 就役確認</span>
          <span style={{ color: "#7a89a3" }}>▸</span>
          <span>11:08 [USMC] F-35B EABO試験 完了</span>
          <span style={{ color: "#7a89a3" }}>▸</span>
          <span>09:18 [PLA-AF] J-20S 量産確認</span>
        </div>
      </div>

      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "20px 24px", display: "grid", gridTemplateColumns: "240px 1fr 280px", gap: 20 }}>
        {/* Left rail: filter / threat board */}
        <aside style={{ fontFamily: "var(--mono)", fontSize: 12 }}>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44", marginBottom: 14 }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// REGION</div>
            <ul className="reset" style={{ padding: "8px 0" }}>
              {[
                ["EAST_ASIA", 412, "#10b981"],
                ["EUROPE", 287, "#3b82f6"],
                ["MIDEAST", 198, "#f59e0b"],
                ["AMERICAS", 156, "#8b5cf6"],
                ["GLOBAL", 89, "#7a89a3"],
              ].map(([r, n, c]) => (
                <li key={r} style={{ display: "flex", justifyContent: "space-between", padding: "5px 12px", color: "#a8b1c4" }}>
                  <span><span style={{ color: c }}>●</span> {r}</span>
                  <span style={{ color: "#7a89a3" }}>{n}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44", marginBottom: 14 }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// THREAT_LEVEL</div>
            <div style={{ padding: "12px" }}>
              {[
                ["DPRK", 4, "#ef4444"],
                ["RUS", 4, "#ef4444"],
                ["PRC", 3, "#f59e0b"],
                ["IRN", 3, "#f59e0b"],
                ["GLOBAL", 2, "#10b981"],
              ].map(([k, lv, c]) => (
                <div key={k} style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                  <span style={{ width: 50, color: "#a8b1c4" }}>{k}</span>
                  <span style={{ flex: 1, display: "flex", gap: 2 }}>
                    {[1,2,3,4,5].map((i) => (
                      <span key={i} style={{ flex: 1, height: 8, background: i <= lv ? c : "#1f2d44" }}></span>
                    ))}
                  </span>
                  <span style={{ color: c, fontWeight: 700 }}>{lv}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44" }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// SOURCES</div>
            <ul className="reset" style={{ padding: "8px 0", color: "#a8b1c4" }}>
              {["DoD.mil", "JANES", "Reuters", "TASS", "Xinhua", "防衛省", "USNI"].map((s) => (
                <li key={s} style={{ padding: "4px 12px", display: "flex", justifyContent: "space-between" }}>
                  <span>▸ {s}</span><span style={{ color: "#10b981" }}>OK</span>
                </li>
              ))}
            </ul>
          </div>
        </aside>

        {/* Main feed */}
        <main>
          {/* Top wire */}
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44", marginBottom: 14 }}>
            <div style={{ background: "#1f2d44", padding: "8px 14px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572", fontFamily: "var(--mono)", display: "flex", justifyContent: "space-between" }}>
              <span>// LIVE_FEED · {activeCategory === "all" ? "ALL CATEGORIES" : data.categories.find((c) => c.slug === activeCategory)?.name.toUpperCase()}</span>
              <span style={{ color: "#10b981" }}>● STREAMING · {articles.length} ITEMS</span>
            </div>
            <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--mono)", fontSize: 12.5 }}>
              <tbody>
                {articles.slice(0, 18).map((a, i) => (
                  <tr key={a.id} onClick={() => window.location.href = `article.html?id=${a.id}`} style={{ borderTop: i > 0 ? "1px solid #1f2d44" : "none", cursor: "pointer" }}>
                    <td style={{ padding: "10px 14px", color: "#7a89a3", whiteSpace: "nowrap", verticalAlign: "top", width: 140 }}>
                      {a.date.replace(/\//g, "-")} {a.time}
                    </td>
                    <td style={{ padding: "10px 8px", whiteSpace: "nowrap", verticalAlign: "top", width: 110 }}>
                      <span style={{ background: getCatColor(a.cat), color: "#fff", padding: "1px 7px", fontSize: 10, fontWeight: 700, letterSpacing: ".05em" }}>
                        {a.cat.toUpperCase()}
                      </span>
                    </td>
                    <td style={{ padding: "10px 8px", verticalAlign: "top" }}>
                      <div style={{ color: "#e6e9ef", fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.5, fontWeight: 500 }}>
                        {a.featured && <span style={{ color: "#fca5a5", marginRight: 6, fontWeight: 700 }}>★</span>}
                        {a.title}
                      </div>
                      <div style={{ color: "#7a89a3", fontSize: 11, marginTop: 4 }}>
                        {a.author} · 👁{fmt(a.views)} · 💬{a.comments} · {a.tags.map((t) => "#" + t).join(" ")}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ borderTop: "1px solid #1f2d44", padding: "10px 14px", fontFamily: "var(--mono)", fontSize: 11, color: "#7a89a3", display: "flex", justifyContent: "space-between" }}>
              <span>showing 1–18 of {articles.length}</span>
              <span style={{ display: "flex", gap: 14 }}>
                <span>[J] next</span><span>[K] prev</span><span>[/] search</span><span style={{ color: "#c5a572" }}>[LOAD MORE ▾]</span>
              </span>
            </div>
          </div>
        </main>

        {/* Right: ranking + map */}
        <aside style={{ fontFamily: "var(--mono)", fontSize: 12 }}>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44", marginBottom: 14 }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// TOP_READS · 7D</div>
            <ol className="reset" style={{ padding: "6px 0" }}>
              {data.ranking.map((r) => {
                const a = data.articles.find((x) => x.id === r.id);
                return (
                  <li key={r.rank} style={{ padding: "8px 12px", display: "flex", gap: 8, borderTop: r.rank > 1 ? "1px solid #1f2d44" : "none" }}>
                    <span style={{ color: r.rank <= 3 ? "#fca5a5" : "#7a89a3", fontWeight: 700 }}>{String(r.rank).padStart(2, "0")}</span>
                    <span style={{ color: "#d4d8e0", fontSize: 12, lineHeight: 1.45, fontFamily: "var(--sans)" }}>{a.title}</span>
                  </li>
                );
              })}
            </ol>
          </div>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44", marginBottom: 14 }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// HOTSPOT_MAP</div>
            <div style={{ padding: 12, position: "relative" }}>
              <Placeholder w="100%" h={180} label="WORLD_MAP" c1="#1a2538" c2="#0d1420" />
              <div style={{ marginTop: 10, fontSize: 11, color: "#a8b1c4", lineHeight: 1.7 }}>
                <div><span style={{ color: "#ef4444" }}>●</span> 黒海 · クリミア沿岸</div>
                <div><span style={{ color: "#ef4444" }}>●</span> 朝鮮半島 · 黄海</div>
                <div><span style={{ color: "#f59e0b" }}>●</span> 台湾海峡</div>
                <div><span style={{ color: "#f59e0b" }}>●</span> ホルムズ海峡</div>
                <div><span style={{ color: "#10b981" }}>●</span> 南シナ海</div>
              </div>
            </div>
          </div>
          <div style={{ background: "#0a111d", border: "1px solid #1f2d44" }}>
            <div style={{ background: "#1f2d44", padding: "7px 12px", fontSize: 11, letterSpacing: ".15em", color: "#c5a572" }}>// EDITOR_NOTE</div>
            <div style={{ padding: 12, fontSize: 12, color: "#a8b1c4", lineHeight: 1.7, fontFamily: "var(--sans)" }}>
              週末特集記事は土曜21時に更新します。
              <span style={{ color: "#c5a572" }}>—— 編集部</span>
            </div>
          </div>
        </aside>
      </div>

      {/* Footer */}
      <footer style={{ background: "#070b13", borderTop: "1px solid #1f2d44", padding: "20px 0", fontFamily: "var(--mono)", fontSize: 11, color: "#7a89a3" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", display: "flex", justifyContent: "space-between" }}>
          <span>© {data.siteName} · INTEL FEED v2.6.1 · {data.established}–2026</span>
          <span>[ABOUT] [CONTACT] [RSS] [API] [TERMS]</span>
        </div>
      </footer>
    </div>
  );
}

function termTabStyle(active) {
  return {
    padding: "10px 14px", background: active ? "#1f2d44" : "transparent",
    border: "none", color: active ? "#c5a572" : "#7a89a3",
    fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".05em",
    cursor: "pointer", borderRight: "1px solid #1f2d44", whiteSpace: "nowrap",
  };
}

Object.assign(window, { VariationC });