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

const PRINCIPLES = [
  {
    n: "01",
    t: "実機で測る",
    en: "Measure, don't quote.",
    body: "他媒体のスペック表を引き写すことは、編集行為ではありません。私たちは対象サービスを編集部の予算で実契約し、最低30日、長いものは90日連続で実測します。深夜帯・休日帯を含めた全時間帯を等しく扱います。",
  },
  {
    n: "02",
    t: "数字に出典をつける",
    en: "Cite every number.",
    body: "記事中の全ての数値には、計測日時・計測条件・出典を明記します。あいまいな「速い」「安い」は使いません。読者が再現可能な形で書くことを目標にしています。",
  },
  {
    n: "03",
    t: "広告主の影響を受けない",
    en: "Editorial > Sales.",
    body: "ASP・アフィリエイト経由の収益で運営しますが、選定・順位・評価において広告主の意向を一切受け付けません。提供品の受領も原則行いません。広告枠とコンテンツを混ぜることはありません。",
  },
  {
    n: "04",
    t: "書き手の身元を晒す",
    en: "Names and faces, always.",
    body: "全記事に著者の本名・経歴・連絡先を明示します。匿名の記事は出しません。執筆者が責任を負える情報だけを載せる、という姿勢の表明です。",
  },
  {
    n: "05",
    t: "古い情報は記事の責任",
    en: "Stale info is editorial debt.",
    body: "公開後30日・90日・1年の節目で再点検し、変更があれば追記または訂正します。料金改定や仕様変更で記事が事実と乖離した場合は、明示的に訂正履歴を残します。",
  },
  {
    n: "06",
    t: "読者の時間を尊ぶ",
    en: "Respect the reader's time.",
    body: "答えは記事の冒頭に置きます。ランキングは結論から、比較表は早く、長文は丁寧に。読了時間を表示し、急いでいる人には「Quick Answer」モードを用意します。",
  },
];

const TIMELINE = [
  { y: "2025", m: "07", t: "編集部発足", d: "編集長・三宅、副編集長・林の2名で起案。編集方針の草案を執筆。" },
  { y: "2025", m: "08", t: "創刊号 (Vol.01) 公開", d: "「夏の夜、サイトが落ちる前に」VPS9社の80日連続ベンチ特集で開始。" },
  { y: "2025", m: "10", t: "技術編集委員 加入", d: "佐藤・青木が常勤化。ベンチ・ラボの実機環境を整備。" },
  { y: "2025", m: "12", t: "ファクトチェック制度導入", d: "森が専任ファクトチェッカーとして加入。全記事を二重確認体制に。" },
  { y: "2026", m: "02", t: "シリーズ連載 開始", d: "「VPS選定の科学」「起業1ヶ月目」など、号をまたぐ連載企画をスタート。" },
  { y: "2026", m: "04", t: "Vol.09 / 9号目突破", d: "累計記事108本・寄稿者12名・年間PV予想450万到達見込み。" },
];

const NOT_DOING = [
  { id: "PR記事の混入", desc: "広告枠と編集記事は明確に分離。PR記事は[PR]ラベルを必ず明示。" },
  { id: "提供品レビュー", desc: "編集部が選んでないサービスは扱いません。送られてきても返送します。" },
  { id: "順位の差し替え", desc: "報酬条件・代理店からの依頼で、ランキングの順位を変えることはありません。" },
  { id: "煽り見出し", desc: "「衝撃!」「最強!」「絶対」など、根拠を伴わない煽り表現は使いません。" },
  { id: "AIの代筆", desc: "AIをアシストツールとして使うことはありますが、原稿の中核はすべて人間が書きます。" },
  { id: "古い情報の放置", desc: "公開後の検証を怠った記事は、無印掲載のまま残しません。訂正・追記または取り下げ。" },
];

