// Sygnal app mockups — recreated to match the latest actual UI at sygnal-main/frontend.
// Nav, copy, components, and color tokens all follow the real frontend.


/* ───────── Icons (lucide-react style: stroke = currentColor) ───────── */
const Icon = ({ d, size = 15, fill = "none", strokeWidth = 1.8, viewBox = "0 0 24 24", children }) => (
  <svg className="ic" width={size} height={size} viewBox={viewBox} fill={fill} stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
    {d ? <path d={d} /> : children}
  </svg>
);
const IconDatabase = (p) => <Icon {...p} d="M4 6c0-1.7 3.6-3 8-3s8 1.3 8 3-3.6 3-8 3-8-1.3-8-3zM4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />;
const IconList = (p) => <Icon {...p} d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />;
const IconSend = (p) => <Icon {...p} d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />;
const IconTrendingUp = (p) => <Icon {...p} d="M3 17l6-6 4 4 8-8M14 7h7v7" />;
const IconSparkles = (p) => <Icon {...p} d="M12 3l2.4 5.6L20 11l-5.6 2.4L12 19l-2.4-5.6L4 11l5.6-2.4L12 3zM19 3l.9 2.1L22 6l-2.1.9L19 9l-.9-2.1L16 6l2.1-.9L19 3zM5 16l.7 1.6L7.3 18l-1.6.7L5 20l-.7-1.6L2.7 18l1.6-.7L5 16z" />;
const IconBan = (p) => <Icon {...p} d="M12 22a10 10 0 110-20 10 10 0 010 20zM4.93 4.93l14.14 14.14" />;
const IconSettings = (p) => <Icon {...p} d="M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 01-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z" />;
const IconBuilding = (p) => <Icon {...p} d="M3 21h18M5 21V7l7-4 7 4v14M9 9h.01M9 12h.01M9 15h.01M13 9h.01M13 12h.01M13 15h.01" />;
const IconCheck = (p) => <Icon {...p} d="M20 6L9 17l-5-5" />;
const IconCheckCircle = (p) => <Icon {...p} d="M22 11.08V12a10 10 0 11-5.93-9.14M22 4L12 14.01l-3-3" />;
const IconXCircle = (p) => <Icon {...p} d="M12 22a10 10 0 100-20 10 10 0 000 20zM15 9l-6 6M9 9l6 6" />;
const IconAlertTriangle = (p) => <Icon {...p} d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0zM12 9v4M12 17h.01" />;
const IconClock = (p) => <Icon {...p} d="M12 22a10 10 0 100-20 10 10 0 000 20zM12 6v6l4 2" />;
const IconShield = (p) => <Icon {...p} d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />;
const IconSearch = (p) => <Icon {...p} d="M21 21l-4.3-4.3M17 10a7 7 0 11-14 0 7 7 0 0114 0z" />;
const IconFilter = (p) => <Icon {...p} d="M22 3H2l8 9.5V19l4 2v-8.5L22 3z" />;
const IconChevronRight = (p) => <Icon {...p} d="M9 18l6-6-6-6" />;
const IconChevronDown = (p) => <Icon {...p} d="M6 9l6 6 6-6" />;
const IconPlay = (p) => <Icon {...p} d="M5 3l14 9-14 9V3z" fill="currentColor" strokeWidth="0" />;
const IconPause = (p) => <Icon {...p} d="M6 4h4v16H6zM14 4h4v16h-4z" fill="currentColor" strokeWidth="0" />;
const IconArrowRight = (p) => <Icon {...p} d="M5 12h14M12 5l7 7-7 7" />;
const IconLink = (p) => <Icon {...p} d="M10 13a5 5 0 007.5.5l3-3a5 5 0 00-7-7l-1.7 1.7M14 11a5 5 0 00-7.5-.5l-3 3a5 5 0 007 7l1.7-1.7" />;
const IconCursor = (p) => <Icon {...p} d="M3 3l7 19 2.5-9 9-2.5L3 3z" />;
const IconCalendar = (p) => <Icon {...p} d="M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM16 2v4M8 2v4M3 10h18" />;
const IconUser = (p) => <Icon {...p} d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M12 11a4 4 0 100-8 4 4 0 000 8z" />;
const IconTarget = (p) => <Icon {...p} d="M12 22a10 10 0 100-20 10 10 0 000 20zM12 18a6 6 0 100-12 6 6 0 000 12zM12 14a2 2 0 100-4 2 2 0 000 4z" />;
const IconHelp = (p) => <Icon {...p} d="M12 22a10 10 0 100-20 10 10 0 000 20zM9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" />;
const IconExternal = (p) => <Icon {...p} d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3" />;
const IconDot = ({ color = "#16A34A" }) => (
  <span style={{ width: 7, height: 7, borderRadius: 99, background: color, display: "inline-block", flexShrink: 0 }} />
);

/* ───────── Sygnal brand mark (3 vertical bars — matches real frontend) ───────── */
const Mark = ({ scale = 1 }) => (
  <span className="brand-mark" style={{ height: 18 * scale }} aria-hidden="true">
    <i style={{ height: 8 * scale }}></i>
    <i style={{ height: 14 * scale }}></i>
    <i style={{ height: 8 * scale }}></i>
  </span>
);

/* ───────── Generic window chrome ─────────
   Renders at a fixed PC size (1440x900) inside a landscape frame that is
   scaled down to fit its container, so the screenshot keeps a real
   desktop-browser aspect ratio instead of going portrait. */
const WinChrome = ({ addr = "app.sygnal.jp", children }) => (
  <div className="mock-frame">
    <div className="mock-scale">
      <div className="win">
        <div className="win-bar">
          <div className="win-dots"><i /><i /><i /></div>
          <div className="win-addr">{addr}</div>
          <div style={{ width: 50 }} />
        </div>
        <div className="win-body">{children}</div>
      </div>
    </div>
  </div>
);

/* ───────── Shared sidebar (matches layout.tsx menuItems) ───────── */
const Sidebar = ({ active = "campaigns" }) => {
  const items = [
    { key: "database", label: "企業データベース", Ic: IconDatabase },
    { key: "lists", label: "リスト管理", Ic: IconList },
    { key: "campaigns", label: "案件管理", Ic: IconSend },
    { key: "sales-management", label: "営業管理", Ic: IconTrendingUp },
    { key: "insights", label: "AI分析", Ic: IconSparkles },
    { key: "ng-companies", label: "NG企業", Ic: IconBan },
    { key: "settings", label: "設定", Ic: IconSettings },
  ];
  return (
    <aside className="sb">
      <div className="sb-brand"><Mark /><span style={{ marginLeft: 8 }}>Sygnal</span></div>
      <div className="sb-sec">メニュー</div>
      {items.map(it => (
        <div key={it.key} className={"sb-item" + (active === it.key ? " active" : "")}>
          <it.Ic /><span>{it.label}</span>
        </div>
      ))}
      <div style={{ flex: 1 }} />
      <div style={{ marginTop: 14, padding: "10px 8px", borderTop: "1px solid #f0f0f0", fontSize: 11, color: "#999" }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: "#111", marginBottom: 4 }}>株式会社サンプル</div>
        <div style={{ marginBottom: 6, color: "#666" }}>スタンダード</div>
        <div style={{ color: "#666" }}>今月: 28,420 / 150,000件</div>
      </div>
    </aside>
  );
};

