// 共通の小さなコンポーネント

const useData = () => window.SITE_DATA;

const fmt = (n) => n.toLocaleString();

function CatChip({ slug, size = "sm" }) {
  const data = useData();
  const c = data.categories.find((x) => x.slug === slug);
  if (!c) return null;
  const styles = {
    sm: { fontSize: 10, padding: "2px 7px" },
    md: { fontSize: 11, padding: "3px 9px" }
  };
  return (
    <span style={{
      display: "inline-block",
      background: c.color,
      color: "#fff",
      fontWeight: 700,
      letterSpacing: ".06em",
      borderRadius: 1,
      ...styles[size]
    }}>{c.name}</span>);

}

function Placeholder({ w, h, label = "PHOTO", c1 = "#1e3a5f", c2 = "#0f1e3a", style }) {
  return (
    <div className="ph" style={{ width: w, height: h, "--ph-c1": c1, "--ph-c2": c2, ...style }}>
      <span className="ph-label">{label}</span>
    </div>);

}

// ヘッダー (グランドフリート風 - 縦長, ロゴ大)
function ClassicHeader({ activeNav = "home" }) {
  const data = useData();
  const navItems = [
  { id: "home", label: "ホーム", href: "index.html" },
  { id: "navy", label: "海軍", href: "category.html?cat=navy" },
  { id: "air", label: "航空", href: "category.html?cat=air" },
  { id: "missile", label: "ミサイル", href: "category.html?cat=missile" },
  { id: "intl", label: "国際", href: "category.html?cat=intl" },
  { id: "jp", label: "自衛隊", href: "category.html?cat=jp" },
  { id: "history", label: "歴史", href: "category.html?cat=history" },
  { id: "ai", label: "AI生成", href: "generate.html", highlight: true },
  { id: "arch", label: "システム構成", href: "architecture.html" },
  { id: "about", label: "About", href: "about.html" },
  { id: "contact", label: "お問合せ", href: "contact.html" }];

  return (
    <header style={{ background: "#fff", borderBottom: `3px solid var(--navy-800)` }}>
      {/* Top utility bar */}
      <div style={{ background: "var(--navy-900)", color: "#fff", fontSize: 11, padding: "5px 0" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "flex", justifyContent: "space-between", padding: "0 24px" }}>
          <span style={{ letterSpacing: ".2em" }}>{new Date().toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric", weekday: "long" })}</span>
          <span style={{ display: "flex", gap: 16, opacity: .8 }}>
            <span>RSS</span><span>X (Twitter)</span><span>YouTube</span><span>ログイン</span>
          </span>
        </div>
      </div>
      {/* Logo + tagline */}
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "22px 24px 18px", display: "flex", alignItems: "center", gap: 24 }}>
        <a href="index.html" style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none", color: "inherit" }}>
          <div style={{
            width: 56, height: 56, background: "var(--navy-800)", color: "#fff",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--serif)", fontSize: 30, fontWeight: 700, lineHeight: 1,
            border: "2px solid var(--navy-900)"
          }}>ミ</div>
          <div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 700, letterSpacing: ".1em", color: "var(--navy-900)" }}>
              {data.siteName}
            </div>
            <div style={{ fontSize: 11, letterSpacing: ".3em", color: "var(--slate-600)", marginTop: 2 }}>
              {data.siteNameEn} · since {data.established} · {data.tagline}
            </div>
          </div>
        </a>
        <div style={{ marginLeft: "auto", display: "flex", gap: 8 }}>
          <input placeholder="記事を検索…" style={{
            border: "1px solid var(--rule)", padding: "8px 12px", fontSize: 13, width: 220,
            background: "var(--slate-100)", outline: "none"
          }} />
          <button style={{
            background: "var(--navy-800)", color: "#fff", border: "none", padding: "8px 18px",
            fontSize: 13, cursor: "pointer", letterSpacing: ".1em"
          }}>検索</button>
        </div>
      </div>
      {/* Main nav */}
      <nav style={{ background: "var(--navy-800)", color: "#fff" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 24px", display: "flex" }}>
          {navItems.map((n) =>
          <a key={n.id} href={n.href} style={{
            padding: "12px 18px", fontSize: 13, fontWeight: n.highlight ? 700 : 500,
            borderRight: "1px solid rgba(255,255,255,.12)",
            background: activeNav === n.id ? "var(--navy-900)" : (n.highlight ? "#dc2626" : "transparent"),
            cursor: "pointer", color: "#fff", textDecoration: "none",
            letterSpacing: n.highlight ? ".05em" : "0"
          }}>{n.highlight && "▶ "}{n.label}</a>
          )}
        </div>
      </nav>
    </header>);

}

