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

const POLICY_TABLE = [
  { q: "編集部評価は変えられますか？", a: "いいえ。タイアップであっても、編集部の評価・順位は購入できません。これは創刊時から変わらない原則です。" },
  { q: "競合除外は可能ですか？", a: "Premiumタイアップに限り、公開後60日間は同カテゴリの競合タイアップを受けません。Standardは競合除外の対象外です。" },
  { q: "[PR]ラベルは外せますか？", a: "外せません。景品表示法・媒体倫理に基づき、PRおよびSponsoredラベルは記事冒頭・末尾・メタタグに恒久表示します。" },
  { q: "公開前の原稿確認はできますか？", a: "事実関係の確認のみ可能です。表現・順位・編集部評価への介入は受け付けません。修正依頼は最大2回まで。" },
  { q: "成果が出なかった場合の保証は？", a: "PV保証・CV保証は行いません。実績指標 (PV・滞在・スクロール) はレポート提供しますが、結果保証型の商材ではありません。" },
];

const App = () => (
  <>
    <SharedMasthead section="PRICING" />
    <main className="mod-shell">
      <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "MEDIA KIT", href: "media-kit.html" }, { label: "PRICING" }]} />

      <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 }}>RATE CARD — 2026 SPRING</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 }}>Tie-up & Sponsored</div>
        <p style={{ maxWidth: 640, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>
          編集マガジン cynix.jp が提供する4種の広告メニューと、その編集ポリシーを公開します。<br />全ての枠は[PR]または[Sponsored]ラベルを伴います。
        </p>
      </section>

      <div className="mod-pricing" style={{ marginBottom: 48 }}>
        {AD_PACKAGES.map((p) => (
          <div key={p.id} className={"tier" + (p.featured ? " featured" : "")}>
            {p.featured && <div className="ribbon">RECOMMENDED</div>}
            <div className="rank">{p.rank}</div>
            <h3>{p.title}</h3>
            <div className="price">{p.priceLabel}</div>
            <div className="duration">{p.duration}</div>
            <ul>
              {p.deliverables.map((d, i) => <li key={i}>{d}</li>)}
            </ul>
            <div className="sla">納期: {p.sla}</div>
            <a href={`contact.html?type=ad&pkg=${p.id}`} style={{ display: "block", padding: "12px", textAlign: "center", background: p.featured ? "var(--vermilion)" : "var(--ink)", color: "var(--paper)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", marginTop: "auto" }}>このメニューで相談する</a>
          </div>
        ))}
      </div>

      {/* Volume discount */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "48px 0 16px" }}>VOLUME DISCOUNT — ボリュームディスカウント</h2>
      <table style={{ width: "100%", borderCollapse: "collapse", border: "2px solid var(--ink)", marginBottom: 48 }}>
        <thead>
          <tr style={{ background: "var(--ink)", color: "var(--paper)" }}>
            <th style={{ padding: "12px 18px", textAlign: "left", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>契約規模</th>
            <th style={{ padding: "12px 18px", textAlign: "left", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>条件</th>
            <th style={{ padding: "12px 18px", textAlign: "right", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>割引</th>
          </tr>
        </thead>
        <tbody>
          {[
            ["年間契約", "12ヶ月分一括 (タイアップ4本以上 + バナー併用)", "−15%"],
            ["半期契約", "6ヶ月分一括", "−8%"],
            ["新規初回", "初めての広告主様 (Standard)", "−10% (1回限り)"],
            ["シリーズ", "同一広告主の連続タイアップ (3本目以降)", "−12% / 本"],
            ["教育機関・NPO", "学校法人・NPO法人様", "−25%"],
          ].map((r, i) => (
            <tr key={i} style={{ borderTop: i ? "1px solid var(--ink)" : "none" }}>
              <td style={{ padding: "12px 18px", fontWeight: 500 }}>{r[0]}</td>
              <td style={{ padding: "12px 18px", fontSize: 13 }}>{r[1]}</td>
              <td style={{ padding: "12px 18px", textAlign: "right", fontFamily: "'JetBrains Mono', monospace", color: "var(--vermilion)", fontWeight: 600 }}>{r[2]}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* Editorial policy */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "48px 0 16px" }}>EDITORIAL POLICY — 編集ポリシー</h2>
      <div style={{ background: "var(--cream)", border: "2px solid var(--ink)", padding: "28px 32px", marginBottom: 48 }}>
        {POLICY_TABLE.map((p, i) => (
          <details key={i} style={{ borderBottom: i < POLICY_TABLE.length - 1 ? "1px solid var(--ink)" : "none", padding: "14px 0" }}>
            <summary style={{ cursor: "pointer", fontFamily: "'Crimson Pro', serif", fontSize: 17, fontWeight: 500, listStyle: "none" }}>
              <span style={{ color: "var(--vermilion)", fontFamily: "'JetBrains Mono', monospace", marginRight: 10, fontSize: 13 }}>Q{String(i + 1).padStart(2, "0")}.</span>
              {p.q}
            </summary>
            <p style={{ margin: "10px 0 0 36px", fontSize: 13, lineHeight: 1.85 }}>{p.a}</p>
          </details>
        ))}
      </div>

      {/* Process */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "48px 0 16px" }}>PROCESS — 公開までの流れ</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", border: "2px solid var(--ink)", marginBottom: 48 }}>
        {[
          { n: "01", t: "お問い合わせ", d: "目的・予算・想定カテゴリをご共有ください。" },
          { n: "02", t: "編集部審査", d: "編集ポリシー適合性を編集会議で審査 (2-5営業日)。" },
          { n: "03", t: "見積・契約", d: "メニュー確定・契約書締結。" },
          { n: "04", t: "取材・執筆", d: "編集部による独自取材・実機検証 (4-10週間)。" },
          { n: "05", t: "公開・運用", d: "公開後12週間、レポートを月次で提供。" },
        ].map((s, i) => (
          <div key={s.n} style={{ padding: "24px 18px", borderRight: i < 4 ? "1px solid var(--ink)" : "none", background: i === 1 ? "var(--vermilion)" : i === 3 ? "var(--ink)" : "var(--paper)", color: i === 1 || i === 3 ? "var(--paper)" : "var(--ink)" }}>
            <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 600, lineHeight: 1, color: i === 1 || i === 3 ? "var(--paper)" : "var(--vermilion)" }}>{s.n}</div>
            <h4 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 16, fontWeight: 500, margin: "12px 0 6px" }}>{s.t}</h4>
            <p style={{ fontSize: 11, lineHeight: 1.7, margin: 0, opacity: 0.85 }}>{s.d}</p>
          </div>
        ))}
      </div>

      {/* Decline categories */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "48px 0 16px" }}>NOT ACCEPTED — お受けできない案件</h2>
      <div style={{ border: "1.5px solid var(--ink)", padding: "20px 24px", marginBottom: 48, fontSize: 13.5, lineHeight: 2 }}>
        以下のカテゴリの広告・タイアップはお引き受けしておりません:
        <ul style={{ margin: "10px 0 0 24px", lineHeight: 2 }}>
          <li>暗号資産・FX・投機性の高い金融商品</li>
          <li>情報商材・ネットワークビジネス</li>
          <li>誇大表現・効能表示が必要な健康食品/化粧品</li>
          <li>編集部が一次取材で品質を確認できないサービス</li>
          <li>明確な競合排除を条件とする独占契約</li>
        </ul>
      </div>

      {/* Final CTA */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "48px 56px", marginBottom: 48, textAlign: "center" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.25em", color: "var(--vermilion)", marginBottom: 12 }}>READY TO START?</div>
        <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 40, fontWeight: 500, margin: "0 0 20px", lineHeight: 1.2 }}>編集部と話す</h3>
        <p style={{ maxWidth: 540, margin: "0 auto 24px", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>具体的な見積りはお問い合わせフォームから。<br />2営業日以内に副編集長より個別にご連絡いたします。</p>
        <a href="/contact.html?type=ad" style={{ display: "inline-block", padding: "16px 48px", background: "var(--vermilion)", color: "var(--paper)", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase" }}>広告のお問い合わせ →</a>
      </section>

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

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