/* ───────── shared styles ───────── */
const panel = { border: "1px solid #E5E5E5", borderRadius: 8, background: "#fff", overflow: "hidden" };
const panelHead = { display: "flex", alignItems: "center", justifyContent: "space-between", padding: "11px 14px", borderBottom: "1px solid #f0f0f0", background: "#fff" };
const th = { padding: "8px 14px", fontWeight: 400, color: "#666", fontSize: 11 };
const td = { padding: "10px 14px", verticalAlign: "middle" };
const btnGhost = { display: "inline-flex", alignItems: "center", gap: 6, padding: "6px 10px", borderRadius: 4, border: "1px solid #E5E5E5", background: "#fff", fontSize: 11.5, color: "#666", cursor: "default" };
const btnPrimary = { ...btnGhost, background: "#111", color: "#fff", borderColor: "#111" };

/* ───────── Status badge (matches campaign-status.ts) ───────── */
const StatusBadge = ({ status }) => {
  const map = {
    "実行中": { bg: "#F0FDF4", fg: "#16A34A", border: "#D1FAE5" },
    "一時停止": { bg: "#FFFBEB", fg: "#D97706", border: "#FDE68A" },
    "完了": { bg: "#F5F5F5", fg: "#666", border: "#E5E5E5" },
    "待機": { bg: "#EFF6FF", fg: "#2563EB", border: "#DBEAFE" },
    "下書き": { bg: "#F5F5F5", fg: "#999", border: "#E5E5E5" },
    "予約済み": { bg: "#EFF6FF", fg: "#2563EB", border: "#DBEAFE" },
  };
  const c = map[status] || map["完了"];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, padding: "2px 8px", borderRadius: 4, background: c.bg, color: c.fg, border: "1px solid " + c.border, fontWeight: 500 }}>
      {status === "実行中" && <IconDot color="#16A34A" />}
      {status}
    </span>
  );
};

/* ============================================================
   1) HERO — Campaign Detail (案件詳細) in running state
   ============================================================ */
