/* global React, ReactDOM */
/* 職種別AI研修シリーズ 講座詳細ページ 共通レンダラー
   各HTMLが window.COURSE_SLUG を定義 → course-data.js のデータを描画 */
const C = window.COURSES[window.COURSE_SLUG];
const ORDER = window.COURSE_ORDER;
const CONTACT = "../contact.html?course=" + C.slug;
const FORMAT = C.format || "11時間／ライブ（対面/オンライン同時双方向）＋AI Lab実習";
const PRICE = "1名あたり 税抜36万円";

function Header() {
  return (
    <header className="site-header">
      <div className="inner">
        <a href="../index.html" className="logo" aria-label="CATORCE"><img src="../assets/catorce-logo.png" alt="株式会社カトルセ" /></a>
        <nav className="nav" aria-label="グローバルナビゲーション">
          <div className="nav-svc"><a href="../local-meeting-ai.html" className="nav-svc-trigger has-sub">サービス</a><div className="nav-svc-menu" role="menu"><div className="menu-label">SERVICE</div><a href="../local-meeting-ai.html" className="nav-svc-item" role="menuitem"><span className="nt">ローカルAI議事録</span><span className="nd">クラウドに出せない会議を端末内で議事録化</span></a><a href="../ai-level-check.html" className="nav-svc-item" role="menuitem"><span className="nt">生成AI活用レベル診断</span><span className="nd">10問で個人と組織の現在地がわかる無料診断</span></a></div></div>
          <a href="../training-lp.html">AI研修</a>
          <a href="../development-cases.html">AI開発事例</a>
          <a href="../ai-advisor.html">AI顧問</a>
          <a href="../knowledge.html">ナレッジ</a>
          <a href="../news.html">お知らせ</a>
          <a href="../company-outline.html">会社概要</a>
          <a href="../recruit/index.html" target="_blank" rel="noopener">採用サイト</a>
          <a href="/career/" target="_blank" rel="noopener">AI人材・キャリア</a>
          <a href="../contact.html" className="nav-cta" style={{ color: "#fff" }}>お問い合わせ <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>);
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="top">
          <div className="brand">
            <div className="logo"><img src="../assets/catorce-logo-white.png" alt="株式会社カトルセ" /></div>
            <p>株式会社カトルセ<br />生成AIを業務に溶け込ませる、研修・開発・顧問のプロフェッショナルチーム。</p>
          </div>
          <div><h5>SERVICES</h5><ul><li><a href="../training-lp.html">生成AI研修</a></li><li><a href="../development-cases.html">生成AI開発</a></li><li><a href="../ai-advisor.html">AI顧問</a></li><li><a href="../ai-level-check.html">生成AI活用レベル診断</a></li><li><a href="../marketing.html">営業・マーケティング</a></li></ul></div>
          <div><h5>職種別AI研修</h5><ul>{ORDER.slice(0, 5).map((s) => <li key={s}><a href={s + ".html"}>{window.COURSES[s].title}</a></li>)}</ul></div>
          <div><h5>COMPANY</h5><ul><li><a href="../company-outline.html">会社概要</a></li><li><a href="/career/" target="_blank" rel="noopener">AI人材・キャリア</a></li><li><a href="../contact.html">お問い合わせ</a></li></ul></div>
        </div>
        <div className="bottom">
          <div>© 2026 CATORCE Inc.　｜　AI研修・AI活用支援</div>
          <div className="links"><a href="../company-outline.html">会社概要</a><a href="../contact.html">お問い合わせ</a></div>
        </div>
      </div>
    </footer>);
}

