/* global React, ReactDOM, window */
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;
const { useState } = React;

const TABS = [
  { id: "terms", label: "利用規約", en: "TERMS OF SERVICE", num: "01" },
  { id: "privacy", label: "プライバシーポリシー", en: "PRIVACY POLICY", num: "02" },
  { id: "disclosure", label: "広告表記", en: "AD DISCLOSURE", num: "03" },
  { id: "cookie", label: "Cookieポリシー", en: "COOKIE POLICY", num: "04" },
  { id: "tokutei", label: "特定商取引法", en: "TOKUTEISHO", num: "05" },
];

// Detailed legal content
const TERMS = [
  { n: "01", t: "総則", body: "本規約は、株式会社cynix編集部（以下「当社」）が運営するオンライン雑誌『cynix.jp』（以下「本媒体」）を、利用者が閲覧・利用する際の条件を定めるものです。本媒体を利用された方は、本規約に同意したものとみなします。" },
  { n: "02", t: "コンテンツの著作権", body: "本媒体に掲載されるすべての記事・図表・写真・図版・データの著作権は、特に明示のない限り当社または寄稿者に帰属します。引用の範囲を超える複製・転載・二次利用は事前の書面同意を要します。" },
  { n: "03", t: "情報の正確性", body: "編集部は記事内容の正確性に最大限の注意を払いますが、その完全性・最新性を保証するものではありません。掲載情報は公開時点のものであり、価格・仕様・規約は予告なく変更される場合があります。" },
  { n: "04", t: "免責事項", body: "本媒体の情報を利用したことによって生じた直接的・間接的な損害について、当社は一切の責任を負いません。サービス選定・契約は読者ご自身の判断で行うものとします。" },
  { n: "05", t: "リンク", body: "本媒体へのリンクは原則自由です。ただし、公序良俗に反するサイト、当社の信用を毀損する文脈でのリンクはお断りします。" },
  { n: "06", t: "規約の変更", body: "当社は、必要に応じて本規約を変更することがあります。変更後の規約は本ページに掲載した時点で効力を生じます。重要な変更の場合は、最新号のEditor's Noteで告知します。" },
  { n: "07", t: "準拠法・管轄", body: "本規約の解釈および適用は日本法に準拠し、本媒体に関する紛争は東京地方裁判所を第一審の専属的合意管轄とします。" },
];

const PRIVACY_SECTIONS = [
  {
    n: "01", t: "取得する個人情報",
    body: "当社は以下の個人情報を取得する場合があります。",
    items: [
      "お問い合わせフォームから入力された氏名・所属・メールアドレス・電話番号・本文",
      "ニュースレター登録時のメールアドレス",
      "アクセス解析ツールによる匿名のアクセスログ（IPアドレス・閲覧記事・滞在時間など）",
      "Cookieにより取得される、本媒体内の行動履歴",
    ],
  },
  {
    n: "02", t: "利用目的",
    body: "取得した個人情報は、以下の目的でのみ利用します。",
    items: [
      "お問い合わせへの返信、取材・寄稿のご相談対応",
      "ニュースレターの配信および編集部からのお知らせ",
      "本媒体のコンテンツ改善、読者傾向の分析",
      "広告効果測定（個人を特定しない形での集計）",
    ],
  },
  {
    n: "03", t: "第三者提供",
    body: "個人情報は、ご本人の同意なく第三者に提供しません。ただし以下の場合を除きます：法令に基づく場合 ／ 人の生命・身体・財産の保護のために必要な場合 ／ 公衆衛生・児童育成のために特に必要な場合。",
    items: [],
  },
  {
    n: "04", t: "委託",
    body: "個人情報の取扱いを以下のサービスに委託しています。委託先は当社の安全管理基準を満たすことを契約で求めています。",
    items: [
      "メール配信: 国内メール配信プラットフォーム",
      "アクセス解析: Plausible Analytics（EU圏・Cookieレス）",
      "サーバー: 日本国内のクラウドサーバー",
    ],
  },
  {
    n: "05", t: "開示・訂正・削除",
    body: "ご本人からのお求めにより、個人情報の開示・訂正・削除に応じます。お問い合わせフォームの「その他」よりご連絡ください。本人確認の上、合理的期間内に対応します。",
    items: [],
  },
  {
    n: "06", t: "個人情報保護管理者", body: "三宅 直人（編集長 / privacy@cynix.jp）",
    items: [],
  },
];