// サイドバー記事 (右カラム用)
function SidebarRanking() {
  const data = useData();
  const top = data.ranking.slice(0, 7).map((r) => ({
    rank: r.rank,
    article: data.articles.find((a) => a.id === r.id)
  }));
  return (
    <section style={{ background: "#fff", border: "1px solid var(--rule)", marginBottom: 18 }}>
      <h3 style={{
        margin: 0, padding: "10px 14px", background: "var(--navy-800)", color: "#fff",
        fontSize: 13, letterSpacing: ".15em"
      }}>週間ランキング</h3>
      <ul className="reset" style={{ padding: "4px 0" }}>
        {top.map(({ rank, article }) =>
        <li key={rank} style={{
          display: "flex", gap: 10, padding: "10px 12px",
          borderTop: rank > 1 ? "1px dashed var(--rule)" : "none",
          alignItems: "flex-start"
        }}>
            <span style={{
            flexShrink: 0, width: 22, height: 22,
            background: rank <= 3 ? "var(--accent-red)" : "var(--slate-700)",
            color: "#fff", fontWeight: 700, fontSize: 12,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--mono)"
          }}>{rank}</span>
            <span style={{ fontSize: 12.5, lineHeight: 1.5, color: "var(--slate-800)" }}>
              {article.title}
            </span>
          </li>
        )}
      </ul>
    </section>);

}

function SidebarCategoryList() {
  const data = useData();
  return (
    <section style={{ background: "#fff", border: "1px solid var(--rule)", marginBottom: 18 }}>
      <h3 style={{ margin: 0, padding: "10px 14px", background: "var(--navy-800)", color: "#fff", fontSize: 13, letterSpacing: ".15em" }}>カテゴリ一覧</h3>
      <ul className="reset">
        {data.categories.map((c, i) =>
        <li key={c.slug} style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          padding: "9px 14px", borderTop: i > 0 ? "1px dashed var(--rule)" : "none",
          fontSize: 13, cursor: "pointer"
        }}>
            <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 8, height: 8, background: c.color }}></span>
              {c.name}
            </span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--slate-600)" }}>{c.count}</span>
          </li>
        )}
      </ul>
    </section>);

}

function SidebarArchive() {
  const months = [
  "2026年04月", "2026年03月", "2026年02月", "2026年01月",
  "2025年12月", "2025年11月", "2025年10月", "2025年09月"];

  return (
    <section style={{ background: "#fff", border: "1px solid var(--rule)", marginBottom: 18 }}>
      <h3 style={{ margin: 0, padding: "10px 14px", background: "var(--navy-800)", color: "#fff", fontSize: 13, letterSpacing: ".15em" }}>アーカイブ</h3>
      <ul className="reset" style={{ padding: "8px 0" }}>
        {months.map((m, i) =>
        <li key={m} style={{ padding: "5px 14px", fontSize: 12.5, color: "var(--slate-700)", display: "flex", justifyContent: "space-between" }}>
            <span>▸ {m}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--slate-500)" }}>({30 + i * 3})</span>
          </li>
        )}
      </ul>
    </section>);

}