const App = () => (
  <div className="cross-shell">
    <SharedMasthead section="ABOUT · EDITORIAL · POLICY" />
    <Breadcrumb items={[
      { label: "HOME", href: "cynix-jp.html" },
      { label: "ABOUT" },
    ]} />

    <div className="cross-head">
      <div>
        <div className="kicker">CYNIX.JP — ABOUT & EDITORIAL POLICY</div>
        <h1>
          <em>cynix.jp</em> とは何か。<br />なぜ、雑誌で在ろうとするのか。
        </h1>
        <p className="deck">
          cynix.jpは、サーバー・SaaS・EC・AIなど中小事業者のIT選定を支援するための、月刊オンライン雑誌です。 アフィリエイト主導の比較サイトが「広告枠」になりがちな日本市場で、私たちは <strong>編集者の責任で書く媒体</strong> を運営したいと考えました。
        </p>
      </div>
      <div className="meta">
        <span>FOUNDED</span>
        <span className="big">2025</span>
        <span>VOL.09 · APRIL 2026</span>
        <span style={{ marginTop: 8 }}>108 ARTICLES · 12 WRITERS</span>
      </div>
    </div>

    {/* Mission */}
    <div className="cross-h2">
      <span className="num">SECTION 01</span>
      <span className="label">編集理念 — Mission</span>
      <span className="right">3 LINES</span>
    </div>
    <div style={{
      padding: "56px 72px", border: "2px solid var(--ink)", marginBottom: 56,
      background: "linear-gradient(135deg, var(--paper) 0%, var(--cream) 100%)",
      position: "relative",
    }}>
      <div style={{ position: "absolute", top: 16, right: 24, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.2em", color: "var(--vermilion)", fontWeight: 700 }}>
        OUR MISSION ◇ 三行
      </div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, counterReset: "mission" }}>
        {[
          "中小事業者の「選ぶ・契約する・運用する」を、最も信頼できる言葉で支える。",
          "数字とエピソードを両方持ち込んだ記事だけを、雑誌として綴じる。",
          "10年後に読み返しても恥ずかしくない仕事を、毎月積み上げる。",
        ].map((m, i) => (
          <li key={i} style={{
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline",
            padding: "20px 0",
            borderBottom: i < 2 ? "1px dashed var(--ink)" : "none",
          }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 48, fontWeight: 700, color: "var(--vermilion)", lineHeight: 1 }}>{String(i + 1).padStart(2, "0")}</div>
            <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 22, fontWeight: 700, lineHeight: 1.5, margin: 0, letterSpacing: "-0.005em", textWrap: "pretty" }}>{m}</p>
          </li>
        ))}
      </ol>
    </div>

    {/* 6 Principles */}
    <div className="cross-h2">
      <span className="num">SECTION 02</span>
      <span className="label">編集方針 — 6つの約束</span>
      <span className="right">EDITORIAL PRINCIPLES</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, marginBottom: 56, border: "1px solid var(--ink)" }}>
      {PRINCIPLES.map((p, i) => (
        <div key={p.n} style={{
          padding: "32px 36px",
          borderRight: i % 2 === 0 ? "1px solid var(--ink)" : "none",
          borderBottom: i < 4 ? "1px solid var(--ink)" : "none",
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 20,
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace", fontSize: 36, fontWeight: 700,
            color: "var(--vermilion)", lineHeight: 1, alignSelf: "start",
          }}>{p.n}</div>
          <div>
            <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 22, fontWeight: 900, lineHeight: 1.3, marginBottom: 4 }}>{p.t}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 12, textTransform: "uppercase" }}>{p.en}</div>
            <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, color: "var(--ink)", margin: 0, textWrap: "pretty" }}>{p.body}</p>
          </div>
        </div>
      ))}
    </div>

    {/* What we don't do */}
    <div className="cross-h2">
      <span className="num">SECTION 03</span>
      <span className="label">私たちがやらないこと — What We Don't Do</span>
      <span className="right">6 NOs</span>
    </div>
    <div style={{
      background: "var(--ink)", color: "var(--paper)", padding: "40px 48px", marginBottom: 56,
    }}>
      <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 15, lineHeight: 1.85, margin: "0 0 24px", color: "var(--paper)", opacity: 0.92, textWrap: "pretty" }}>
        編集方針は、書くことよりも「書かないこと」のリストを持つことで、輪郭がはっきりすると考えています。以下は、cynix.jpが意識的に避ける6つの行動です。
      </p>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
        {NOT_DOING.map((x, i) => (
          <li key={x.id} style={{
            padding: "16px 20px",
            borderTop: "1px solid rgba(244,239,227,0.2)",
            borderRight: i % 2 === 0 ? "1px solid rgba(244,239,227,0.2)" : "none",
            display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "start",
          }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 18, fontWeight: 700, color: "var(--vermilion)", lineHeight: 1.2 }}>×</span>
            <div>
              <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 14, fontWeight: 900, marginBottom: 4 }}>{x.id}</div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.7, opacity: 0.85, margin: 0, textWrap: "pretty" }}>{x.desc}</p>
            </div>
          </li>
        ))}
      </ul>
    </div>

    {/* Timeline / history */}
    <div className="cross-h2">
      <span className="num">SECTION 04</span>
      <span className="label">沿革 — Editorial History</span>
      <span className="right">SINCE 2025-08</span>
    </div>
    <div style={{
      display: "grid", gridTemplateColumns: "auto 1fr", gap: 0, marginBottom: 56,
      border: "1px solid var(--ink)", background: "var(--cream)",
    }}>
      <div style={{
        background: "var(--ink)", color: "var(--paper)", padding: "32px 24px",
        fontFamily: "'Noto Serif JP', serif", fontWeight: 900,
        display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", gap: 8,
        minWidth: 140,
      }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", color: "var(--highlight)", fontWeight: 700, textTransform: "uppercase" }}>SINCE</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 48, lineHeight: 1, fontWeight: 700 }}>2025</span>
        <span style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 12, opacity: 0.8 }}>創刊年</span>
      </div>
      <ol style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {TIMELINE.map((t, i) => (
          <li key={i} style={{
            display: "grid", gridTemplateColumns: "120px 1fr", gap: 20,
            padding: "16px 24px",
            borderBottom: i < TIMELINE.length - 1 ? "1px dashed var(--ink)" : "none",
            alignItems: "baseline",
          }}>
            <span style={{
              fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.05em",
              color: "var(--vermilion)", fontWeight: 700,
            }}>{t.y}/{t.m}</span>
            <div>
              <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 16, fontWeight: 900, marginBottom: 4 }}>{t.t}</div>
              <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.7, color: "var(--muted)", margin: 0 }}>{t.d}</p>
            </div>
          </li>
        ))}
      </ol>
    </div>

    {/* Disclosure / how we make money */}
    <div className="cross-h2">
      <span className="num">SECTION 05</span>
      <span className="label">経済的独立性 — How We Make Money</span>
      <span className="right">DISCLOSURE</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 64 }}>
      <div style={{ padding: "32px 36px", border: "2px solid var(--ink)", background: "var(--paper)" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 12 }}>REVENUE BREAKDOWN — 2026年Q1</div>
        <div style={{ marginBottom: 16 }}>
          {[
            { src: "アフィリエイト報酬", pct: 68 },
            { src: "編集部スポンサー", pct: 18 },
            { src: "ECコンサル委託", pct: 10 },
            { src: "その他", pct: 4 },
          ].map((r) => (
            <div key={r.src} style={{ marginBottom: 10 }}>
              <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "'Noto Sans JP', serif", fontSize: 13, fontWeight: 700, marginBottom: 4 }}>
                <span>{r.src}</span><span style={{ fontFamily: "'JetBrains Mono', monospace", color: "var(--vermilion)" }}>{r.pct}%</span>
              </div>
              <div style={{ height: 6, background: "var(--cream)", border: "1px solid var(--ink)", position: "relative" }}>
                <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${r.pct}%`, background: "var(--ink)" }}></div>
              </div>
            </div>
          ))}
        </div>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.7, color: "var(--muted)", margin: 0 }}>
          アフィリエイト報酬は記事公開後に発生する成果連動型のため、執筆時点で報酬条件は確定していません。報酬の高低は順位決定に影響しません。
        </p>
      </div>
      <div style={{ padding: "32px 36px", border: "2px solid var(--ink)", background: "var(--ink)", color: "var(--paper)" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", color: "var(--highlight)", fontWeight: 700, marginBottom: 12 }}>FIREWALL — 編集と営業の分離</div>
        <h4 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 22, fontWeight: 900, lineHeight: 1.4, margin: "0 0 16px" }}>編集者は、その月の収益を見ません。</h4>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, opacity: 0.92, margin: "0 0 12px" }}>
          編集部のメンバーは、各サービスの報酬条件・成果数値にアクセスできません。営業担当との間に明確なファイアウォールを敷き、執筆と営業活動が混ざらないようにしています。
        </p>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 13, lineHeight: 1.85, opacity: 0.92, margin: 0 }}>
          編集部に営業から「この案件を上位に」という打診があった場合、その記録は次号のEditor's Noteで匿名公開する方針です。
        </p>
      </div>
    </div>

    {/* Closing CTA */}
    <div style={{
      background: "var(--vermilion)", color: "var(--paper)", padding: "56px 64px",
      margin: "0 -32px 0", textAlign: "center",
    }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", fontWeight: 700, marginBottom: 16 }}>JOIN US — もし共感していただけたら</div>
      <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 32, fontWeight: 900, lineHeight: 1.3, margin: "0 0 24px", maxWidth: 720, marginInline: "auto" }}>
        誰かの夜のサイトが落ちないように、<br />毎月、丁寧に綴じ続けます。
      </h3>
      <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
        <a href="/cynix-jp.html" style={{ padding: "14px 28px", background: "var(--paper)", color: "var(--ink)", textDecoration: "none", fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 14 }}>最新号を読む →</a>
        <a href="/contact.html" style={{ padding: "14px 28px", background: "transparent", color: "var(--paper)", textDecoration: "none", fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 14, border: "2px solid var(--paper)" }}>編集部に連絡する</a>
      </div>
    </div>

    <Colophon />
  </div>
);

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