const App = () => {
  const [tab, setTab] = useState("terms");

  return (
    <div className="cross-shell">
      <SharedMasthead section="LEGAL · TERMS · PRIVACY · DISCLOSURE" />
      <Breadcrumb items={[
        { label: "HOME", href: "cynix-jp.html" },
        { label: "LEGAL" },
      ]} />

      <div className="cross-head">
        <div>
          <div className="kicker">CYNIX.JP — LEGAL & POLICIES</div>
          <h1>
            ご利用規約と<br />プライバシー、<em>すべて</em>。
          </h1>
          <p className="deck">
            本媒体をご利用いただく際の規約、個人情報の取扱い、広告に関する表記、Cookieの利用方針を、すべて1ページに集約しました。 編集部は読者との約束を、できるだけ具体的な言葉で明記することを心がけています。
          </p>
        </div>
        <div className="meta">
          <span>LAST UPDATED</span>
          <span className="big">2026/04/01</span>
          <span>VERSION 3.2</span>
          <span style={{ marginTop: 8 }}>EFFECTIVE FROM 2026-04-01</span>
        </div>
      </div>

      {/* Tab navigation */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "2px solid var(--ink)", marginTop: 24, marginBottom: 40 }}>
        {TABS.map((t, i) => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: "20px 16px",
            background: tab === t.id ? "var(--ink)" : "var(--paper)",
            color: tab === t.id ? "var(--paper)" : "var(--ink)",
            border: "none",
            borderRight: i < TABS.length - 1 ? "1px solid var(--ink)" : "none",
            cursor: "pointer", textAlign: "left",
            transition: "background 0.15s",
            fontFamily: "inherit",
          }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: tab === t.id ? "var(--highlight)" : "var(--vermilion)", fontWeight: 700, marginBottom: 6 }}>
              {t.num} · {t.en}
            </div>
            <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 16, fontWeight: 900, lineHeight: 1.3 }}>{t.label}</div>
          </button>
        ))}
      </div>

      {/* Document chrome — looks like a printed legal doc */}
      <div style={{
        border: "1px solid var(--ink)", background: "var(--paper)", marginBottom: 56,
      }}>
        {/* Document header */}
        <div style={{
          padding: "20px 32px", borderBottom: "1px solid var(--ink)",
          background: "var(--cream)",
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", textTransform: "uppercase",
        }}>
          <span>DOCUMENT · {TABS.find((t) => t.id === tab).en}</span>
          <span style={{ color: "var(--vermilion)", fontWeight: 700 }}>VERSION 3.2 · 2026-04-01</span>
        </div>

        {/* Document body */}
        <div style={{ padding: "48px 64px" }}>
          {tab === "terms" && (
            <div>
              <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: "0 0 24px", textAlign: "center" }}>
                cynix.jp 利用規約
              </h2>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--muted)", textAlign: "center", margin: "0 0 40px", borderBottom: "1px solid var(--ink)", paddingBottom: 24 }}>
                本規約は、株式会社cynix編集部が運営するオンライン雑誌『cynix.jp』を利用される全ての皆様に適用されます。 ご利用前に必ずお読みください。
              </p>
              <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {TERMS.map((s) => (
                  <li key={s.n} style={{
                    display: "grid", gridTemplateColumns: "70px 1fr", gap: 24,
                    padding: "20px 0", borderBottom: "1px dashed var(--ink)",
                  }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 24, fontWeight: 700, color: "var(--vermilion)", lineHeight: 1, marginTop: 4 }}>第{s.n}条</div>
                    <div>
                      <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, lineHeight: 1.4, margin: "0 0 8px" }}>{s.t}</h3>
                      <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--ink)", margin: 0, textWrap: "pretty" }}>{s.body}</p>
                    </div>
                  </li>
                ))}
              </ol>
              <div style={{ marginTop: 32, padding: "20px 24px", background: "var(--cream)", borderLeft: "4px solid var(--vermilion)" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 6 }}>EFFECTIVE FROM</div>
                <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, margin: 0, lineHeight: 1.7 }}>本規約は2026年4月1日より施行いたします。本規約のお問い合わせは <strong style={{ color: "var(--vermilion)" }}>legal@cynix.jp</strong> までご連絡ください。</p>
              </div>
            </div>
          )}

          {tab === "privacy" && (
            <div>
              <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: "0 0 24px", textAlign: "center" }}>
                プライバシーポリシー
              </h2>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--muted)", textAlign: "center", margin: "0 0 40px", borderBottom: "1px solid var(--ink)", paddingBottom: 24 }}>
                株式会社cynix編集部（以下「当社」）は、お客様の個人情報を適切に保護することが社会的責務であると考え、以下の通り個人情報保護方針を定めます。
              </p>
              <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {PRIVACY_SECTIONS.map((s) => (
                  <li key={s.n} style={{
                    padding: "24px 0", borderBottom: "1px dashed var(--ink)",
                  }}>
                    <div style={{ display: "grid", gridTemplateColumns: "70px 1fr", gap: 24 }}>
                      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 24, fontWeight: 700, color: "var(--vermilion)", lineHeight: 1, marginTop: 4 }}>§ {s.n}</div>
                      <div>
                        <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, lineHeight: 1.4, margin: "0 0 8px" }}>{s.t}</h3>
                        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--ink)", margin: "0 0 12px", textWrap: "pretty" }}>{s.body}</p>
                        {s.items.length > 0 && (
                          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                            {s.items.map((it, j) => (
                              <li key={j} style={{
                                fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.7, color: "var(--muted)",
                                padding: "6px 0 6px 20px", position: "relative",
                              }}>
                                <span style={{ position: "absolute", left: 0, color: "var(--vermilion)", fontFamily: "'JetBrains Mono', monospace", fontWeight: 700 }}>▶</span>
                                {it}
                              </li>
                            ))}
                          </ul>
                        )}
                      </div>
                    </div>
                  </li>
                ))}
              </ol>
            </div>
          )}

          {tab === "disclosure" && (
            <div>
              <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: "0 0 24px", textAlign: "center" }}>
                広告表記について
              </h2>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--muted)", textAlign: "center", margin: "0 0 40px", borderBottom: "1px solid var(--ink)", paddingBottom: 24, textWrap: "pretty" }}>
                cynix.jpは、消費者庁の「ステルスマーケティングに関する景品表示法上の規制」（2023年10月施行）に従い、広告に関する表記を以下の通り運用しています。
              </p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 32 }}>
                <div style={{ padding: "24px 28px", border: "2px solid var(--ink)", background: "var(--cream)" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 8 }}>WHAT WE LABEL</div>
                  <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, marginBottom: 12 }}>明示する表記</h3>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {[
                      "[PR] — 広告主から対価を受けたタイアップ記事",
                      "[アフィリエイト] — 成果報酬型の紹介リンクを含む記事",
                      "[提供] — サービス提供を受けてレビューした記事",
                      "[Sponsored] — 編集記事と広告枠の境界を示すバナー",
                    ].map((x, i) => (
                      <li key={i} style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.7, padding: "8px 0", borderTop: i > 0 ? "1px dashed var(--ink)" : "none" }}>
                        <code style={{ background: "var(--ink)", color: "var(--paper)", padding: "2px 6px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700, marginRight: 8 }}>{x.match(/\[.+?\]/)[0]}</code>
                        {x.replace(/\[.+?\]\s*—\s*/, "")}
                      </li>
                    ))}
                  </ul>
                </div>

                <div style={{ padding: "24px 28px", border: "2px solid var(--ink)", background: "var(--ink)", color: "var(--paper)" }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--highlight)", fontWeight: 700, marginBottom: 8 }}>EDITORIAL FIREWALL</div>
                  <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, marginBottom: 12 }}>編集の独立性</h3>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {[
                      "ランキングの順位は、編集部の評価のみに基づいて決定します",
                      "アフィリエイト報酬の高低は順位に影響しません",
                      "広告主からの順位差し替え依頼は、内容を匿名公開します",
                      "提供品レビューは原則お受けせず、編集部予算で実契約します",
                    ].map((x, i) => (
                      <li key={i} style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.7, padding: "8px 0", borderTop: i > 0 ? "1px dashed rgba(244,239,227,0.3)" : "none", display: "flex", gap: 10 }}>
                        <span style={{ color: "var(--highlight)", fontFamily: "'JetBrains Mono', monospace", fontWeight: 700 }}>◇</span>
                        <span>{x}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>

              <div style={{ padding: "24px 28px", border: "1px solid var(--ink)", background: "var(--paper)" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 8 }}>AFFILIATE PROGRAMS</div>
                <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, marginBottom: 12 }}>提携アフィリエイトプログラム</h3>
                <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, marginBottom: 12 }}>
                  cynix.jpは以下のASP・アフィリエイトプログラムと提携しています。記事内のリンクからご契約された場合、当社に紹介料が支払われることがあります。
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                  {["A8.net", "バリューコマース", "もしもアフィリエイト", "アクセストレード", "afb", "Amazon Associates", "楽天アフィリエイト"].map((x) => (
                    <span key={x} style={{ padding: "6px 12px", background: "var(--cream)", border: "1px solid var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700 }}>{x}</span>
                  ))}
                </div>
              </div>
            </div>
          )}

          {tab === "tokutei" && (
            <div>
              <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: "0 0 24px", textAlign: "center" }}>
                特定商取引法に基づく表記
              </h2>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--muted)", textAlign: "center", margin: "0 0 40px", borderBottom: "1px solid var(--ink)", paddingBottom: 24 }}>
                特定商取引に関する法律 (特商法) 第 11 条に基づき、 cynix.jp の運営に関する事項を以下の通り表示します。
              </p>
              <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.85 }}>
                <tbody>
                  {[
                    ["販売事業者", "JPSM Group (cynix.jp 編集部)"],
                    ["運営責任者", "三宅 直人 (編集長)"],
                    ["所在地", "詳細はメールにてご請求ください (cynix@jpsm.ne.jp)"],
                    ["お問い合わせ", "cynix@jpsm.ne.jp"],
                    ["対応時間", "平日 10:00–18:00 (土日祝 / 年末年始を除く)"],
                    ["販売価格", "本媒体は無料で閲覧できます。 広告掲載やタイアップに関するお見積りは別途ご案内します。"],
                    ["商品代金以外の必要料金", "なし (本媒体は読者から料金を徴収していません)。 通信料は読者各自の負担となります。"],
                    ["お支払い方法", "広告掲載・タイアップ等の有償サービスは銀行振込 (掲載前 100% 前払)"],
                    ["お支払い時期", "請求書発行後 14 日以内"],
                    ["商品の引渡し時期", "広告掲載は別途契約日に従います。 記事公開は審査・編集後、 通常 2–4 週間以内"],
                    ["返品・キャンセル", "デジタル広告サービスの性質上、 公開後の返金・キャンセルは原則お受けしません。 重大な瑕疵がある場合は別途協議"],
                    ["免責事項", "本媒体に掲載される情報は、 公開時点で編集部が確認した範囲で正確性を期していますが、 サービス提供者の都合により仕様や料金が変更される可能性があります。 最新情報は各サービス公式サイトでご確認ください。"],
                  ].map(([k, v]) => (
                    <tr key={k} style={{ borderBottom: "1px solid var(--ink)" }}>
                      <th style={{ textAlign: "left", padding: "16px 20px 16px 0", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.1em", color: "var(--vermilion)", fontWeight: 700, textTransform: "uppercase", verticalAlign: "top", width: 200 }}>{k}</th>
                      <td style={{ padding: "16px 0", verticalAlign: "top" }}>{v}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
              <div style={{ marginTop: 32, padding: "20px 24px", background: "var(--cream)", border: "1px dashed var(--ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, lineHeight: 1.7, letterSpacing: "0.05em", color: "var(--muted)" }}>
                ※ 所在地・電話番号の詳細をご確認になりたい場合は、 cynix@jpsm.ne.jp までご連絡ください。 担当者から個別にご案内いたします。<br />
                ※ 本表記は 2026年4月 時点のものです。 改訂時は本ページに掲載します。
              </div>
            </div>
          )}

          {tab === "cookie" && (
            <div>
              <h2 style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 32, fontWeight: 700, lineHeight: 1.3, margin: "0 0 24px", textAlign: "center" }}>
                Cookieポリシー
              </h2>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.95, color: "var(--muted)", textAlign: "center", margin: "0 0 40px", borderBottom: "1px solid var(--ink)", paddingBottom: 24, textWrap: "pretty" }}>
                cynix.jpは、サービスの品質向上と読者体験のために、最小限のCookieを利用しています。読者の選択を尊重し、不要なトラッキングは行いません。
              </p>

              <div style={{ overflowX: "auto", marginBottom: 32 }}>
                <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "'Noto Sans JP', serif" }}>
                  <thead>
                    <tr style={{ background: "var(--ink)", color: "var(--paper)" }}>
                      {["分類", "目的", "保存期間", "拒否可否"].map((h) => (
                        <th key={h} style={{ padding: "12px 16px", textAlign: "left", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.1em", fontWeight: 700 }}>{h}</th>
                      ))}
                    </tr>
                  </thead>
                  <tbody>
                    {[
                      ["必須Cookie", "ログイン状態の保持・セッション管理", "セッション", "不可（必須）"],
                      ["パフォーマンスCookie", "アクセス解析（Plausible・匿名集計）", "30日", "可"],
                      ["機能Cookie", "テーマ・読了位置の保存", "1年", "可"],
                      ["広告Cookie", "—（使用していません）", "—", "—"],
                    ].map((row, i) => (
                      <tr key={i} style={{ borderBottom: "1px dashed var(--ink)" }}>
                        {row.map((c, j) => (
                          <td key={j} style={{
                            padding: "14px 16px",
                            fontFamily: j === 0 ? "'Noto Sans JP', serif" : "'Noto Serif JP', serif",
                            fontSize: 13, fontWeight: j === 0 ? 700 : 400,
                            color: c === "—（使用していません）" || c === "—" ? "var(--muted)" : "var(--ink)",
                          }}>
                            {j === 0 && i === 0 && <span style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: "var(--vermilion)", marginRight: 8, verticalAlign: "middle" }}></span>}
                            {c}
                          </td>
                        ))}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <div style={{ padding: "24px 28px", background: "var(--cream)", border: "1px solid var(--ink)" }}>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 8 }}>OPT-OUT — 拒否方法</div>
                <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, margin: 0 }}>
                  パフォーマンスCookie・機能Cookieは、ブラウザの設定よりいつでも拒否いただけます。本媒体の主要機能はすべてのCookieを拒否した状態でも利用可能です（一部の利便性機能を除く）。
                </p>
              </div>
            </div>
          )}
        </div>

        {/* Document footer / signature */}
        <div style={{
          padding: "20px 32px", borderTop: "1px solid var(--ink)", background: "var(--cream)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.1em", color: "var(--muted)",
        }}>
          <span>SIGNED BY 編集長 三宅 直人 / NAOTO MIYAKE</span>
          <span>株式会社cynix編集部 · CYNIX EDITORIAL CO., LTD.</span>
        </div>
      </div>

      {/* Quick links */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--ink)", marginBottom: 64 }}>
        {[
          { t: "規約に関するお問い合わせ", e: "legal@cynix.jp", desc: "規約解釈・適用範囲についてのご相談" },
          { t: "プライバシーに関するお問い合わせ", e: "privacy@cynix.jp", desc: "個人情報の開示・訂正・削除のご依頼" },
          { t: "誤情報の指摘", e: "fact@cynix.jp", desc: "記事内容の誤り・古い情報のご指摘" },
        ].map((x, i, arr) => (
          <div key={x.e} style={{ padding: "24px 28px", borderRight: i < arr.length - 1 ? "1px solid var(--ink)" : "none" }}>
            <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 14, fontWeight: 900, marginBottom: 8, lineHeight: 1.4 }}>{x.t}</div>
            <a href={`mailto:${x.e}`} style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, fontWeight: 700, color: "var(--vermilion)", textDecoration: "none", borderBottom: "1px solid currentColor", display: "inline-block", marginBottom: 8 }}>{x.e} →</a>
            <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.65, color: "var(--muted)", margin: 0 }}>{x.desc}</p>
          </div>
        ))}
      </div>

      <Colophon />
    </div>
  );
};

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