// バリエーションA: クラシック2カラム (グランドフリート風)

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

  const featured = data.articles.filter((a) => a.featured).slice(0, 3);
  const main = articles.slice(0, 14);

  return (
    <div style={{ background: "var(--bg)", fontFamily: "var(--sans)", color: "var(--ink)" }}>
      <ClassicHeader activeNav="home" />

      {/* Breaking news banner */}
      <div style={{
        background: "var(--accent-red)", color: "#fff",
        padding: "8px 0", fontSize: 12.5,
      }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 24px", display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontWeight: 700, letterSpacing: ".15em", padding: "2px 10px", background: "rgba(0,0,0,.25)" }}>速報</span>
          <span>北朝鮮、新型ICBM「火星19」を発射 — 高度6,200km・飛距離1,100km / 米本土到達能力の評価が分かれる</span>
          <span style={{ marginLeft: "auto", opacity: .8, fontFamily: "var(--mono)", fontSize: 11 }}>14:32 JST</span>
        </div>
      </div>

      {/* Featured strip */}
      <section style={{ background: "#fff", borderBottom: "1px solid var(--rule)" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "20px 24px", display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr", gap: 16 }}>
          {/* Lead */}
          <article style={{ position: "relative" }}>
            <Thumb article={featured[0]} w="100%" h={300} label="LEAD · NAVAL" />
            <div style={{ padding: "14px 0 0" }}>
              <div style={{ display: "flex", gap: 10, alignItems: "center", marginBottom: 8 }}>
                <CatChip slug={featured[0].cat} />
                <span style={{ fontSize: 11, color: "var(--slate-600)", fontFamily: "var(--mono)" }}>
                  {featured[0].date} {featured[0].time}
                </span>
              </div>
              <h2 style={{
                margin: 0, fontFamily: "var(--serif)", fontSize: 24, fontWeight: 700,
                lineHeight: 1.4, color: "var(--navy-900)",
              }}>{featured[0].title}</h2>
              <p style={{ fontSize: 13.5, lineHeight: 1.75, color: "var(--ink-soft)", marginTop: 10 }}>
                {featured[0].excerpt}
              </p>
            </div>
          </article>
          {/* Sub features */}
          {featured.slice(1, 3).map((a, i) => (
            <article key={a.id}>
              <Thumb article={a} w="100%" h={140} label={i === 0 ? "AVIATION" : "MISSILE"} />
              <div style={{ padding: "12px 0 0" }}>
                <div style={{ display: "flex", gap: 8, marginBottom: 6 }}>
                  <CatChip slug={a.cat} />
                  <span style={{ fontSize: 11, color: "var(--slate-600)", fontFamily: "var(--mono)" }}>{a.date}</span>
                </div>
                <h3 style={{
                  margin: 0, fontFamily: "var(--serif)", fontSize: 16, fontWeight: 700,
                  lineHeight: 1.45, color: "var(--navy-900)",
                }}>{a.title}</h3>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* Category tabs */}
      <div style={{ background: "#fff", borderBottom: "1px solid var(--rule)", position: "sticky", top: 0, zIndex: 5 }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 24px", display: "flex", overflowX: "auto" }}>
          <button onClick={() => setActiveCategory("all")} style={tabStyle(activeCategory === "all")}>
            すべて <span style={{ fontFamily: "var(--mono)", fontSize: 11, opacity: .7, marginLeft: 4 }}>({data.articles.length})</span>
          </button>
          {data.categories.map((c) => (
            <button key={c.slug} onClick={() => setActiveCategory(c.slug)} style={tabStyle(activeCategory === c.slug, c.color)}>
              {c.name} <span style={{ fontFamily: "var(--mono)", fontSize: 11, opacity: .7, marginLeft: 4 }}>({c.count})</span>
            </button>
          ))}
        </div>
      </div>

      {/* Main 2-column */}
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "24px", display: "grid", gridTemplateColumns: "1fr 300px", gap: 28 }}>
        {/* Left: article list */}
        <main>
          <SectionHeading>
            {activeCategory === "all" ? "新着記事" : data.categories.find((c) => c.slug === activeCategory)?.name + "の記事"}
          </SectionHeading>
          <div>
            {main.map((a) => <ListItem key={a.id} article={a} />)}
            {main.length === 0 && (
              <div style={{ padding: 60, textAlign: "center", color: "var(--slate-500)" }}>記事がありません</div>
            )}
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: 4, marginTop: 24 }}>
            {[1, 2, 3, "…", 18].map((n, i) => (
              <button key={i} style={{
                minWidth: 36, height: 36, border: "1px solid var(--rule)",
                background: n === 1 ? "var(--navy-800)" : "#fff",
                color: n === 1 ? "#fff" : "var(--ink)",
                fontFamily: "var(--mono)", fontSize: 13, cursor: "pointer",
              }}>{n}</button>
            ))}
            <button style={{
              padding: "0 14px", height: 36, border: "1px solid var(--rule)", background: "#fff",
              fontSize: 13, cursor: "pointer",
            }}>次へ ›</button>
          </div>
        </main>
        {/* Right: sidebar */}
        <aside>
          <SidebarRanking />
          <SidebarAd />
          <SidebarCategoryList />
          <SidebarArchive />
        </aside>
      </div>

      <ClassicFooter />
    </div>
  );
}

function tabStyle(active, color) {
  return {
    padding: "14px 16px", fontSize: 13, fontWeight: active ? 700 : 500,
    background: "transparent", border: "none", cursor: "pointer", whiteSpace: "nowrap",
    color: active ? (color || "var(--navy-800)") : "var(--ink-soft)",
    borderBottom: active ? `3px solid ${color || "var(--navy-800)"}` : "3px solid transparent",
    fontFamily: "var(--sans)",
  };
}

function SectionHeading({ children }) {
  return (
    <h2 style={{
      margin: "0 0 16px", padding: "10px 0 10px 14px", fontSize: 16, fontWeight: 700,
      borderLeft: "5px solid var(--navy-800)",
      background: "linear-gradient(to right, var(--navy-50), transparent)",
      color: "var(--navy-900)", letterSpacing: ".05em",
    }}>{children}</h2>
  );
}

// 記事リストアイテム
function ListItem({ article }) {
  return (
    <a href={`article.html?id=${article.id}`} style={{ textDecoration: "none", color: "inherit", display: "block" }}>
    <article style={{
      display: "grid", gridTemplateColumns: "180px 1fr", gap: 18,
      padding: "16px 0", borderBottom: "1px dotted var(--rule)",
      cursor: "pointer",
    }}>
      <Thumb article={article} w={180} h={120} label={article.cat.toUpperCase()} />
      <div>
        <div style={{ display: "flex", gap: 10, marginBottom: 6, alignItems: "center" }}>
          <CatChip slug={article.cat} />
          <span style={{ fontSize: 11, color: "var(--slate-600)", fontFamily: "var(--mono)" }}>
            {article.date} {article.time}
          </span>
          <span style={{ fontSize: 11, color: "var(--slate-500)" }}>
            by {article.author}
          </span>
        </div>
        <h3 style={{
          margin: 0, fontSize: 17, fontWeight: 700, lineHeight: 1.45,
          fontFamily: "var(--serif)", color: "var(--navy-900)",
        }}>{article.title}</h3>
        <p style={{
          margin: "8px 0 10px", fontSize: 13, lineHeight: 1.7, color: "var(--ink-soft)",
        }}>{article.excerpt}</p>
        <div style={{ display: "flex", gap: 14, fontSize: 11, color: "var(--slate-600)", alignItems: "center" }}>
          <span>👁 {fmt(article.views)} 閲覧</span>
          <span>💬 {article.comments} コメント</span>
          <span style={{ display: "flex", gap: 6, marginLeft: "auto" }}>
            {article.tags.map((t) => (
              <span key={t} style={{
                fontSize: 10.5, padding: "2px 7px", border: "1px solid var(--rule)",
                color: "var(--slate-700)", background: "var(--slate-100)",
              }}>#{t}</span>
            ))}
          </span>
        </div>
      </div>
    </article>
    </a>
  );
}

function getCatColor(slug) {
  const c = window.SITE_DATA.categories.find((x) => x.slug === slug);
  return c ? c.color : "#1e3a5f";
}
function shadeCat(slug) {
  const c = getCatColor(slug);
  // dark version - just return navy-900 for simplicity
  return "#0a1628";
}

Object.assign(window, { VariationA, ListItem, SectionHeading, tabStyle, getCatColor, shadeCat });