const HeroCampaignDetail = () => {
  // Match the actual campaign-detail UI: title row, tabs (成功/失敗/スキップ/AI生成結果/タイムライン), success rate progress

  const total = 1284, success = 942, failed = 218, skipped = 47;
  const sent = success + failed + skipped;
  const pct = (n) => ((n / total) * 100).toFixed(1);
  const sentPct = ((sent / total) * 100).toFixed(0);

  // Recent send history
  const rows = [
    { n: "株式会社グランドワークス", url: "grandworks.co.jp", at: "16:42", state: "success" },
    { n: "サンライズ工業株式会社", url: "sunrise-ind.jp", at: "16:40", state: "success" },
    { n: "Helix Robotics株式会社", url: "helix-robotics.jp", at: "16:38", state: "clicked" },
    { n: "ミライ食品株式会社", url: "mirai-foods.co.jp", at: "16:36", state: "failed" },
    { n: "株式会社オリオン物流", url: "orion-logistics.jp", at: "16:34", state: "skipped" },
    { n: "アクシス精機株式会社", url: "axis-seiki.co.jp", at: "16:32", state: "success" },
    { n: "Crest Medical株式会社", url: "crestmed.jp", at: "16:30", state: "success" },
  ];
  const stateChip = (s) => {
    if (s === "success") return <span style={{ ...chip, background: "#F0FDF4", color: "#16A34A", border: "1px solid #D1FAE5" }}><IconCheck size={10} />成功</span>;
    if (s === "clicked") return <span style={{ ...chip, background: "#111", color: "#fff", border: "1px solid #111" }}><IconCursor size={10} />クリック</span>;
    if (s === "failed") return <span style={{ ...chip, background: "#FEF2F2", color: "#DC2626", border: "1px solid #FECACA" }}><IconXCircle size={10} />失敗</span>;
    if (s === "skipped") return <span style={{ ...chip, background: "#FFFBEB", color: "#D97706", border: "1px solid #FDE68A" }}><IconAlertTriangle size={10} />スキップ</span>;
    return null;
  };

  // Bars data
  const bars = [12, 22, 31, 38, 42, 36, 44, 51, 48, 43, 38, 32, 24, 14];
  const maxBar = Math.max(...bars);

  return (
    <WinChrome>
      <Sidebar active="campaigns" />
      <div className="app">
        {/* Breadcrumb */}
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "#999", marginBottom: 10 }}>
          <span>案件管理</span><IconChevronRight size={11} /><span style={{ color: "#111" }}>2026年Q2 製造業アタック</span>
        </div>

        {/* Header */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 600, margin: 0, letterSpacing: "-.01em", marginBottom: 6 }}>2026年Q2 製造業アタック</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12, color: "#666" }}>
              <StatusBadge status="実行中" />
              <span>商材: 自社サービスA</span>
              <span style={{ color: "#ddd" }}>·</span>
              <span>リスト: 製造業_関東_50-300名（1,284社）</span>
              <span style={{ color: "#ddd" }}>·</span>
              <span>開始: 4/12 09:00</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button style={btnGhost}><IconPause size={11} /> 一時停止</button>
            <button style={btnGhost}>編集</button>
          </div>
        </div>

        {/* KPI strip — matches campaign-detail style: 進捗 + 件数 ribbon */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 10, marginBottom: 14 }}>
          <Kpi label="送信進捗" value={`${sent.toLocaleString()} / ${total.toLocaleString()}`} sub={`${sentPct}%`} />
          <Kpi label="成功" value={success.toLocaleString()} sub={`${pct(success)}%`} tone="green" />
          <Kpi label="失敗" value={failed.toLocaleString()} sub={`${pct(failed)}%`} tone="red" />
          <Kpi label="スキップ" value={skipped.toLocaleString()} sub={`${pct(skipped)}%`} tone="amber" />
          <Kpi label="クリック" value="74" sub="7.8% / 成功" tone="bold" />
        </div>

        {/* Progress stacked bar */}
        <div style={{ marginBottom: 14 }}>
          <div style={{ height: 6, background: "#F5F5F5", borderRadius: 99, display: "flex", overflow: "hidden" }}>
            <div style={{ width: pct(success) + "%", background: "#16A34A" }} />
            <div style={{ width: pct(failed) + "%", background: "#DC2626" }} />
            <div style={{ width: pct(skipped) + "%", background: "#F59E0B" }} />
          </div>
        </div>

        {/* Tabs — matches latest campaign-detail.tsx */}
        <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #E5E5E5", marginBottom: 14 }}>
          {["送信文面", "成功の詳細", "失敗の詳細", "スキップの詳細", "クリック企業"].map((t, i) => (
            <div key={t} style={{ padding: "8px 14px", fontSize: 12.5, color: i === 1 ? "#111" : "#666", borderBottom: i === 1 ? "2px solid #111" : "2px solid transparent", marginBottom: -1, fontWeight: i === 1 ? 500 : 400 }}>{t}</div>
          ))}
        </div>

        {/* Two-column area */}
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 12, marginBottom: 12 }}>
          {/* Send volume chart */}
          <div style={panel}>
            <div style={panelHead}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>送信ボリューム — 直近14時間</div>
              <span style={chip}>1時間ごと</span>
            </div>
            <div style={{ padding: "16px 16px 10px" }}>
              <div className="bars" style={{ height: 76 }}>
                {bars.map((b, i) => <i key={i} style={{ height: (b / maxBar) * 76 + "px", opacity: i >= 12 ? .4 : 1 }} />)}
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, color: "#999", marginTop: 6 }}>
                <span>03:00</span><span>09:00</span><span>15:00</span><span>21:00</span>
              </div>
            </div>
          </div>

          {/* Failure reason breakdown */}
          <div style={panel}>
            <div style={panelHead}>
              <div style={{ fontSize: 13, fontWeight: 500 }}>失敗・スキップ理由</div>
              <span style={chip}>本日</span>
            </div>
            <div style={{ padding: "14px 16px 14px" }}>
              <ReasonRow label="reCAPTCHA検知" v={84} max={218} tone="#DC2626" />
              <ReasonRow label="フォームなし" v={62} max={218} tone="#DC2626" />
              <ReasonRow label="営業お断り表記" v={41} max={218} tone="#F59E0B" />
              <ReasonRow label="送信済 (5日以内)" v={28} max={218} tone="#999" />
              <ReasonRow label="NG企業" v={19} max={218} tone="#999" last />
            </div>
          </div>
        </div>

        {/* Send history table */}
        <div style={panel}>
          <div style={panelHead}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>送信履歴</div>
            <div style={{ display: "flex", gap: 6 }}>
              <span style={chip}>すべて</span>
              <span style={chip}>成功</span>
              <span style={chip}>失敗</span>
            </div>
          </div>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead style={{ background: "#fafafa" }}>
              <tr style={{ textAlign: "left", borderBottom: "1px solid #E5E5E5" }}>
                <th style={th}>企業</th><th style={th}>ドメイン</th><th style={th}>送信時刻</th><th style={th}>結果</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderBottom: "1px solid #F5F5F5" }}>
                  <td style={td}>
                    <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                      <span style={{ width: 22, height: 22, borderRadius: 4, background: "#F5F5F5", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconBuilding size={12} /></span>
                      <span>{r.n}</span>
                    </span>
                  </td>
                  <td style={{ ...td, color: "#666", fontFamily: "var(--font-en)" }}>{r.url}</td>
                  <td style={{ ...td, color: "#666" }}>{r.at}</td>
                  <td style={td}>{stateChip(r.state)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </WinChrome>
  );
};

/* Small atoms */
const chip = { display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, padding: "3px 8px", borderRadius: 4, background: "#F5F5F5", color: "#666", fontWeight: 400, border: "1px solid #E5E5E5" };

const Kpi = ({ label, value, sub, tone }) => {
  const color = tone === "green" ? "#16A34A" : tone === "red" ? "#DC2626" : tone === "amber" ? "#D97706" : "#111";
  return (
    <div style={{ border: "1px solid #E5E5E5", borderRadius: 6, padding: "11px 14px", background: "#fff" }}>
      <div style={{ fontSize: 11, color: "#666", marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-.01em", color: "#111", fontFamily: "var(--font-en)" }}>{value}</div>
      <div style={{ fontSize: 11, color, marginTop: 2, fontWeight: 500 }}>{sub}</div>
    </div>
  );
};

const ReasonRow = ({ label, v, max, tone, last }) => (
  <div style={{ marginBottom: last ? 0 : 10 }}>
    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, color: "#444", marginBottom: 4 }}>
      <span>{label}</span><span style={{ color: "#999" }}>{v}件</span>
    </div>
    <div style={{ height: 4, background: "#F5F5F5", borderRadius: 99 }}>
      <div style={{ width: (v / max) * 100 + "%", height: "100%", background: tone, borderRadius: 99 }} />
    </div>
  </div>
);

/* ============================================================
   2) DATABASE — 企業データベース
   ============================================================ */
const DatabaseMock = () => {
  const companies = [
    { n: "株式会社グランドワークス", ind: "建設業", area: "東京都港区", emp: "120名", rev: "23億", status: "未送信" },
    { n: "サンライズ工業株式会社", ind: "製造業 / 金属加工", area: "神奈川県川崎市", emp: "84名", rev: "12億", status: "送信済" },
    { n: "Helix Robotics株式会社", ind: "製造業 / 産業機械", area: "東京都品川区", emp: "240名", rev: "58億", status: "クリック" },
    { n: "ミライ食品株式会社", ind: "製造業 / 食品", area: "埼玉県さいたま市", emp: "67名", rev: "8億", status: "NG企業", ng: true },
    { n: "Crest Medical株式会社", ind: "製造業 / 医療機器", area: "東京都中央区", emp: "310名", rev: "94億", status: "未送信" },
    { n: "株式会社ノーザンライト", ind: "小売業", area: "北海道札幌市", emp: "52名", rev: "6億", status: "未送信" },
    { n: "アクシス精機株式会社", ind: "製造業 / 精密機械", area: "長野県諏訪市", emp: "180名", rev: "31億", status: "送信済" },
    { n: "株式会社トウカイ電子", ind: "製造業 / 電子部品", area: "愛知県名古屋市", emp: "210名", rev: "44億", status: "クリック" },
    { n: "明和樹脂工業株式会社", ind: "製造業 / 樹脂成形", area: "大阪府東大阪市", emp: "96名", rev: "15億", status: "未送信" },
    { n: "株式会社ブルーポート物流", ind: "運輸業", area: "兵庫県神戸市", emp: "148名", rev: "27億", status: "送信済" },
    { n: "日峰メディカル株式会社", ind: "製造業 / 医療機器", area: "福岡県福岡市", emp: "275名", rev: "71億", status: "未送信" },
    { n: "株式会社セイワ製作所", ind: "製造業 / 金属加工", area: "静岡県浜松市", emp: "63名", rev: "9億", status: "未送信" },
    { n: "クロスフィールド株式会社", ind: "情報通信業", area: "東京都渋谷区", emp: "88名", rev: "18億", status: "送信済" },
  ];
  return (
    <WinChrome>
      <Sidebar active="database" />
      <div className="app">
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 14 }}>
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 500, margin: 0, marginBottom: 4 }}>企業データベース</h1>
            <p style={{ fontSize: 13, color: "#666", margin: 0 }}>日々更新される法人データベースから市場を条件抽出</p>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button style={btnGhost}>CSVインポート</button>
            <button style={btnPrimary}>13件でリスト作成</button>
          </div>
        </div>

        {/* Filter chips */}
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 14 }}>
          <FilterChip label="地域" value="関東 +2" />
          <FilterChip label="市区町村" value="12件" />
          <FilterChip label="業種" value="製造業 +2" />
          <FilterChip label="従業員数" value="50〜300名" />
          <FilterChip label="売上高" value="5億円以上" />
          <FilterChip label="経常利益" value="3千万以上" />
          <FilterChip label="資本金" value="1千万以上" />
          <FilterChip label="設立年" value="2015年以前" />
          <FilterChip label="上場区分" value="未上場" />
          <FilterChip label="決算月" value="3月 / 9月" />
          <FilterChip label="連絡先" value="フォームURLあり" />
          <FilterChip label="除外" value="送信履歴あり +3" />
          <span style={{ ...chip, color: "#999", cursor: "default" }}>+ 条件を追加</span>
        </div>

        {/* Search and results meta */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
          <div style={{ position: "relative", width: 280 }}>
            <span style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "#999" }}><IconSearch size={13} /></span>
            <input style={{ width: "100%", padding: "7px 10px 7px 30px", border: "1px solid #E5E5E5", borderRadius: 4, fontSize: 12, background: "#fff" }} placeholder="企業名で検索..." readOnly />
          </div>
          <div style={{ fontSize: 12, color: "#666" }}>
            <strong style={{ color: "#111" }}>1,284社</strong> がヒット · <strong style={{ color: "#111" }}>13社</strong> 選択中
          </div>
        </div>

        {/* Table */}
        <div style={{ borderTop: "1px solid #E5E5E5", borderBottom: "1px solid #E5E5E5" }}>
          <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12.5 }}>
            <thead>
              <tr style={{ borderBottom: "1px solid #E5E5E5", textAlign: "left" }}>
                <th style={{ ...th, width: 30 }}><span style={{ display: "inline-block", width: 12, height: 12, border: "1.5px solid #111", borderRadius: 2, background: "#111" }} /></th>
                <th style={th}>企業名</th>
                <th style={th}>業種</th>
                <th style={th}>所在地</th>
                <th style={th}>従業員</th>
                <th style={th}>売上高</th>
                <th style={th}>送信状況</th>
              </tr>
            </thead>
            <tbody>
              {companies.map((c, i) => (
                <tr key={i} style={{ borderBottom: "1px solid #F5F5F5", background: i % 2 ? "#fafafa" : "#fff" }}>
                  <td style={td}><span style={{ display: "inline-block", width: 12, height: 12, border: "1.5px solid " + (c.ng ? "#ddd" : "#111"), borderRadius: 2, background: c.ng ? "#fff" : "#111" }} /></td>
                  <td style={td}>
                    <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                      <span style={{ width: 22, height: 22, borderRadius: 4, background: "#F5F5F5", display: "inline-flex", alignItems: "center", justifyContent: "center" }}><IconBuilding size={12} /></span>
                      <span style={{ color: c.ng ? "#999" : "#111", fontWeight: 500 }}>{c.n}</span>
                    </span>
                  </td>
                  <td style={{ ...td, color: "#666" }}>{c.ind}</td>
                  <td style={{ ...td, color: "#666" }}>{c.area}</td>
                  <td style={{ ...td, color: "#666" }}>{c.emp}</td>
                  <td style={{ ...td, color: "#666" }}>{c.rev}</td>
                  <td style={td}>
                    {c.status === "クリック" ? <span style={{ ...chip, background: "#111", color: "#fff", border: "1px solid #111" }}><IconCursor size={10} />クリック</span>
                      : c.status === "送信済" ? <span style={{ ...chip, background: "#F0FDF4", color: "#16A34A", border: "1px solid #D1FAE5" }}><IconCheck size={10} />送信済</span>
                      : c.status === "NG企業" ? <span style={{ ...chip, background: "#FEF2F2", color: "#DC2626", border: "1px solid #FECACA" }}><IconBan size={10} />NG企業</span>
                      : <span style={chip}>未送信</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </WinChrome>
  );
};

const FilterChip = ({ label, value }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 10px", border: "1px solid #E5E5E5", borderRadius: 4, background: "#fff", fontSize: 11.5 }}>
    <span style={{ color: "#999" }}>{label}:</span>
    <span style={{ color: "#111", fontWeight: 500 }}>{value}</span>
    <IconChevronDown size={10} />
  </span>
);

/* ============================================================
   3) AI MESSAGE — Phase 2 文面作成（AI文面生成 / 手動入力）
   Matches the actual campaign-wizard/phase3-message.tsx UI:
   - messageMode radio: AI文面生成 / 手動入力
   - 文字数制限に応じて2パターン生成 checkbox
   - トラッキングURL選択 (LP / 日程調整 / 資料DL) toggle chips
   - generated subject / body preview with 500文字未満用 / 500文字以上用 tabs
   ============================================================ */
const AIMessageMock = () => {
  return (
    <WinChrome>
      <Sidebar active="campaigns" />
      <div className="app">
        <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5, color: "#999", marginBottom: 8 }}>
          <span>案件作成</span><IconChevronRight size={11} /><span>Phase 2</span><IconChevronRight size={11} /><span style={{ color: "#111" }}>文面作成</span>
        </div>

        {/* Wizard step indicator — 3 phases (matches latest wizard) */}
        <div style={{ display: "flex", alignItems: "center", marginBottom: 18, padding: "10px 14px", background: "#fafafa", border: "1px solid #E5E5E5", borderRadius: 6 }}>
          {[
            { n: 1, t: "基本情報", done: true },
            { n: 2, t: "文面作成", done: false, active: true },
            { n: 3, t: "送信設定", done: false },
          ].map((s, i) => (
            <span key={s.n} style={{ display: "contents" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 99, display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, fontWeight: 600,
                  background: s.done ? "#111" : "#fff",
                  color: s.done ? "#fff" : s.active ? "#111" : "#999",
                  border: "1.5px solid " + (s.done ? "#111" : s.active ? "#111" : "#E5E5E5"),
                }}>{s.done ? <IconCheck size={11} /> : s.n}</span>
                <span style={{ color: s.active || s.done ? "#111" : "#999", fontWeight: s.active ? 500 : 400 }}>{s.t}</span>
              </div>
              {i < 2 && <div style={{ flex: 1, height: 1, background: s.done ? "#111" : "#E5E5E5", margin: "0 12px" }} />}
            </span>
          ))}
        </div>

        <div style={{ marginBottom: 16 }}>
          <h2 style={{ fontSize: 16, fontWeight: 500, margin: 0, marginBottom: 4 }}>文面作成</h2>
          <div style={{ fontSize: 12, color: "#666" }}>送信する文面を作成します</div>
        </div>

        {/* Two columns so the screen fits a real 1440x900 desktop window */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.15fr", gap: 16, flex: 1, minHeight: 0 }}>
          {/* LEFT — mode + generation settings */}
          <div style={{ display: "flex", flexDirection: "column", gap: 14, minHeight: 0 }}>
            <div>
              <div style={{ fontSize: 12, color: "#666", marginBottom: 9 }}>文面生成方法</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 11, padding: 12, border: "1.5px solid #111", borderRadius: 4, background: "#fff" }}>
                  <span style={{ width: 14, height: 14, borderRadius: "50%", border: "1.5px solid #111", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1, flexShrink: 0 }}>
                    <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#111" }} />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                      <IconSparkles size={13} />
                      <span style={{ fontSize: 13, fontWeight: 500 }}>AI文面生成</span>
                    </div>
                    <div style={{ fontSize: 11.5, color: "#666", marginTop: 3 }}>送信先に合わせた文面をAIが作成します。</div>
                  </div>
                </div>
                <div style={{ display: "flex", alignItems: "flex-start", gap: 11, padding: 12, border: "1px solid #E5E5E5", borderRadius: 4, background: "#fff" }}>
                  <span style={{ width: 14, height: 14, borderRadius: "50%", border: "1.5px solid #ccc", marginTop: 1, flexShrink: 0 }} />
                  <div style={{ flex: 1 }}>
                    <span style={{ fontSize: 13, fontWeight: 500 }}>手動入力</span>
                    <div style={{ fontSize: 11.5, color: "#666", marginTop: 3 }}>自分で作成した文面を全企業に送信します。</div>
                  </div>
                </div>
              </div>
            </div>

            {/* AI generation settings */}
            <div style={{ border: "1px solid #E5E5E5", borderRadius: 6, overflow: "hidden", background: "#FAFAFA" }}>
              <div style={{ padding: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 4 }}>
                  <IconSparkles size={14} /><span style={{ fontSize: 13, fontWeight: 500 }}>AI文面生成</span>
                </div>
                <div style={{ fontSize: 11.5, color: "#666", marginBottom: 12 }}>AIが文面を作成します</div>

                <div style={{ padding: 11, background: "#fff", border: "1px solid #E5E5E5", borderRadius: 4, marginBottom: 11 }}>
                  <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                    <span style={{ width: 14, height: 14, borderRadius: 3, background: "#111", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, marginTop: 1 }}>
                      <IconCheck size={10} style={{ stroke: "#fff" }} />
                    </span>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 11.5, fontWeight: 500 }}>文字数制限に応じて2パターン生成</div>
                      <div style={{ fontSize: 11, color: "#666", marginTop: 2 }}>500文字未満用と500文字以上用の2種類の文面を生成します</div>
                    </div>
                  </div>
                </div>

                <div style={{ padding: 12, background: "#fff", border: "1px solid #E5E5E5", borderRadius: 4, marginBottom: 11 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 500, color: "#333", marginBottom: 9 }}>AIに含めるトラッキングURL</div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    <TrackUrlRow icon="📅" label="日程調整" items={[{ name: "Timerex（無料相談）", on: true }, { name: "Calendly", on: false }]} />
                    <TrackUrlRow icon="📄" label="資料DL" items={[{ name: "サービス紹介資料", on: true }]} />
                    <TrackUrlRow icon="🔗" label="LP" items={[{ name: "サービス紹介LP", on: false }]} />
                  </div>
                  <div style={{ fontSize: 11, color: "#666", marginTop: 9 }}>2/4件 選択中</div>
                </div>

                <button style={{ width: "100%", padding: "10px 14px", background: "#111", color: "#fff", fontSize: 13, fontWeight: 500, borderRadius: 4, border: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 7, cursor: "default" }}>
                  <IconSparkles size={13} /><span>2パターン生成</span>
                </button>
              </div>
            </div>
          </div>

          {/* RIGHT — generated content */}
          <div style={{ border: "1px solid #E5E5E5", borderRadius: 6, background: "#fff", display: "flex", flexDirection: "column", minHeight: 0, overflow: "hidden" }}>
            <div style={{ padding: "13px 16px", borderBottom: "1px solid #F0F0F0", display: "flex", alignItems: "center", gap: 7 }}>
              <IconCheckCircle size={14} style={{ stroke: "#10B981" }} />
              <span style={{ fontSize: 12.5, fontWeight: 500 }}>生成完了 - 内容を確認・編集してください</span>
            </div>
            <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, flex: 1, minHeight: 0 }}>
              <div>
                <div style={{ fontSize: 11, color: "#666", marginBottom: 4, fontWeight: 500 }}>件名</div>
                <div style={{ padding: "9px 11px", border: "1px solid #E5E5E5", borderRadius: 4, fontSize: 12.5 }}>
                  製造業のリード獲得をAIで自動化するご提案
                </div>
              </div>

              <div style={{ border: "1px solid #E5E5E5", borderRadius: 6, overflow: "hidden", display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 12px", background: "#FAFAFA", borderBottom: "1px solid #E5E5E5" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <span style={{ fontSize: 11.5, fontWeight: 500 }}>本文</span>
                    <span style={{ ...chip, fontSize: 10.5 }}>2パターン生成済み</span>
                  </div>
                </div>
                <div style={{ display: "flex", gap: 0, borderBottom: "1px solid #E5E5E5", padding: "0 12px", flexShrink: 0 }}>
                  <div style={{ padding: "8px 10px", fontSize: 11.5, fontWeight: 500, color: "#111", borderBottom: "2px solid #111", marginBottom: -1 }}>500文字未満用</div>
                  <div style={{ padding: "8px 10px", fontSize: 11.5, color: "#666" }}>500文字以上用</div>
                </div>
                <div style={{ padding: 12, display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
                  <div style={{ padding: 8, background: "#F0F9FF", border: "1px solid #BFDBFE", borderRadius: 4, fontSize: 10.5, color: "#1E40AF", marginBottom: 9, display: "flex", alignItems: "center", gap: 5, flexShrink: 0 }}>
                    <span>💡</span><span>500文字未満の問い合わせフォームで使用されます</span>
                  </div>
                  <div style={{ fontSize: 12, lineHeight: 1.85, color: "#3d3d3d", background: "#fff", padding: 12, borderRadius: 4, border: "1px solid #F0F0F0", flex: 1, minHeight: 0, overflow: "hidden" }}>
                    製造業のご担当者様<br/><br/>
                    突然のご連絡失礼いたします。<br/>
                    貴社ホームページを拝見し、ご連絡いたしました。<br/><br/>
                    営業リードを増やしたい中堅製造業様向けに、<br/>
                    <span style={{ background: "#FEF3C7" }}>AIによるフォーム営業の自動化</span>サービスをご案内しています。<br/><br/>
                    同規模10社で平均3.4倍の問い合わせ獲得を実現しています。<br/>
                    ご興味があれば15分でご案内可能です。<br/><br/>
                    <span style={{ background: "#DBEAFE" }}>▼日程調整はこちら</span><br/>
                    https://timerex.net/s/example
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8, flexShrink: 0 }}>
                    <span style={{ fontSize: 11, color: "#666", fontWeight: 500 }}>418 / 500文字推奨</span>
                    <span style={{ fontSize: 11, color: "#10B981" }}>OK</span>
                  </div>
                </div>
              </div>

              <p style={{ fontSize: 11, color: "#666", margin: 0, flexShrink: 0 }}>
                各企業の問い合わせフォームの文字数制限に応じて、最適な文面が自動選択されます
              </p>
            </div>
          </div>
        </div>
      </div>
    </WinChrome>
  );
};

