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

const App = () => {
  const featured = CASE_STUDIES.filter(c => c.featured);
  const others = CASE_STUDIES.filter(c => !c.featured);
  return (
    <>
      <SharedMasthead section="CASE STUDIES" />
      <main className="mod-shell">
        <Breadcrumb items={[{ label: "TOP", href: "index.html" }, { label: "MEDIA KIT", href: "media-kit.html" }, { label: "CASE STUDIES" }]} />

        <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 }}>SELECTED TIE-UPS — 2025-2026</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 }}>Case Studies</div>
          <p style={{ maxWidth: 680, margin: "20px auto 0", fontSize: 14, lineHeight: 1.85, opacity: 0.85 }}>編集部が引き受け、編集ポリシーに沿って制作したタイアップ事例。<br />掲載許諾を得たもののみ公開しています (匿名案件はクライアント名のみ伏字)。</p>
        </section>

        {/* Aggregate stats */}
        <div className="mod-stats" style={{ marginBottom: 48 }}>
          <div><div className="num">42</div><div className="lab">案件数</div><div className="sub">2025-08 創刊以降</div></div>
          <div><div className="num">2.8<span className="unit">%</span></div><div className="lab">平均CVR</div><div className="sub">業界平均0.8%</div></div>
          <div><div className="num">94</div><div className="lab">継続率 (%)</div><div className="sub">追加発注</div></div>
          <div><div className="num">12<span className="unit">業種</span></div><div className="lab">対応カテゴリ</div><div className="sub">サーバー〜SaaS</div></div>
        </div>

        {/* Featured */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 30, fontWeight: 500, margin: "0 0 24px" }}>FEATURED CASES — 主要事例</h2>
        {featured.map(c => (
          <div className="mod-case" key={c.slug}>
            <div className="cover" style={{ backgroundImage: `url(${c.cover})` }} data-pkg={c.package}></div>
            <div className="body">
              <div className="meta">
                <span><b>CLIENT</b> {c.client}</span>
                <span><b>PERIOD</b> {c.period}</span>
              </div>
              <h3>{c.challenge}</h3>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.85 }}><b style={{ color: "var(--vermilion)", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em" }}>APPROACH —</b> {c.approach}</p>
              <div className="results">
                {c.results.map((r, i) => <div key={i}><div className="v">{r.val}</div><div className="l">{r.lab}</div><div className="s">{r.sub}</div></div>)}
              </div>
              <blockquote>「{c.quote}」<cite>— {c.quoteBy}</cite></blockquote>
            </div>
          </div>
        ))}

        {/* Others */}
        <h2 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 26, fontWeight: 500, margin: "48px 0 16px" }}>OTHER CASES — その他の事例</h2>
        {others.map(c => (
          <div className="mod-case" key={c.slug}>
            <div className="cover" style={{ backgroundImage: `url(${c.cover})` }} data-pkg={c.package}></div>
            <div className="body">
              <div className="meta"><span><b>CLIENT</b> {c.client}</span><span><b>PERIOD</b> {c.period}</span></div>
              <h3 style={{ fontSize: 20 }}>{c.challenge}</h3>
              <p style={{ margin: 0, fontSize: 13, lineHeight: 1.8 }}>{c.approach}</p>
              <div className="results">
                {c.results.map((r, i) => <div key={i}><div className="v" style={{ fontSize: 22 }}>{r.val}</div><div className="l">{r.lab}</div><div className="s">{r.sub}</div></div>)}
              </div>
              <blockquote style={{ fontSize: 14 }}>「{c.quote}」<cite>— {c.quoteBy}</cite></blockquote>
            </div>
          </div>
        ))}

        <section style={{ background: "var(--cream)", border: "2px solid var(--ink)", padding: "40px 48px", margin: "48px 0", textAlign: "center" }}>
          <h3 style={{ fontFamily: "'Crimson Pro', serif", fontSize: 28, fontWeight: 500, margin: "0 0 14px" }}>同じ手法で記事を作りませんか</h3>
          <p style={{ maxWidth: 560, margin: "0 auto 24px", fontSize: 14, lineHeight: 1.8 }}>編集部が一次取材を行うタイアップは、広告では再現できない説得力を持ちます。</p>
          <a href="/contact.html?type=ad" style={{ display: "inline-block", padding: "14px 36px", background: "var(--vermilion)", color: "var(--paper)", fontFamily: "'JetBrains Mono', monospace", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>事例を相談する →</a>
        </section>

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

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