// industrymocks.jsx — 5 業種別の特化UIモック

// ==========================================================
// 1. MockAccountingClients — 会計事務所 顧問先月次ステータス
// ==========================================================
function MockAccountingClients() {
  const rows = [
    { name: "顧問先 A社", sector: "卸売", staff: "S.K", recovered: 100, mtgDate: "5/22", aiDone: true, badge: "電帳法対応" },
    { name: "顧問先 B社", sector: "製造", staff: "S.Y", recovered: 80, mtgDate: "5/24", aiDone: true, badge: "インボイス" },
    { name: "顧問先 C社", sector: "飲食", staff: "S.S", recovered: 60, mtgDate: "5/28", aiDone: false, badge: "簡易課税" },
    { name: "顧問先 D社", sector: "Web", staff: "S.K", recovered: 30, mtgDate: "5/30", aiDone: false },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "var(--blue-soft)", color: "var(--blue)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3" width="11" height="10" rx="1" stroke="currentColor" strokeWidth="1.4"/><path d="M5 6h6M5 8.5h4M5 11h5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">顧問先 月次ステータス</div>
            <div className="uimock-mini__sub">2026年5月 · 月次面談前チェック</div>
          </div>
        </div>
        <span className="imd-tag">完了率 67%</span>
      </div>
      <div className="uimock__body imd-body">
        <table className="imd-table">
          <thead>
            <tr>
              <th>顧問先</th>
              <th>業種</th>
              <th>担当</th>
              <th>資料回収</th>
              <th>面談日</th>
              <th>AI下書き</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="imd-name">
                  {r.name}
                  {r.badge && <span className="imd-badge">{r.badge}</span>}
                </td>
                <td className="imd-muted">{r.sector}</td>
                <td className="imd-muted">{r.staff}</td>
                <td>
                  <div className="imd-bar">
                    <div className="imd-bar__fill" style={{ width: `${r.recovered}%`, background: r.recovered >= 80 ? "oklch(60% 0.15 155)" : r.recovered >= 50 ? "oklch(70% 0.15 80)" : "oklch(65% 0.18 30)" }}></div>
                  </div>
                  <span className="imd-pct">{r.recovered}%</span>
                </td>
                <td className="imd-muted imd-mono">{r.mtgDate}</td>
                <td>
                  {r.aiDone
                    ? <span className="imd-chip imd-chip--done">✓ 生成済</span>
                    : <span className="imd-chip imd-chip--queued">未着手</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="imd-footer">
          <span>合計 4社 · 試算表回収待ち 2社 · 月次コメント未生成 2社</span>
          <span className="imd-link">AIに一括下書き →</span>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 2. MockRentalInbox — 賃貸管理 問い合わせインボックス
// ==========================================================
function MockRentalInbox() {
  const items = [
    { time: "09:12", property: "物件A 305号室", from: "入居者A様（仮名）", subject: "キッチン排水管から水漏れ", category: "緊急", aiAction: "業者手配 / オーナー報告" },
    { time: "10:47", property: "物件B 102号室", from: "入居者B様（仮名）", subject: "退去予告（7月末）", category: "退去", aiAction: "原状回復見積もり依頼" },
    { time: "11:23", property: "物件C 201号室", from: "入居者C様（仮名）", subject: "上階の生活音について", category: "苦情", aiAction: "対応履歴を整理" },
    { time: "13:05", property: "物件D 4F", from: "オーナーD様（仮名）", subject: "今月の修繕報告を確認したい", category: "オーナー", aiAction: "報告書ドラフト生成" },
  ];
  const catColor = {
    "緊急": "oklch(65% 0.18 30)",
    "退去": "oklch(60% 0.15 280)",
    "苦情": "oklch(70% 0.15 80)",
    "オーナー": "oklch(55% 0.18 252)",
  };
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "oklch(94% 0.04 252)", color: "var(--blue)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 4h12v8H2z" stroke="currentColor" strokeWidth="1.4"/><path d="M2 4l6 4 6-4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">問い合わせ AI仕分けインボックス</div>
            <div className="uimock-mini__sub">本日 4件 · LINE WORKS / 電話受付分</div>
          </div>
        </div>
        <span className="imd-tag" style={{ background: "oklch(94% 0.06 30)", color: "oklch(45% 0.18 30)" }}>緊急 1件</span>
      </div>
      <div className="uimock__body imd-body">
        <div className="rentalbox">
          {items.map((it, i) => (
            <div className="rentalbox__row" key={i}>
              <div className="rentalbox__time">{it.time}</div>
              <div className="rentalbox__main">
                <div className="rentalbox__head">
                  <span className="rentalbox__cat" style={{ background: `color-mix(in oklab, ${catColor[it.category]} 14%, white)`, color: catColor[it.category], borderColor: `color-mix(in oklab, ${catColor[it.category]} 30%, white)` }}>{it.category}</span>
                  <span className="rentalbox__prop">{it.property}</span>
                </div>
                <div className="rentalbox__subject">{it.subject}</div>
                <div className="rentalbox__meta">{it.from} · AI推奨アクション：<strong>{it.aiAction}</strong></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 3. MockConstructionSurvey — 工務店 現調メモ→提案AI
// ==========================================================
function MockConstructionSurvey() {
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "oklch(94% 0.05 60)", color: "oklch(50% 0.16 60)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 13l3-6 3 4 4-7" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">現調メモ → 提案構造化</div>
            <div className="uimock-mini__sub">施主邸（仮名）リフォーム / 訪問日 5/18</div>
          </div>
        </div>
      </div>
      <div className="uimock__body survey-body">
        <div className="survey-col">
          <div className="survey-col__head">現場で取ったメモ（音声→テキスト）</div>
          <div className="survey-memo">
            <p>「キッチン交換したい。築22年。IH希望。食洗機もつけたい。</p>
            <p>奥様：収納が足りない、引き出し増やしたい。</p>
            <p>予算は150〜200万くらい。来月中に着工できると嬉しい。</p>
            <p>子供がアレルギーあり、ホルムアルデヒド注意。」</p>
          </div>
        </div>
        <div className="survey-col">
          <div className="survey-col__head survey-col__head--ai">
            <span className="survey-ai-tag">AI構造化</span>
            提案たたき台
          </div>
          <div className="survey-struct">
            <div className="survey-row">
              <div className="survey-label">施主要望</div>
              <div className="survey-val">IHキッチン + 食洗機 / 収納増 / 引き出し型</div>
            </div>
            <div className="survey-row">
              <div className="survey-label">予算感</div>
              <div className="survey-val survey-mono">¥1.5M – ¥2.0M</div>
            </div>
            <div className="survey-row">
              <div className="survey-label">配慮事項</div>
              <div className="survey-val"><span className="survey-warn">⚠ 低ホルムアルデヒド建材（F☆☆☆☆指定）</span></div>
            </div>
            <div className="survey-row">
              <div className="survey-label">提案ポイント</div>
              <div className="survey-val">省エネ補助金 / 既存配管活用 / 1.5週間工程案</div>
            </div>
            <div className="survey-row">
              <div className="survey-label">次回連絡</div>
              <div className="survey-val">5/22までに概算見積＋カタログ送付</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 4. MockCareHandoff — 介護・福祉 申し送りボード
// ==========================================================
function MockCareHandoff() {
  const residents = [
    { name: "A 様", room: "201", flags: ["転倒注意", "服薬確認"], note: "朝食 7割。昨夜 21:30 排尿2回、足元ふらつきあり。家族から面会希望(土)。", priority: "high" },
    { name: "B 様", room: "203", flags: ["水分摂取"], note: "水分 800ml / 目標1200ml。日中傾眠あり。担当ケアマネジャーへ報告要。", priority: "mid" },
    { name: "C 様", room: "205", flags: [], note: "リハビリ参加。歩行器なしで5m歩行できた。本人意欲的、家族へ共有予定。", priority: "low" },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "oklch(95% 0.04 350)", color: "oklch(50% 0.16 350)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 14s-5-3-5-7a3 3 0 015-2 3 3 0 015 2c0 4-5 7-5 7z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">日勤 → 夜勤 申し送り</div>
            <div className="uimock-mini__sub">2026/5/18 17:00 / 当事業所（仮名）</div>
          </div>
        </div>
        <span className="imd-tag">3 名 / AI要約済</span>
      </div>
      <div className="uimock__body imd-body">
        <div className="handoff">
          {residents.map((r, i) => (
            <div className={`handoff__row handoff__row--${r.priority}`} key={i}>
              <div className="handoff__head">
                <div className="handoff__name">{r.name} <small>{r.room}号室</small></div>
                <div className="handoff__flags">
                  {r.flags.map(f => <span key={f} className="handoff__flag">{f}</span>)}
                </div>
              </div>
              <div className="handoff__note">{r.note}</div>
            </div>
          ))}
          <div className="handoff__ai">
            <span className="handoff__ai-tag">AI 要約</span>
            本日の特記：A様（転倒リスク高 / 家族面会調整要）、B様（水分摂取量モニター継続）、C様（リハビリ成果あり）
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 5. MockAdReport — Web制作・広告 媒体別レポート＋AI改善
// ==========================================================
function MockAdReport() {
  const rows = [
    { ch: "Google検索", imp: "182,400", ctr: "4.2%", cpa: "¥3,800", cv: 64, trend: "up" },
    { ch: "Meta広告", imp: "256,800", ctr: "1.8%", cpa: "¥6,200", cv: 41, trend: "down" },
    { ch: "Yahoo検索", imp: "62,100", ctr: "3.6%", cpa: "¥4,400", cv: 18, trend: "up" },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "var(--blue-soft)", color: "var(--blue)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 13L6 9l3 3 5-7" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">広告レポート + AI改善提案</div>
            <div className="uimock-mini__sub">クライアント: 株式会社○○ / 5月実績</div>
          </div>
        </div>
        <span className="imd-tag" style={{ background: "oklch(92% 0.05 155)", color: "oklch(40% 0.14 155)" }}>CV +18% vs 先月</span>
      </div>
      <div className="uimock__body imd-body">
        <table className="imd-table imd-table--ad">
          <thead>
            <tr>
              <th>媒体</th>
              <th>imp</th>
              <th>CTR</th>
              <th>CPA</th>
              <th>CV</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="imd-name">{r.ch}</td>
                <td className="imd-mono">{r.imp}</td>
                <td className="imd-mono">{r.ctr}</td>
                <td className="imd-mono">{r.cpa}</td>
                <td className="imd-mono"><strong>{r.cv}</strong></td>
                <td>
                  {r.trend === "up"
                    ? <span className="imd-chip imd-chip--done">▲ 改善</span>
                    : <span className="imd-chip imd-chip--alert">▼ 要対策</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="ad-ai">
          <div className="ad-ai__head">
            <span className="ad-ai__tag">AI 改善提案</span>
            Metaのクリエイティブ疲弊が示唆されています。
          </div>
          <ul className="ad-ai__list">
            <li>クリエイティブABCDの中で、CTR最下位（A）を停止し、B派生案2本を追加。</li>
            <li>類似オーディエンスをCV元データで再構築（過去30日のCV→90日へ拡張）。</li>
            <li>Google検索の好調KW群に、Meta側のクリエイティブを横展開。</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 6. MockBeautyCRM — 美容クリニック 顧客対応カード
// ==========================================================
function MockBeautyCRM() {
  const cases = [
    { name: "顧客 K様（仮名）", age: "30代", route: "Instagram広告", stage: "初回カウンセリング後", menu: "ボトックス眉間+額", priority: "high", aiAction: "施術前同意事項テンプレ送信", days: "本日" },
    { name: "顧客 M様（仮名）", age: "20代", route: "Google検索", stage: "施術後7日", menu: "脂肪溶解注射 1回目", priority: "mid", aiAction: "経過確認連絡 + 2回目案内", days: "+2日後送信" },
    { name: "顧客 S様（仮名）", age: "40代", route: "リピート", stage: "Googleレビュー対応待ち", menu: "ハイフ施術", priority: "low", aiAction: "口コミ返信ドラフト生成", days: "本日" },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "oklch(95% 0.04 350)", color: "oklch(50% 0.16 350)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 14s-5-3-5-7a3 3 0 015-2 3 3 0 015 2c0 4-5 7-5 7z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">顧客対応ボード（カウンセリング・施術後フォロー）</div>
            <div className="uimock-mini__sub">2026/5/18 / 当院（仮名）AI業務改善</div>
          </div>
        </div>
        <span className="imd-tag" style={{ background: "oklch(95% 0.04 350)", color: "oklch(45% 0.18 350)" }}>3名 / AI下書き済</span>
      </div>
      <div className="uimock__body imd-body">
        <div className="handoff">
          {cases.map((c, i) => (
            <div className={`handoff__row handoff__row--${c.priority}`} key={i}>
              <div className="handoff__head">
                <div className="handoff__name">{c.name} <small>{c.age}・{c.route}</small></div>
                <div className="handoff__flags">
                  <span className="handoff__flag" style={{ background: "oklch(95% 0.04 252)", color: "var(--blue-ink)" }}>{c.stage}</span>
                </div>
              </div>
              <div className="handoff__note">
                <strong>施術メニュー：</strong>{c.menu}　·　<strong>AI推奨アクション：</strong>{c.aiAction}（{c.days}）
              </div>
            </div>
          ))}
          <div className="handoff__ai">
            <span className="handoff__ai-tag">AI 要約</span>
            本日の対応：K様（初回カウンセリング後の同意事項テンプレ送信）、M様（施術1週間後の経過確認連絡）、S様（Googleレビュー返信ドラフト確認）。すべて薬機法表現チェック済。
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 7. MockRecruitMatch — 人材紹介 マッチングテーブル
// ==========================================================
function MockRecruitMatch() {
  const candidates = [
    { name: "候補者A（仮名）", years: "5年", current: "Web系SaaS / SE", desire: "PdM志向", match: 92, status: "推薦文 生成済" },
    { name: "候補者B（仮名）", years: "3年", current: "メーカー / 営業", desire: "BtoB SaaS営業", match: 78, status: "スカウト送付済" },
    { name: "候補者C（仮名）", years: "8年", current: "Web代理店 / 運用", desire: "事業会社 / マーケ", match: 65, status: "面談メモ未整理" },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "var(--blue-soft)", color: "var(--blue)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 6.5a2.5 2.5 0 015 0v0.5M8 7a2.5 2.5 0 015 0v0.5M2 13a4 4 0 014-4M10 9a4 4 0 014 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">求人「BtoB SaaS 事業開発」マッチング</div>
            <div className="uimock-mini__sub">A社（仮名）/ AI推薦候補 3名</div>
          </div>
        </div>
        <span className="imd-tag">AI推薦済 3名</span>
      </div>
      <div className="uimock__body imd-body">
        <table className="imd-table">
          <thead>
            <tr>
              <th>候補者</th>
              <th>経験</th>
              <th>現職 → 志向</th>
              <th>マッチ度</th>
              <th>ステータス</th>
            </tr>
          </thead>
          <tbody>
            {candidates.map((c, i) => (
              <tr key={i}>
                <td className="imd-name">{c.name}</td>
                <td className="imd-muted imd-mono">{c.years}</td>
                <td className="imd-muted">{c.current} → {c.desire}</td>
                <td>
                  <div className="imd-bar"><div className="imd-bar__fill" style={{ width: `${c.match}%`, background: c.match >= 85 ? "oklch(60% 0.15 155)" : c.match >= 70 ? "oklch(70% 0.15 80)" : "oklch(65% 0.12 30)" }}></div></div>
                  <span className="imd-pct">{c.match}%</span>
                </td>
                <td>
                  <span className={`imd-chip ${c.match >= 85 ? "imd-chip--done" : "imd-chip--queued"}`}>{c.status}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="imd-footer">
          <span>AIが職務経歴 × 求人要件で照合し、上位3名を推薦</span>
          <span className="imd-link">推薦文を一括ドラフト →</span>
        </div>
      </div>
    </div>
  );
}

// ==========================================================
// 8. MockSEORank — SEO 順位 × 検索意図テーブル
// ==========================================================
function MockSEORank() {
  const kws = [
    { kw: "BtoB SaaS 比較", intent: "比較検討", rank: 4, prev: 8, ctr: "8.2%", action: "リライト推奨" },
    { kw: "BtoB SaaS とは", intent: "情報収集", rank: 2, prev: 2, ctr: "12.4%", action: "現状維持" },
    { kw: "SaaS 導入 失敗", intent: "顕在ペイン", rank: 11, prev: 18, ctr: "1.6%", action: "E-E-A-T強化" },
    { kw: "SaaS 価格", intent: "CV近接", rank: 6, prev: 5, ctr: "3.8%", action: "改善案出し" },
  ];
  return (
    <div className="uimock uimock--imd">
      <div className="uimock__chrome uimock__chrome--app">
        <div className="uimock-mini__head">
          <span className="uimock-mini__icon" style={{ background: "var(--blue-soft)", color: "var(--blue)" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.4"/><path d="M10.5 10.5L14 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
          </span>
          <div>
            <div className="uimock-mini__title">キーワード × 検索意図 × 改善提案</div>
            <div className="uimock-mini__sub">Bクライアント（仮名）/ 5月度</div>
          </div>
        </div>
        <span className="imd-tag" style={{ background: "oklch(92% 0.05 155)", color: "oklch(40% 0.14 155)" }}>平均順位 ↑ 4位改善</span>
      </div>
      <div className="uimock__body imd-body">
        <table className="imd-table">
          <thead>
            <tr>
              <th>キーワード</th>
              <th>検索意図</th>
              <th>順位</th>
              <th>CTR</th>
              <th>AI改善提案</th>
            </tr>
          </thead>
          <tbody>
            {kws.map((k, i) => (
              <tr key={i}>
                <td className="imd-name">{k.kw}</td>
                <td className="imd-muted">{k.intent}</td>
                <td className="imd-mono"><strong>{k.rank}</strong> <span style={{ color: k.rank < k.prev ? "oklch(50% 0.14 155)" : "var(--muted)" }}>({k.rank < k.prev ? "↑" : "→"}{Math.abs(k.prev - k.rank) || ""})</span></td>
                <td className="imd-mono">{k.ctr}</td>
                <td><span className="imd-chip imd-chip--queued">{k.action}</span></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="ad-ai">
          <div className="ad-ai__head">
            <span className="ad-ai__tag">AI 改善提案</span>
            既存記事リライト + E-E-A-T 強化を優先
          </div>
          <ul className="ad-ai__list">
            <li>「BtoB SaaS 比較」(4位) — 上位記事の比較軸を追加。導入企業事例を補強。</li>
            <li>「SaaS 導入 失敗」(11位) — E-E-A-Tブロック追加（執筆者プロフィール / 事例監修）。</li>
            <li>「SaaS 価格」(6位) — 競合の価格比較表を本文中に明示化。</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

const INDUSTRY_MOCKS = {
  // 第1グループ
  accounting: MockAccountingClients,
  beauty_clinic: MockBeautyCRM,
  recruitment: MockRecruitMatch,
  seo: MockSEORank,
  ad_ops: MockAdReport,
  // 第2グループ
  web_ad: MockAdReport,
  recruit_outsourcing: MockRecruitMatch,
  haken: MockRecruitMatch,
  housing: MockConstructionSurvey,
  rental_mgmt: MockRentalInbox,
};

Object.assign(window, {
  MockAccountingClients, MockRentalInbox, MockConstructionSurvey, MockCareHandoff, MockAdReport,
  MockBeautyCRM, MockRecruitMatch, MockSEORank,
  INDUSTRY_MOCKS
});