function SidebarAd({ label = "広告" }) {
  return (
    <section style={{
      background: "var(--slate-100)", border: "1px dashed var(--slate-400)",
      padding: "30px 16px", textAlign: "center", marginBottom: 18,
      color: "var(--slate-500)", fontSize: 11, letterSpacing: ".2em"
    }}>
      <div style={{ marginBottom: 4 }}>{label}</div>
      <div style={{ height: 130, background: "rgba(0,0,0,.04)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--mono)" }}>
        AD · 300×250
      </div>
    </section>);

}

// フッター
function ClassicFooter() {
  const data = useData();
  return (
    <footer style={{ background: "var(--navy-900)", color: "#fff", marginTop: 40 }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "36px 24px 18px", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 30 }}>
        <div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontWeight: 700, letterSpacing: ".15em", marginBottom: 6 }}>{data.siteName}</div>
          <div style={{ fontSize: 11, opacity: .6, letterSpacing: ".2em", marginBottom: 14 }}>{data.siteNameEn}</div>
          <p style={{ fontSize: 12, lineHeight: 1.7, opacity: .75, margin: 0 }}>
            世界の艦艇・航空機・ミサイル・国際情勢を、一次資料に基づいて読み解く独立系防衛情報メディア。{data.established}年創刊。
          </p>
        </div>
        <div>
          <h4 style={{ fontSize: 11, letterSpacing: ".25em", marginBottom: 10, opacity: .8 }}>サイト</h4>
          <ul className="reset" style={{ fontSize: 12, lineHeight: 2, opacity: .8 }}>
            <li>ホーム</li><li>カテゴリ一覧</li><li>運営者紹介</li><li>お問い合わせ</li>
          </ul>
        </div>
        <div>
          <h4 style={{ fontSize: 11, letterSpacing: ".25em", marginBottom: 10, opacity: .8 }}>カテゴリ</h4>
          <ul className="reset" style={{ fontSize: 12, lineHeight: 2, opacity: .8 }}>
            {data.categories.slice(0, 5).map((c) => <li key={c.slug}>▸ {c.name}</li>)}
          </ul>
        </div>
        <div>
          <h4 style={{ fontSize: 11, letterSpacing: ".25em", marginBottom: 10, opacity: .8 }}>フォロー</h4>
          <ul className="reset" style={{ fontSize: 12, lineHeight: 2, opacity: .8 }}>
            <li>X (Twitter) @ms_intel</li><li>RSS フィード</li><li>YouTube</li><li>メールマガジン</li>
          </ul>
        </div>
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,.12)", padding: "14px 24px", fontSize: 11, opacity: .55, textAlign: "center", letterSpacing: ".15em" }}>
        © {data.established}–2026 {data.siteName} / {data.siteNameEn}. All rights reserved.
      </div>
    </footer>);

}

// === 記事サムネイル ===
function Thumb({ article, w = "100%", h = 200, label, style = {} }) {
  const url = window.getThumb ? window.getThumb(article) : null;
  if (!url) {
    return <Placeholder w={w} h={h} label={label || (article && article.cat ? article.cat.toUpperCase() : "")} c1={article ? getCatColor(article.cat) : "#1e3a5f"} c2="#0a1628" style={style} />;
  }
  return (
    <div style={{ width: w, height: h, position: "relative", overflow: "hidden", background: "#0a1628", ...style }}>
      <img src={url} alt={article ? article.title : ""} loading="lazy"
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
        onError={(e) => { e.target.style.display = "none"; }} />
      {label && (
        <div style={{ position: "absolute", top: 8, left: 8, background: "rgba(10,22,40,.85)", color: "#fff", fontSize: 10, padding: "3px 8px", letterSpacing: ".15em", fontWeight: 700, fontFamily: "var(--mono)" }}>
          {label}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  CatChip, Placeholder, Thumb, ClassicHeader,
  SidebarRanking, SidebarCategoryList, SidebarArchive, SidebarAd,
  ClassicFooter, fmt
});