/* global React, ReactDOM, window */
const { AUTHORS, ARTICLES } = window.cynixDataExt;
const { TEAM_EXTRA, ALL_TEAM, ROLES, WORKFLOW } = window.cynixTeamData;
const { SharedMasthead, Breadcrumb, Colophon } = window.cynixShared;

// Group team by role badge
const byRole = {
  editorial: AUTHORS,
  tech: TEAM_EXTRA.filter((m) => m.badge === "TECH" || m.badge === "AI"),
  lab: TEAM_EXTRA.filter((m) => m.badge === "LAB"),
  ec_life: TEAM_EXTRA.filter((m) => m.badge === "EC" || m.badge === "LIFE"),
  fact: TEAM_EXTRA.filter((m) => m.badge === "FACT"),
};

// 動的メトリクス計算: AUTHORS の slug を持つ記事だけ集計。
// TEAM_EXTRA はまだ ARTICLES に出していないので metrics.articles / tested の hardcode (or 0) フォールバックを使う。
function metricsFor(p) {
  if (!p || !p.slug) return { articles: p?.metrics?.articles ?? 0, tested: p?.metrics?.tested };
  const mine = ARTICLES.filter((a) => a.author === p.slug || a.coAuthor === p.slug);
  if (mine.length === 0) {
    return { articles: p?.metrics?.articles ?? 0, tested: p?.metrics?.tested };
  }
  const tested = mine.reduce((sum, a) => {
    const t = (a.title || "") + " " + (a.deck || "");
    const m = t.match(/(\d+)\s*(?:社|選|本|つ|個)/);
    return sum + (m ? parseInt(m[1], 10) : 5);
  }, 0);
  return { articles: mine.length, tested };
}

