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

const fmt = (n) => n.toLocaleString("ja-JP");

const Bars = ({ data, color }) => (
  <div className="mod-bars">
    {data.map((r) => (
      <div className="row" key={r.lab}>
        <div>{r.lab}</div>
        <div className="track"><div className={"fill" + (color === "v" ? " v" : "")} style={{ width: r.pct + "%" }}></div></div>
        <div className="pct">{r.pct}%</div>
      </div>
    ))}
  </div>
);

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

      {/* Hero */}
      <section style={{ borderTop: "4px double var(--ink)", borderBottom: "4px double var(--ink)", padding: "56px 0 64px", margin: "16px 0 56px", textAlign: "center" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.3em", color: "var(--vermilion)", marginBottom: 16 }}>FOR ADVERTISERS — 2026</div>
        <h1 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 88, fontWeight: 500, lineHeight: 0.95, margin: 0, letterSpacing: "-0.03em" }}>媒体資料</h1>
        <div style={{ fontFamily: "'Crimson Pro', serif", fontSize: 22, fontStyle: "italic", marginTop: 8, opacity: 0.7 }}>Cynix Media Kit</div>
        <p style={{ maxWidth: 640, margin: "24px auto 0", fontSize: 15, lineHeight: 1.85 }}>
          実機検証を旨とする編集マガジンの読者層と広告枠について、定量的にお伝えします。<br />
          数値は2026年3月単月の実測値です。
        </p>
      </section>

      {/* KPI tiles */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 16px" }}>READERSHIP — 月間実績</h2>
      <div className="mod-stats" style={{ marginBottom: 56 }}>
        <div><div className="num">{fmt(BUSINESS.readership.monthlyPV)}<span className="unit">PV</span></div><div className="lab">MONTHLY PAGEVIEWS</div><div className="sub">2026-03 単月</div></div>
        <div><div className="num">{fmt(BUSINESS.readership.monthlyUU)}<span className="unit">UU</span></div><div className="lab">UNIQUE USERS</div><div className="sub">前年同月比 +52%</div></div>
        <div><div className="num">{BUSINESS.readership.avgSession}</div><div className="lab">AVG. SESSION</div><div className="sub">業界平均 1分20秒</div></div>
        <div><div className="num">{BUSINESS.readership.returnRate}<span className="unit">%</span></div><div className="lab">RETURN RATE</div><div className="sub">月内再訪率</div></div>
      </div>

      {/* Demographics */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 24px" }}>DEMOGRAPHICS — 読者属性</h2>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginBottom: 56 }}>
        <div style={{ border: "1.5px solid var(--ink)", padding: 24 }}>
          <h6 style={{ margin: "0 0 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em" }}>AGE — 年齢構成</h6>
          <Bars data={BUSINESS.demographics.age} color="v" />
        </div>
        <div style={{ border: "1.5px solid var(--ink)", padding: 24 }}>
          <h6 style={{ margin: "0 0 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em" }}>ROLE — 職種構成</h6>
          <Bars data={BUSINESS.demographics.role} />
        </div>
        <div style={{ border: "1.5px solid var(--ink)", padding: 24 }}>
          <h6 style={{ margin: "0 0 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em" }}>COMPANY SIZE — 企業規模</h6>
          <Bars data={BUSINESS.demographics.company} />
        </div>
        <div style={{ border: "1.5px solid var(--ink)", padding: 24 }}>
          <h6 style={{ margin: "0 0 16px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em" }}>INTENT — 検討フェーズ</h6>
          <Bars data={BUSINESS.demographics.intent} color="v" />
        </div>
      </div>

      {/* Categories */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 16px" }}>CATEGORY MIX — トラフィック内訳</h2>
      <div style={{ border: "2px solid var(--ink)", padding: "24px 28px", marginBottom: 56 }}>
        <div style={{ display: "flex", height: 36, marginBottom: 14, border: "1px solid var(--ink)" }}>
          {BUSINESS.topCategories.map((c, i) => (
            <div key={c.slug} style={{ flex: c.pct, background: i % 2 === 0 ? "var(--ink)" : "var(--vermilion)", color: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.1em", borderRight: i < BUSINESS.topCategories.length - 1 ? "1px solid var(--paper)" : "none" }}>
              {c.title}
            </div>
          ))}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${BUSINESS.topCategories.length}, 1fr)`, gap: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 10 }}>
          {BUSINESS.topCategories.map((c) => (
            <div key={c.slug} style={{ textAlign: "center" }}>
              <div style={{ color: "var(--vermilion)", fontWeight: 600 }}>{c.pct}%</div>
              <div style={{ opacity: 0.6 }}>{fmt(c.pv)} PV</div>
            </div>
          ))}
        </div>
      </div>

      {/* Traffic sources */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 16px" }}>TRAFFIC SOURCES — 流入経路</h2>
      <div style={{ border: "1.5px solid var(--ink)", padding: 24, marginBottom: 56 }}>
        <Bars data={BUSINESS.trafficSources.map(t => ({ lab: t.src, pct: t.pct }))} color="v" />
      </div>

      {/* Reach */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 16px" }}>OWNED CHANNELS — 自社チャネル</h2>
      <div className="mod-stats" style={{ marginBottom: 56 }}>
        <div><div className="num">{fmt(BUSINESS.readership.newsletter)}</div><div className="lab">NEWSLETTER</div><div className="sub">登録者数</div></div>
        <div><div className="num">{fmt(BUSINESS.readership.twitter)}</div><div className="lab">X / TWITTER</div><div className="sub">フォロワー</div></div>
        <div><div className="num">{fmt(BUSINESS.readership.note)}</div><div className="lab">NOTE</div><div className="sub">フォロワー</div></div>
        <div><div className="num">{BUSINESS.readership.pagesPerSession}</div><div className="lab">PAGES / SESSION</div><div className="sub">回遊率</div></div>
      </div>

      {/* Ad packages summary */}
      <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 32, fontWeight: 500, margin: "0 0 16px" }}>AD PACKAGES — 広告メニュー</h2>
      <p style={{ marginBottom: 24, fontSize: 14, opacity: 0.75 }}>詳細・申込は <a href="/pricing.html" style={{ borderBottom: "1px solid var(--vermilion)" }}>料金ページ</a> をご覧ください。</p>
      <div className="mod-pricing" style={{ marginBottom: 56 }}>
        {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>
          </div>
        ))}
      </div>

      {/* CTA */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "48px 56px", marginBottom: 64, display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.25em", color: "var(--vermilion)", marginBottom: 12 }}>NEXT STEP</div>
          <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 36, fontWeight: 500, margin: "0 0 16px", lineHeight: 1.2 }}>正式な媒体資料 (PDF) を希望される方へ</h3>
          <p style={{ fontSize: 14, lineHeight: 1.85, margin: 0, opacity: 0.85 }}>本ページは公開版のサマリーです。<br />詳細な属性データ・実績事例・割引メニュー・連絡先を含めたPDF版媒体資料は、お問い合わせフォームから申請ください。営業時間内 1営業日以内にお送りします。</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <a href="/contact.html?type=ad" style={{ display: "block", padding: "16px 24px", background: "var(--vermilion)", color: "var(--paper)", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase" }}>媒体資料 PDF を請求</a>
          <a href="/case-studies.html" style={{ display: "block", padding: "16px 24px", border: "1px solid var(--paper)", color: "var(--paper)", textAlign: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>過去のタイアップ実績を見る</a>
        </div>
      </section>

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

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