function Hero() {
  return (
    <section className="cd-hero">
      <div className="cd-wrap">
        <div className="badges">
          <span className="cd-badge">{C.role}</span>
          {C.demand && <span className="cd-badge req">開催リクエスト受付中</span>}
        </div>
        <h1>{C.title}</h1>
        <p className="main-copy">{C.main.split("\n").map((t, i) => <React.Fragment key={i}>{i > 0 && <br />}{t}</React.Fragment>)}</p>
        <p className="sub-copy">{C.sub}</p>
        <div className="facts"><span>{FORMAT}</span><span>{PRICE}</span></div>
        <div className="cd-btns">
          <a className="cd-btn" href={CONTACT}>この講座について相談する <span aria-hidden="true">→</span></a>
          <a className="cd-btn ghost" href="#curriculum">カリキュラムを見る <span aria-hidden="true">↓</span></a>
        </div>
      </div>
    </section>);
}

function Pains() {
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">ISSUES</span>
        <h2>こんな課題、ありませんか</h2>
        <p className="cd-lead">{C.sub}</p>
        <ul className="cd-pains">{C.pains.map((p, i) => <li key={i}>{p}</li>)}</ul>
      </div>
    </section>);
}

function Goals() {
  return (
    <section className="cd-sec">
      <div className="cd-wrap">
        <span className="cd-lab">OUTCOME</span>
        <h2>この研修で変わること</h2>
        <p className="cd-lead">{C.overview}</p>
        <ul className="cd-goals">{C.goals.map((g, i) => <li key={i}>{g}</li>)}</ul>
      </div>
    </section>);
}

function ProcessMap() {
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">PROCESS MAP</span>
        <h2>業務プロセス×AI効率化マップ</h2>
        <p className="cd-lead">日々の業務プロセスのどこにAIを差し込むと効くのかを、コマ番号と対応づけて整理しています。</p>
        <div className="cd-scroll">
          <table className="cd-table">
            <thead><tr><th>業務プロセス</th><th>現状の痛み</th><th>AIで何が変わるか</th><th>コマ</th></tr></thead>
            <tbody>{C.map.map((r, i) =>
              <tr key={i}><td className="k">{r[0]}</td><td className="pain">{r[1]}</td><td>{r[2]}</td><td className="koma">{r[3]}</td></tr>)}
            </tbody>
          </table>
        </div>
        <p className="cd-scrollhint">← 横にスクロールできます</p>
        <p className="cd-note">※削減時間の例示は自社実測に基づくものです。効果は業務内容により異なります。</p>
      </div>
    </section>);
}

function Curriculum() {
  return (
    <section className="cd-sec" id="curriculum">
      <div className="cd-wrap">
        <span className="cd-lab">CURRICULUM</span>
        <h2>カリキュラム</h2>
        <p className="cd-lead">全{C.curriculum.length}コマ・計11時間。各コマは「その職務の担当者が、業務の中でAIを使って何ができるようになるか」という技能単位で定義しています。</p>
        <div className="cd-scroll">
          <table className="cd-table">
            <thead><tr><th>コマ</th><th>タイトル</th><th>時間</th><th>習得する技能</th></tr></thead>
            <tbody>{C.curriculum.map((r, i) =>
              <tr key={i}><td className="koma">{r[0]}</td><td className="k">{r[1]}</td><td className="time">{r[2]}</td><td>{r[3]}{r[4] &&
                <dl className="cd-cur-dl"><dt>演習</dt><dd>{r[4]}</dd><dt>成果物（演習用）</dt><dd>{r[5]}</dd><dt>対応プロセス</dt><dd>{r[6]}</dd></dl>}</td></tr>)}
            </tbody>
          </table>
        </div>
        <p className="cd-scrollhint">← 横にスクロールできます</p>
        <p className="cd-note">2日構成の例：{C.twoDay}</p>
      </div>
    </section>);
}