/* TrackUrlRow — tracking URL toggle chips inside AI panel */
const TrackUrlRow = ({ icon, label, items }) => (
  <div>
    <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 5 }}>
      <span style={{ fontSize: 12 }}>{icon}</span>
      <span style={{ fontSize: 11, fontWeight: 500, color: "#666" }}>{label}</span>
    </div>
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
      {items.map((it, i) => (
        <span key={i} style={{
          display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 9px",
          fontSize: 11, borderRadius: 4,
          border: "1px solid " + (it.on ? "#10B981" : "#E5E5E5"),
          background: it.on ? "#F0FDF4" : "#FAFAFA",
          color: "#111"
        }}>
          <span style={{ width: 22, height: 12, borderRadius: 99, background: it.on ? "#10B981" : "#D1D5DB", position: "relative", flexShrink: 0 }}>
            <span style={{ position: "absolute", top: 1, left: it.on ? 11 : 1, width: 10, height: 10, borderRadius: "50%", background: "#fff", transition: "left .2s" }} />
          </span>
          <span>{it.name}</span>
        </span>
      ))}
    </div>
  </div>
);

/* ============================================================
   4) INSIGHTS — AI分析（攻めるべき市場 × 刺さる訴求 × 推奨アクション）
   ============================================================ */
const InsightsMock = () => {
  // Recommendation badge config — matches insights-dashboard.tsx RECOMMENDATION_CONFIG
  const recBadge = (r) => {
    const m = {
      expand: { l: "伸ばす", bg: "#F0FDF4", fg: "#10B981", border: "#BBF7D0" },
      maintain: { l: "維持", bg: "#EFF6FF", fg: "#3B82F6", border: "#BFDBFE" },
      reduce: { l: "絞る", bg: "#FEF2F2", fg: "#EF4444", border: "#FECACA" },
      test: { l: "テスト", bg: "#FEF3C7", fg: "#F59E0B", border: "#FDE68A" },
    }[r];
    return <span style={{ display: "inline-flex", alignItems: "center", padding: "2px 8px", fontSize: 10.5, fontWeight: 500, borderRadius: 3, background: m.bg, color: m.fg, border: "1px solid " + m.border }}>{m.l}</span>;
  };
  const priorityBadge = (p) => {
    const m = {
      high: { l: "高", bg: "#FEF2F2", fg: "#EF4444" },
      medium: { l: "中", bg: "#FEF3C7", fg: "#F59E0B" },
      low: { l: "低", bg: "#F0FDF4", fg: "#10B981" },
    }[p];
    return <span style={{ display: "inline-flex", alignItems: "center", padding: "2px 8px", fontSize: 10.5, fontWeight: 500, borderRadius: 3, background: m.bg, color: m.fg }}>{m.l}</span>;
  };

  const segments = [
    { seg: "医療機器", success: 96, click: 12, score: 87, rec: "expand" },
    { seg: "産業機械", success: 94, click: 9, score: 76, rec: "expand" },
    { seg: "食品製造", success: 89, click: 7, score: 64, rec: "maintain" },
    { seg: "建設業", success: 82, click: 5, score: 52, rec: "maintain" },
    { seg: "小売業", success: 71, click: 3, score: 38, rec: "reduce" },
  ];

  const patterns = [
    {
      cr: 14, count: 6, top: true,
      flow: [
        { k: "objective", v: "日程調整誘導" },
        { k: "problem", v: "営業リード不足" },
        { k: "value", v: "数字で効果実証" },
        { k: "trust", v: "導入120社" },
        { k: "cta", v: "15分カレンダー" },
      ],
      bd: [["医療機器", 18], ["産業機械", 12]],
    },
    {
      cr: 9, count: 8, top: true,
      flow: [
        { k: "objective", v: "資料DL誘導" },
        { k: "problem", v: "人手不足" },
        { k: "value", v: "工数1/10" },
        { k: "cta", v: "資料DL" },
      ],
      bd: [["産業機械", 11], ["建設業", 6]],
    },
  ];

  const actions = [
    { cat: "market", seg: "業種 / 医療機器", title: "医療機器セグメントを次回優先で抽出", reason: "成功率96%・有望度87と他セグメント比2.1倍。300社規模で集中アタックを推奨。", pri: "high" },
    { cat: "appeal", seg: "訴求 / 数字実証 + 15分CTA", title: "件名に「導入事例の数字」を含める運用に統一", reason: "数字訴求パターンのクリック率が他比 +3.4pt。", pri: "medium" },
    { cat: "combined", seg: "送信時間 / 火・水 10:00-11:30", title: "送信ウィンドウを午前帯に絞る", reason: "クリック発生時刻の62%が10:00〜11:30台に集中。", pri: "medium" },
  ];
  const catIc = (c) => c === "market" ? <IconTarget size={13} /> : c === "appeal" ? <IconSparkles size={13} /> : <IconTrendingUp size={13} />;

  const tagBg = (k) => ({
    objective: { bg: "#FEF3C7", fg: "#92400E" },
    problem: { bg: "#FEE2E2", fg: "#991B1B" },
    value: { bg: "#DBEAFE", fg: "#1D4ED8" },
    trust: { bg: "#D1FAE5", fg: "#065F46" },
    cta: { bg: "#E9D5FF", fg: "#6D28D9" },
  }[k]);

  return (
    <WinChrome>
      <Sidebar active="insights" />
      <div className="app">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 600, margin: 0, marginBottom: 4 }}>AI分析</h1>
            <p style={{ fontSize: 13, color: "#666", margin: 0 }}>送信結果をAIが分析し、効果的な営業戦略を提案します</p>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <div style={{ display: "flex", gap: 0, padding: 3, background: "#F5F5F5", borderRadius: 4, fontSize: 11 }}>
              <div style={{ padding: "4px 10px", borderRadius: 3, background: "#fff", color: "#111", fontWeight: 500 }}>直近28日</div>
              <div style={{ padding: "4px 10px", color: "#666" }}>全期間</div>
            </div>
          </div>
        </div>

        {/* KPI cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, marginBottom: 14 }}>
          <KpiInsight ic={<IconCheckCircle size={14} style={{ stroke: "#16A34A" }} />} label="送信成功率" value="89%" color="#16A34A" />
          <KpiInsight ic={<IconCursor size={14} style={{ stroke: "#3B82F6" }} />} label="クリック率" value="8%" color="#3B82F6" />
          <KpiInsight ic={<IconSend size={14} style={{ stroke: "#111" }} />} label="案件数" value="14" color="#111" />
          <KpiInsight ic={<IconClock size={14} style={{ stroke: "#666" }} />} label="最終更新" value="5/12 14:32" color="#666" small />
        </div>

        {/* Two columns: 攻めるべき市場 / 刺さる訴求 */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }}>
          {/* 攻めるべき市場 */}
          <div style={{ ...panel, padding: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 12 }}>
              <IconTarget size={14} /><span style={{ fontSize: 13, fontWeight: 500 }}>攻めるべき市場</span>
            </div>
            <div style={{ display: "flex", gap: 4, marginBottom: 12 }}>
              <div style={{ padding: "4px 11px", fontSize: 11, borderRadius: 4, background: "#111", color: "#fff", fontWeight: 500 }}>業種</div>
              <div style={{ padding: "4px 11px", fontSize: 11, borderRadius: 4, background: "#F5F5F5", color: "#666" }}>従業員規模</div>
              <div style={{ padding: "4px 11px", fontSize: 11, borderRadius: 4, background: "#F5F5F5", color: "#666" }}>エリア</div>
            </div>
            <table style={{ width: "100%", fontSize: 11.5, borderCollapse: "collapse" }}>
              <thead>
                <tr style={{ borderBottom: "1px solid #E5E5E5" }}>
                  <th style={{ ...th, padding: "6px 0", textAlign: "left" }}>セグメント</th>
                  <th style={{ ...th, padding: "6px 0", textAlign: "right" }}>成功率</th>
                  <th style={{ ...th, padding: "6px 0", textAlign: "right" }}>クリック率</th>
                  <th style={{ ...th, padding: "6px 0", textAlign: "right", display: "inline-flex", alignItems: "center", gap: 3, justifyContent: "flex-end", width: "100%" }}>有望度<IconHelp size={10} /></th>
                  <th style={{ ...th, padding: "6px 0", textAlign: "center" }}>推奨</th>
                </tr>
              </thead>
              <tbody>
                {segments.map((s, i) => (
                  <tr key={i} style={{ borderBottom: i < segments.length - 1 ? "1px solid #F5F5F5" : "none" }}>
                    <td style={{ padding: "8px 0", color: "#111" }}>{s.seg}</td>
                    <td style={{ padding: "8px 0", textAlign: "right", color: "#111" }}>{s.success}%</td>
                    <td style={{ padding: "8px 0", textAlign: "right", color: "#111" }}>{s.click}%</td>
                    <td style={{ padding: "8px 0", textAlign: "right", color: "#111", fontWeight: 500 }}>{s.score}</td>
                    <td style={{ padding: "8px 0", textAlign: "center" }}>{recBadge(s.rec)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div style={{ marginTop: 12, padding: 10, background: "#fafafa", border: "1px solid #F0F0F0", borderRadius: 4, fontSize: 11.5, color: "#444", lineHeight: 1.65, display: "flex", gap: 7 }}>
              <IconSparkles size={11} style={{ flexShrink: 0, marginTop: 2 }} />
              <span><strong>AI分析:</strong> 医療機器・産業機械セグメントの有望度が突出。次回案件はこの2セグメントへ集中投下を推奨します。</span>
            </div>
          </div>

          {/* 刺さる訴求 */}
          <div style={{ ...panel, padding: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 12 }}>
              <IconSparkles size={14} /><span style={{ fontSize: 13, fontWeight: 500 }}>刺さる訴求</span>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {patterns.map((p, i) => (
                <div key={i} style={{ border: "1px solid " + (p.top ? "#2563EB" : "#E5E5E5"), background: p.top ? "rgba(219, 234, 254, 0.2)" : "#fff", borderRadius: 6, padding: 11 }}>
                  <div style={{ fontSize: 11, color: "#333", marginBottom: 7, fontWeight: 500 }}>
                    #{i + 1} クリック率 {p.cr}% / {p.count}キャンペーン
                  </div>
                  <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 4 }}>
                    {p.flow.map((f, j) => (
                      <span key={j} style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
                        {j > 0 && <span style={{ color: "#bbb", fontSize: 11 }}>→</span>}
                        <span style={{ ...tagBg(f.k), background: tagBg(f.k).bg, color: tagBg(f.k).fg, padding: "2px 7px", borderRadius: 3, fontSize: 10.5, fontWeight: 500 }}>{f.v}</span>
                      </span>
                    ))}
                  </div>
                  <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {p.bd.map(([seg, cr], k) => (
                      <span key={k} style={{ fontSize: 10.5, color: "#666", background: "#fafafa", padding: "2px 7px", borderRadius: 3 }}>
                        {seg}: {cr}%
                      </span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 今週の推奨アクション */}
        <div style={{ ...panel, padding: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, marginBottom: 12 }}>
            <IconTrendingUp size={14} /><span style={{ fontSize: 13, fontWeight: 500 }}>今週の推奨アクション</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
            {actions.map((a, i) => (
              <div key={i} style={{ border: "1px solid #E5E5E5", borderRadius: 6, padding: 12, background: "#fff" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 9 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, color: "#666" }}>
                    {catIc(a.cat)}<span>{a.seg}</span>
                  </span>
                  {priorityBadge(a.pri)}
                </div>
                <p style={{ fontSize: 12.5, fontWeight: 600, margin: "0 0 6px", lineHeight: 1.5 }}>{a.title}</p>
                <p style={{ fontSize: 11.5, color: "#666", margin: 0, lineHeight: 1.65 }}>{a.reason}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </WinChrome>
  );
};

const KpiInsight = ({ ic, label, value, color, small }) => (
  <div style={{ border: "1px solid #E5E5E5", borderRadius: 6, padding: "12px 14px", background: "#fff" }}>
    <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#666", marginBottom: 6 }}>{ic}<span>{label}</span></div>
    <div style={{ fontSize: small ? 14 : 22, fontWeight: 600, color, fontFamily: small ? "var(--font-jp)" : "var(--font-en)", letterSpacing: "-.01em" }}>{value}</div>
  </div>
);

/* ============================================================
   5) SALES — 営業管理（カンバン）
   ============================================================ */
const SalesMock = () => {
  const cols = [
    { stage: "クリック", count: 14, color: "#3B82F6", cards: [
      { n: "Crest Medical株式会社", ind: "製造業 / 医療機器", at: "8分前", asg: "田中" },
      { n: "サンライズ工業株式会社", ind: "製造業 / 金属加工", at: "32分前", asg: "佐藤" },
      { n: "アクシス精機株式会社", ind: "製造業 / 精密機械", at: "1時間前", asg: "田中" },
      { n: "株式会社トウカイ電子", ind: "製造業 / 電子部品", at: "3時間前", asg: "鈴木" },
      { n: "日峰メディカル株式会社", ind: "製造業 / 医療機器", at: "5時間前", asg: "佐藤" },
      { n: "株式会社ヤマト計測機器", ind: "製造業 / 精密機械", at: "本日 09:12", asg: "未割当" },
    ]},
    { stage: "アプローチ中", count: 6, color: "#F59E0B", cards: [
      { n: "株式会社ノーザンライト", ind: "小売業", at: "本日 11:30", asg: "佐藤" },
      { n: "ミライ食品株式会社", ind: "製造業 / 食品", at: "昨日", asg: "田中" },
      { n: "クロスフィールド株式会社", ind: "情報通信業", at: "2日前", asg: "鈴木" },
      { n: "三葉化成工業株式会社", ind: "製造業 / 化学", at: "3日前", asg: "田中" },
    ]},
    { stage: "商談化", count: 3, color: "#8B5CF6", cards: [
      { n: "Helix Robotics株式会社", ind: "製造業 / 産業機械", at: "2日前", asg: "田中", amount: "¥1,800,000" },
      { n: "明和樹脂工業株式会社", ind: "製造業 / 樹脂成形", at: "4日前", asg: "佐藤", amount: "¥960,000" },
      { n: "株式会社ブルーポート物流", ind: "運輸業", at: "1週間前", asg: "鈴木", amount: "¥1,200,000" },
    ]},
    { stage: "成約", count: 2, color: "#10B981", cards: [
      { n: "株式会社グランドワークス", ind: "建設業", at: "1週間前", asg: "佐藤", amount: "¥2,400,000" },
      { n: "株式会社アペックス空調", ind: "建設業 / 設備", at: "3週間前", asg: "田中", amount: "¥1,650,000" },
    ]},
  ];

  return (
    <WinChrome>
      <Sidebar active="sales-management" />
      <div className="app">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
          <div>
            <h1 style={{ fontSize: 20, fontWeight: 500, margin: 0, marginBottom: 4 }}>営業管理</h1>
            <p style={{ fontSize: 13, color: "#666", margin: 0 }}>クリックのあった企業の営業進捗を、カンバンで一元管理</p>
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <div style={{ display: "flex", padding: 3, background: "#F5F5F5", borderRadius: 4, fontSize: 11 }}>
              <div style={{ padding: "4px 10px", borderRadius: 3, background: "#fff", fontWeight: 500 }}>カンバン</div>
              <div style={{ padding: "4px 10px", color: "#666" }}>リスト</div>
            </div>
            <button style={btnGhost}><IconUser size={11} />担当者管理</button>
            <button style={btnGhost}>ステータス編集</button>
          </div>
        </div>

        {/* Kanban */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
          {cols.map((c, i) => (
            <div key={i} style={{ border: "1px solid #E5E5E5", borderRadius: 6, background: "#fff", overflow: "hidden" }}>
              <div style={{ padding: "10px 12px", background: "#F5F5F5", borderBottom: "1px solid #E5E5E5" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 500 }}>
                  <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 99, background: c.color }} />{c.stage}
                </div>
                <div style={{ fontSize: 11, color: "#666", marginTop: 2 }}>{c.count}件</div>
              </div>
              <div style={{ padding: 8, display: "flex", flexDirection: "column", gap: 6, minHeight: 240 }}>
                {c.cards.map((card, j) => (
                  <div key={j} style={{ background: "#fff", border: "1px solid #E5E5E5", borderRadius: 4, padding: 10 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, marginBottom: 3, lineHeight: 1.4 }}>{card.n}</div>
                    <div style={{ fontSize: 10.5, color: "#666", marginBottom: 7 }}>{card.ind}</div>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 10.5, color: "#999" }}>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}><IconCalendar size={9} />{card.at}</span>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 3 }}><IconUser size={9} />{card.asg}</span>
                    </div>
                    {card.amount && (
                      <div style={{ marginTop: 7, paddingTop: 7, borderTop: "1px solid #F0F0F0", fontSize: 11, fontWeight: 600, fontFamily: "var(--font-en)" }}>
                        {card.amount}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </WinChrome>
  );
};

/* ───────── Render hero into slot ───────── */
const heroSlot = document.getElementById("hero-window-slot");
if (heroSlot) ReactDOM.createRoot(heroSlot).render(<HeroCampaignDetail />);

// Expose to sections script (precheck removed — no longer in product)
window.SygnalMocks = { DatabaseMock, AIMessageMock, InsightsMock, SalesMock, HeroCampaignDetail };

/* ───────── Scale each fixed 1440x900 window to fit its container ───────── */
(function () {
  const W = 1440;
  const fit = () => document.querySelectorAll('.mock-frame').forEach(f => {
    const inner = f.querySelector('.mock-scale');
    if (inner && f.clientWidth) inner.style.transform = 'scale(' + (f.clientWidth / W) + ')';
  });
  const mo = new MutationObserver(fit);
  mo.observe(document.body, { childList: true, subtree: true });
  window.addEventListener('resize', fit);
  fit();
  [50, 200, 600, 1500].forEach(t => setTimeout(fit, t));
})();