// Person card — magazine portrait style
const PersonCard = ({ p, lead }) => {
  const stats = metricsFor(p);
  return (
  <div className="cross-person">
    <div className="portrait">
      <div className="avatar" style={{ backgroundImage: `url(${p.avatar})` }}></div>
      <div className="name-stack">
        <div className="role-en">{p.role_en || ""}</div>
        <div className="name-jp">{p.name_jp}</div>
        <div className="name-en">{p.name_en}</div>
      </div>
      {lead && <div className="lead-stamp">EDITORIAL<br />LEAD</div>}
    </div>
    <div className="bio">
      <div className="meta-row">
        <span>{p.role_jp}</span>
        {p.age && <span>· {p.age}歳</span>}
        {p.metrics?.since && <span>· SINCE {p.metrics.since}</span>}
      </div>
      <p className="bio-text">{p.bio_long || p.bio}</p>
      <div className="creed">
        <span className="quot">"</span>
        {p.creed}
        <span className="quot end">"</span>
      </div>
      <div className="exp">
        {(p.expertise || []).slice(0, 5).map((e) => (
          <span key={e} className="cross-tag" style={{ fontSize: 10 }}>#{e}</span>
        ))}
      </div>
      <div className="m-stats">
        <div><span className="n">{stats.articles}</span><span className="l">ARTICLES</span></div>
        {stats.tested != null && <div><span className="n">{stats.tested}</span><span className="l">TESTED</span></div>}
        <div><span className="n">{p.metrics?.since || "—"}</span><span className="l">JOINED</span></div>
      </div>
    </div>
  </div>
  );
};

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

    <div className="cross-head">
      <div>
        <div className="kicker">CYNIX.JP — MASTHEAD 2026</div>
        <h1>
          <em>{ALL_TEAM.length}人</em>で、<br />毎月の号を綴じています。
        </h1>
        <p className="deck">
          編集部はサーバーエンジニア出身の編集長を筆頭に、EC経営者・サロンオーナー・AIプロンプトエンジニアまで、現場で実務を持つメンバーで構成されています。雑誌の信頼は、書き手の身元から始まる—— そう考えています。
        </p>
      </div>
      <div className="meta">
        <span>STAFF</span>
        <span className="big">{ALL_TEAM.length.toString().padStart(2, "0")}</span>
        <span>FULL TEAM</span>
        <span style={{ marginTop: 8 }}>UPDATED 2026/04/25</span>
      </div>
    </div>

    {/* Pull-quote — editorial creed */}
    <div style={{
      background: "var(--ink)", color: "var(--paper)", padding: "56px 64px",
      margin: "32px -32px", display: "grid", gridTemplateColumns: "auto 1fr auto",
      gap: 32, alignItems: "center",
    }}>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 64, color: "var(--vermilion)", fontWeight: 700, lineHeight: 0.8 }}>"</div>
      <div>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 24, fontWeight: 700, lineHeight: 1.6, margin: 0, letterSpacing: "-0.005em", textWrap: "balance" }}>
          書き手の顔が見えない記事は、雑誌ではなくパンフレットです。<br />
          私たちは、肩書きと過去の仕事と、月に何時間その分野に向き合っているかまでを、<br />読者の前に晒します。
        </p>
        <p style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--highlight)", fontWeight: 700, margin: "20px 0 0" }}>
          — 編集長 三宅 直人 / EDITORIAL CREED
        </p>
      </div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 64, color: "var(--vermilion)", fontWeight: 700, lineHeight: 0.8, transform: "rotate(180deg)" }}>"</div>
    </div>

    {/* Editorial leadership — 2-up portrait spread */}
    <div className="cross-h2">
      <span className="num">SECTION 01</span>
      <span className="label">編集部 — Editorial Leadership</span>
      <span className="right">2 LEADS · {AUTHORS.length} CORE</span>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginBottom: 56 }}>
      {AUTHORS.map((a, i) => (
        <PersonCard key={a.slug} p={a} lead={i === 0} />
      ))}
    </div>

    {/* Tech advisors */}
    <div className="cross-h2">
      <span className="num">SECTION 02</span>
      <span className="label">技術編集委員 — Tech Advisors</span>
      <span className="right">{byRole.tech.length} CONTRIBUTORS</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 48 }}>
      {byRole.tech.map((p) => <PersonCard key={p.slug} p={p} />)}
    </div>

    {/* EC + Life */}
    <div className="cross-h2">
      <span className="num">SECTION 03</span>
      <span className="label">EC・ライフスタイル編集委員</span>
      <span className="right">{byRole.ec_life.length} CONTRIBUTORS</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 48 }}>
      {byRole.ec_life.map((p) => <PersonCard key={p.slug} p={p} />)}
    </div>

    {/* Lab + Fact — smaller cards */}
    <div className="cross-h2">
      <span className="num">SECTION 04</span>
      <span className="label">ベンチ・ラボ / ファクトチェック</span>
      <span className="right">BACKSTAGE · {byRole.lab.length + byRole.fact.length} STAFF</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginBottom: 64 }}>
      {[...byRole.lab, ...byRole.fact].map((p) => <PersonCard key={p.slug} p={p} />)}
    </div>

    {/* Editorial workflow — 7-step process */}
    <div className="cross-h2">
      <span className="num">SECTION 05</span>
      <span className="label">編集ワークフロー — How One Article Is Made</span>
      <span className="right">7 STAGES · 30〜90 DAYS</span>
    </div>

    <div style={{
      border: "2px solid var(--ink)", padding: "32px 36px", marginBottom: 64,
      background: "var(--cream)",
    }}>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0,
        position: "relative",
      }}>
        {/* connecting line */}
        <div style={{
          position: "absolute", top: 28, left: "7%", right: "7%", height: 2,
          background: "var(--ink)", zIndex: 0,
        }}></div>
        {WORKFLOW.map((w, i) => (
          <div key={w.stage} style={{
            position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", padding: "0 8px",
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: "50%", background: "var(--paper)",
              border: "2px solid var(--ink)", display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "'JetBrains Mono', monospace", fontSize: 14, fontWeight: 700, color: "var(--vermilion)",
              marginBottom: 12,
            }}>{w.stage}</div>
            <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 14, fontWeight: 900, marginBottom: 2, textAlign: "center" }}>{w.label}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vermilion)", fontWeight: 700, marginBottom: 8, textAlign: "center" }}>{w.label_en}</div>
            <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 11, lineHeight: 1.55, textAlign: "center", margin: "0 0 8px", color: "var(--muted)" }}>{w.desc}</p>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.05em", color: "var(--ink)", fontWeight: 700, padding: "2px 6px", border: "1px solid var(--ink)", background: "var(--paper)" }}>
              LEAD: {w.lead}
            </div>
          </div>
        ))}
      </div>
    </div>

    {/* Roles glossary */}
    <div className="cross-h2">
      <span className="num">SECTION 06</span>
      <span className="label">ROLES GLOSSARY — 編成と役割</span>
      <span className="right">4 DEPARTMENTS</span>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginBottom: 48, border: "1px solid var(--ink)" }}>
      {ROLES.map((r, i) => (
        <div key={r.id} style={{
          padding: "20px 18px",
          borderRight: i < ROLES.length - 1 ? "1px solid var(--ink)" : "none",
        }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: "var(--vermilion)", fontWeight: 700, marginBottom: 6 }}>{r.title_en}</div>
          <div style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 18, fontWeight: 900, marginBottom: 8 }}>{r.title}</div>
          <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 12, lineHeight: 1.7, color: "var(--muted)", margin: 0 }}>{r.desc}</p>
        </div>
      ))}
    </div>

    {/* Join us */}
    <div style={{
      background: "var(--vermilion)", color: "var(--paper)", padding: "48px 56px",
      margin: "32px -32px", display: "grid", gridTemplateColumns: "1fr auto",
      gap: 32, alignItems: "center",
    }}>
      <div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.2em", fontWeight: 700, marginBottom: 8 }}>WE'RE HIRING — 寄稿者を募集</div>
        <h3 style={{ fontFamily: "'Noto Sans JP', serif", fontSize: 28, fontWeight: 900, lineHeight: 1.3, margin: "0 0 12px" }}>現場の知見を、編集部に持ち込んでくれる方へ。</h3>
        <p style={{ fontFamily: "'Noto Serif JP', serif", fontSize: 14, lineHeight: 1.85, margin: 0, opacity: 0.95 }}>
          サーバー、EC、SaaS、AI——いずれかの分野で実務経験のある書き手を募集しています。報酬は要相談、編集部の校閲・ベンチ環境を共有します。
        </p>
      </div>
      <a href="/contact.html" style={{
        display: "inline-flex", alignItems: "center", gap: 8, padding: "16px 32px",
        background: "var(--paper)", color: "var(--ink)", textDecoration: "none",
        fontFamily: "'Noto Sans JP', serif", fontWeight: 900, fontSize: 14,
        border: "2px solid var(--paper)",
      }}>応募する <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>→</span></a>
    </div>

    <Colophon />
  </div>
);

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