function Topics() {
  if (!C.topics && !C.tools) return null;
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">MATERIALS</span>
        <h2>使うAIと、業界別の題材の例</h2>
        {C.tools && <p className="cd-lead">{C.tools.lead}</p>}
        {C.topics && <>
          <p className="cd-lead">習得する技能は共通で、演習の題材だけを受講者の業務に合わせます。</p>
          <div className="cd-scroll">
            <table className="cd-table">
              <thead><tr><th></th>{C.topics.cols.map((c) => <th key={c}>{c}</th>)}</tr></thead>
              <tbody>{C.topics.rows.map((r, i) =>
                <tr key={i}><td className="k">{r[0]}</td>{r.slice(1).map((v, k) => <td key={k}>{v}</td>)}</tr>)}
              </tbody>
            </table>
          </div>
          <p className="cd-scrollhint">← 横にスクロールできます</p>
        </>}
        {C.tools && C.tools.note && <div className="cd-box" style={{ marginTop: 20 }}><p>{C.tools.note}</p></div>}
        {C.conditions && <div className="cd-box mist" style={{ marginTop: 16 }}><h3>実施条件</h3><ul className="cd-goals">{C.conditions.map((t, i) => <li key={i}>{t}</li>)}</ul></div>}
      </div>
    </section>);
}

const FLOW6 = ["業務の棚卸し", "改善対象を1つ選ぶ", "Beforeの記録", "AIワークフローの設計・構築", "Afterの体験と効果見込み", "標準化"];

function Method() {
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">HOW IT WORKS</span>
        <h2>研修の進め方</h2>
        <div className="cd-box">
          <p>全コマが手を動かす演習です。講師のライブ進行（対面/オンライン同時双方向）のもと、AI Lab環境で自分の職務の題材に取り組みます。最終コマは共通実践ワーク「AI業務改善体験」——自分の業務を棚卸しし、改善対象の選定→AIワークフローの設計→効果見込みの算出→標準化までを1周します。</p>
        </div>
        <div className="cd-steps">{FLOW6.map((s, i) =>
          <div className="cd-step" key={i}><span className="n">STEP {i + 1}</span><span className="t">{s}</span></div>)}
        </div>
      </div>
    </section>);
}

function Followup() {
  return (
    <section className="cd-sec">
      <div className="cd-wrap">
        <span className="cd-lab">AFTER THE TRAINING</span>
        <h2>受講後のフォロー</h2>
        <div className="cd-box" style={{ maxWidth: "74ch" }}>
          <p>研修資料・演習で使ったプロンプト集・ワークシートは、受講者専用ポータルにすべて格納。PDF教材の横にプロンプトが並び、ワンクリックでコピーして実務で使えます。研修は受けて終わりではなく、翌日からの実務で使い続けるところまでが設計です。</p>
        </div>
        <div className="cd-shots">
          <figure><img src="../assets/portal-courses.png" alt="受講者専用ポータル「受講中のコース」画面。職種別AI研修の各講座がカードで並び、標準学習時間11時間・学習時間・進捗が表示されている。" loading="lazy" decoding="async" /><figcaption>受講中のコース — 講座ごとの学習時間と進捗</figcaption></figure>
          <figure><img src="../assets/portal-ai-level.png" alt="受講者専用ポータル「AI活用レベル」画面。総合スコアとレーダーチャート（プロンプト設計・業務適用・ツール知識・リスク管理・展開推進）で領域別スコアが表示されている。" loading="lazy" decoding="async" /><figcaption>AI活用レベル — 領域別スコアの推移</figcaption></figure>
        </div>
      </div>
    </section>);
}

function Audience() {
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">FOR WHOM</span>
        <h2>この講座の対象となる方</h2>
        <div className="cd-box mist"><p className="strong">{C.audience}</p></div>
      </div>
    </section>);
}

function Subsidy() {
  return (
    <section className="cd-sec">
      <div className="cd-wrap">
        <span className="cd-lab">SUBSIDY</span>
        <h2>助成金の活用について</h2>
        <div className="cd-box">
          <p>{C.subsidy === "B" ? window.SUBSIDY_B : window.SUBSIDY_A}</p>
          <p><a href="../training-lp.html#josei">2026年8月3日改正について詳しくは研修トップの解説へ →</a></p>
        </div>
      </div>
    </section>);
}

