/* global React, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { CATEGORIES_EXT, AUTHORS } = window.cynixDataExt;

const SECTIONS = [
  {
    id: "home",
    title: "TOP / 主要動線",
    desc: "創刊号を含むトップ・最新号への入り口。",
    pages: [
      ["index.html", "TOP — cynix.jp 編集マガジン"],
      ["monthly-archive.html", "号別バックナンバー (VOL.01–09)"],
      ["editors-letter.html", "編集長コラム"],
      ["newsletter.html", "メルマガ登録 — 編集部からの手紙"],
    ],
  },
  {
    id: "categories",
    title: "カテゴリ別LP",
    desc: "6つの主要分野ごとの編集ハブ。",
    pages: [
      ["category-server.html", "サーバー / VPS / レンタルサーバー"],
      ["category-domain-ssl.html", "ドメイン / SSL / セキュリティ"],
      ["category-saas.html", "SaaS / 業務効率化"],
      ["category-ec.html", "EC / ネット販売"],
      ["category-ai-tools.html", "AI ツール / 生成AI"],
      ["category-reservation.html", "予約システム / 店舗運営"],
    ],
  },
  {
    id: "discovery",
    title: "発見・検索",
    desc: "記事を探すための索引・検索系ページ。",
    pages: [
      ["search.html", "サイト内検索"],
      ["tag-archive.html", "タグ別アーカイブ"],
      ["series-archive.html", "シリーズ別アーカイブ"],
      ["popular-rankings.html", "人気ランキング (記事/サービス/タグ)"],
      ["glossary.html", "用語集"],
    ],
  },
  {
    id: "editorial",
    title: "編集部・媒体について",
    desc: "編集部・編集方針・読者コーナー。",
    pages: [
      ["about.html", "About — 編集理念"],
      ["editorial-team.html", "編集部紹介 (12名)"],
      ...AUTHORS.slice(0, 6).map(a => [`/authors/${a.slug}`, `${a.name_jp} (${a.role_jp})`]),
      ["reader-letters.html", "読者の手紙"],
      ["event-archive.html", "オフライン会・ウェビナー"],
    ],
  },
  {
    id: "business",
    title: "広告・タイアップ・媒体資料",
    desc: "広告主・パートナー向け情報。",
    pages: [
      ["media-kit.html", "媒体資料 (読者属性・PV)"],
      ["pricing.html", "料金表 (タイアップ・バナー)"],
      ["case-studies.html", "タイアップ実績"],
      ["contact.html?type=ad", "広告のお問い合わせ"],
    ],
  },
  {
    id: "user",
    title: "読者ユーティリティ",
    desc: "読者が能動的に使う機能。",
    pages: [
      ["bookmarks.html", "ブックマーク一覧"],
      ["data-dashboard.html", "データルーム (VPSベンチマーク)"],
    ],
  },
  {
    id: "legal",
    title: "規約・問い合わせ",
    desc: "媒体運営に関する法的情報。",
    pages: [
      ["contact.html", "お問い合わせ"],
      ["legal.html?tab=terms", "利用規約"],
      ["legal.html?tab=privacy", "プライバシーポリシー"],
      ["legal.html?tab=ad", "広告掲載基準"],
      ["legal.html?tab=cookie", "Cookieについて"],
      ["404.html", "404 ページ"],
    ],
  },
];

const App = () => {
  // Total page count
  const total = SECTIONS.reduce((s, sec) => s + sec.pages.length, 0);

  return (
    <>
      <SharedMasthead section="SITEMAP" />
      <main className="mod-shell">
        <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "サイトマップ" }]} />

        <section style={{ borderTop: "4px double var(--ink)", borderBottom: "4px double var(--ink)", padding: "48px 0 56px", margin: "16px 0 48px", textAlign: "center" }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)", marginBottom: 14 }}>SITE INDEX</div>
          <h1 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 80, fontWeight: 500, lineHeight: 0.95, margin: 0, letterSpacing: "-0.03em" }}>サイトマップ</h1>
          <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 22, fontStyle: "italic", marginTop: 6, opacity: 0.7 }}>Sitemap</div>
          <p style={{ maxWidth: 660, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
            cynix.jp の全 <span style={{ color: "var(--vermilion)", fontWeight: 600 }}>{total}</span> 件のページを、用途別に分類しています。
          </p>
        </section>

        {/* Anchor nav */}
        <nav style={{ display: "flex", flexWrap: "wrap", gap: 8, padding: "16px 20px", border: "2px solid var(--ink)", marginBottom: 32 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", marginRight: 12, alignSelf: "center", opacity: 0.6 }}>JUMP TO:</span>
          {SECTIONS.map(s => (
            <a key={s.id} href={`#${s.id}`} style={{ padding: "4px 12px", border: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.05em" }}>{s.title}</a>
          ))}
        </nav>

        {/* Sections */}
        {SECTIONS.map(sec => (
          <section className="mod-sitemap-section" id={sec.id} key={sec.id}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: "1px solid var(--ink)", paddingBottom: 8, marginBottom: 14 }}>
              <h3>{sec.title}</h3>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.18em", color: "var(--vermilion)" }}>{sec.pages.length} PAGES</span>
            </div>
            <p className="desc">{sec.desc}</p>
            <ul>
              {sec.pages.map(([href, label]) => (
                <li key={href + label}><a href={href}>{label}</a></li>
              ))}
            </ul>
          </section>
        ))}

        {/* Notes */}
        <div style={{ background: "var(--cream)", border: "2px solid var(--ink)", padding: "24px 32px", marginTop: 32, fontSize: 13, lineHeight: 1.85 }}>
          <b style={{ display: "block", marginBottom: 8, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.15em", color: "var(--vermilion)" }}>NOTES</b>
          このサイトマップは編集部・読者・パートナーの三者すべてが同じ俯瞰を持てるよう、機能ではなく<b>用途別</b>に分類しています。<br />
          機械可読版 (<code style={{ background: "var(--paper)", padding: "1px 6px", border: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace" }}>/sitemap.xml</code>) は別途提供。検索エンジン向けの全URLリストです。
        </div>

        <Colophon />
      </main>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);