function Formats() {
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">FORMAT &amp; FLOW</span>
        <h2>開催形式・お申込みの流れ</h2>
        <div className="cd-two">
          <div className="cd-box"><h3>1社研修（貴社のみで開催）</h3><p>貴社の受講者だけで実施します。演習の題材は自社の業務・自社の資料を使います。{C.demand && "本講座は1社開催が基本です。開催リクエストを受け付けています。"}</p></div>
          <div className="cd-box"><h3>公開クラス（他社合同）</h3><p>{C.demand ? "本講座は需要連動での開講です。公開クラスの開催時期は、開催リクエストの状況に応じてご案内します。" : "他社の受講者と合同で実施します。1〜数名でのご参加に向いています。開催日程はお問い合わせください。"}</p></div>
        </div>
        <div className="cd-price">
          <div className="p-main"><span className="lab">受講料</span><span className="v"><b>36</b>万円<span className="u">／1名（税抜）</span></span><span className="h">11時間・全{C.curriculum.length}コマ／ライブ＋AI Lab実習</span></div>
          <div className="p-side">
            <p>人数・実施形態（1社研修／公開クラス）別のお見積りはお問い合わせください。</p>
            <a className="cd-btn ghost" href="../training-subsidy-simulator.html">価格シミュレーションを試す <span aria-hidden="true">→</span></a>
          </div>
        </div>
        <div className="cd-flow"><b>無料相談</b><span>→</span><b>職務確認・日程調整</b><span>→</span><b>実施</b><span>→</span><b>ポータルでフォロー</b></div>
        <p className="cd-note">※ 受講料は1名あたりの単価です。助成金の支給の可否は都道府県労働局の審査により決定されます。</p>
      </div>
    </section>);
}

function Faq() {
  const items = window.COURSE_FAQ.concat(C.faqExtra || []);
  return (
    <section className="cd-sec">
      <div className="cd-wrap">
        <span className="cd-lab">FAQ</span>
        <h2>よくある質問</h2>
        <div className="cd-faq">{items.map((f, i) =>
          <details key={i} open={i === 0}><summary>{f[0]}</summary><div className="a">{f[1]}</div></details>)}
        </div>
      </div>
    </section>);
}

function Cta() {
  return (
    <section className="cd-cta">
      <div className="cd-wrap">
        <h2>この講座について相談する（無料）</h2>
        <p>日程・お見積り・助成金のご相談まで、まとめてご案内します。</p>
        <div className="cd-btns">
          <a className="cd-btn on-dark" href={CONTACT}>この講座について相談する <span aria-hidden="true">→</span></a>
          <a className="cd-btn ghost" href="../training-lp.html#series">他の職種の講座を見る <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </section>);
}

function Others() {
  const rest = ORDER.filter((s) => s !== C.slug);
  return (
    <section className="cd-sec tint">
      <div className="cd-wrap">
        <span className="cd-lab">OTHER COURSES</span>
        <h2>他の職種の講座を見る</h2>
        <div className="cd-other">{rest.map((s) => {
          const o = window.COURSES[s];
          return <a href={s + ".html"} key={s}><span className="r">{o.role}</span><span className="t">{o.title}</span></a>;
        })}</div>
        <p className="cd-note"><a href="../training-lp.html#series">職種別AI研修シリーズの一覧へ →</a></p>
      </div>
    </section>);
}

function App() {
  return (
    <>
      <Header />
      <nav className="cd-crumb" aria-label="パンくず">
        <div className="wrap"><a href="../training-lp.html">研修トップ</a><span>／</span><a href="../training-lp.html#series">職種別AI研修</a><span>／</span><span>{C.title}</span></div>
      </nav>
      <Hero /><Pains /><Goals /><ProcessMap /><Curriculum /><Topics /><Method /><Followup /><Audience /><Subsidy /><Formats /><Faq /><Cta /><Others />
      <Footer />
    </>);
}

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