/* global React, ReactDOM */

/* ===== お問い合わせフォーム（今後ページ差し替え予定：この1箇所を変えれば全CTAに反映） ===== */
const CONTACT_URL = "contact.html";

/* ---------- Shared Header / Footer (mirrors training-lp) ---------- */
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="CATORCE" /></a>
        <nav className="nav">
          <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">AI記事</a>
          <a href="news.html">お知らせ</a>
          <a href="company-outline.html">会社概要</a>
          <a href="recruit/index.html" target="_blank" rel="noopener">採用サイト</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="CATORCE" /></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>研修メニュー</h5><ul><li><a href="training-2h.html">2時間 AIリテラシー</a></li><li><a href="training-10h.html">10時間 最新AI活用</a></li><li><a href="training-dept.html">部門別・テーマ別</a></li></ul></div>
          <div><h5>COMPANY</h5><ul><li><a href="company-outline.html">会社概要</a></li><li><a href={CONTACT_URL} target="_blank" rel="noopener">お問い合わせ</a></li></ul></div>
        </div>
        <div className="bottom">
          <div>© 2026 CATORCE Inc.　｜　AI研修・AI活用支援</div>
          <div className="links"><a href="#">プライバシーポリシー</a><a href="#">利用規約</a></div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Contact CTA band ---------- */
function ContactBand({ title, body }) {
  return (
    <section className="lp-cta cd-cta" id="cta">
      <div className="wrap grid">
        <div className="copy">
          <div className="eyebrow">FREE CONSULTATION</div>
          <h2>{title || <>この研修について、<br />まずはご相談ください。</>}</h2>
          <p>{body || "受講人数・実施形式（オンライン/対面）・カスタマイズのご希望など、御社の状況に合わせて最適なプランをご提案します。日程調整やお見積りもお気軽にどうぞ。"}</p>
          <div className="ctas">
            <a className="btn btn-gold" href={CONTACT_URL} target="_blank" rel="noopener">無料相談を申し込む <span className="arr">→</span></a>
            <a className="btn btn-line-light" href="training-lp.html#stages">研修メニュー一覧へ <span className="arr">↑</span></a>
          </div>
          <div className="cta-pills">
            <span className="cp"><span className="ic">◆</span>法人向け</span>
            <span className="cp"><span className="ic">◆</span>オンライン・対面対応</span>
            <span className="cp"><span className="ic">◆</span>カスタマイズ可</span>
          </div>
        </div>
        <div className="cta-visual">
          <img className="cta-img" src="assets/cta-support.png" alt="ヘッドセットを着けてノートPCで対応する、笑顔のサポート担当者。" loading="lazy" decoding="async" />
        </div>
      </div>
    </section>
  );
}

/* ---------- Course detail (data-driven via window.COURSE) ---------- */
function CourseDetail({ d }) {
  const variant = d.variant || "primary"; // primary | feat | top
  return (
    <>
      <section className="cd-hero">
        <div className="wrap grid">
          <div>
            <a className="cd-back" href="training-lp.html#stages"><span className="a">←</span> 研修メニュー一覧へ戻る</a>
            <div className={"cd-eyebrow " + (variant === "primary" ? "" : variant)}>{d.eyebrow}</div>
            {d.catchSm && <p className="cd-catch-sm">＼&nbsp;{d.catchSm}&nbsp;／</p>}
            <h1 className="cd-title" dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="cd-lead" dangerouslySetInnerHTML={{ __html: d.lead }} />
            {d.sub && <p className="cd-sub">{d.sub}</p>}
          </div>
          <div>
            <div className={"cd-bubble " + (d.bubble.tone || "")}>
              <div className="b-flag">✦&nbsp;{d.bubble.flag}&nbsp;✦</div>
              <p className="b-title">{d.bubble.title}</p>
              {d.bubble.tagline && <p className="b-tagline">{d.bubble.tagline}</p>}
              <p className="b-desc">{d.bubble.desc}</p>
              <div className="b-pills">{d.bubble.pills.map((p, i) => <span className="bp" key={i}>{p}</span>)}</div>
            </div>
          </div>
        </div>
      </section>

      <section className="cd-body tint">
        <div className="wrap">
          <div className="cd-cols">
            {/* curriculum */}
            <div className="cd-panel">
              <div className="cd-panel-head"><span className="h-ic">▤</span>{d.curriculumTitle}</div>
              <div className="cd-curri">
                {d.curriculum.map((r, i) => (
                  r.day ? (
                    <div className="cd-day" key={i}>
                      <span className="d-lab">{r.day}</span>
                      {r.dayDesc && <span className="d-desc">{r.dayDesc}</span>}
                    </div>
                  ) : (
                    <div className={"cd-row" + (r.work ? " work" : "")} key={i}>
                      <div className="r-main">
                        {r.cat && <p className="r-cat">［{r.cat}］</p>}
                        <p className="r-label">{r.label}</p>
                      </div>
                      <span className="r-time">{r.time}</span>
                    </div>
                  )
                ))}
              </div>
              <div className="cd-total"><span className="t-lab">合計受講時間</span><span className="t-val">{d.total}</span></div>
            </div>

            {/* outcomes */}
            <div className="cd-outcome">
              <div className="cd-panel" style={{ padding: "0 0 28px" }}>
                <div className="cd-panel-head"><span className="h-ic">◎</span>{d.outcomeTitle}</div>
                <div style={{ padding: "24px 28px 0" }}>
                  <p className="cd-out-lead" dangerouslySetInnerHTML={{ __html: d.outcomeLead }} />
                  <div className="cd-out-tags">{d.outcomeTags.map((t, i) => <span className="ot" key={i}>{t}</span>)}</div>
                  <div className="cd-out-list">
                    {d.outcomes.map((o, i) => (
                      <div className="cd-out-item" key={i}>
                        <span className="o-n">{String(i + 1).padStart(2, "0")}</span>
                        <div>
                          <p className="o-h">{o.h}</p>
                          <p className="o-p">{o.p}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                  {d.outcomeNote && <div className="cd-out-note">{d.outcomeNote}</div>}
                </div>
              </div>
            </div>
          </div>
          <div className="cd-notes">
            <p>※研修内容は、AIツールの最新アップデート情報や、最新活用事例を元に更新・変更が行われる場合がございます。</p>
            <p>※時間は目安です。進行状況によって、講義の時間配分が変更になる場合がございます。</p>
          </div>
        </div>
      </section>

      {d.targets && <Targets items={d.targets} />}
      {d.pricing && <Pricing p={d.pricing} />}

      <ContactBand title={d.ctaTitle} body={d.ctaBody} />
    </>
  );
}

/* ---------- Target audience (via d.targets) ---------- */
function TargetIcon({ name }) {
  const common = { viewBox: "0 0 24 24", width: 26, height: 26, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
  if (name === "user") return (<svg {...common}><circle cx="12" cy="8" r="4" /><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" /></svg>);
  if (name === "star") return (<svg {...common}><path d="M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4-4.8-2.5-4.8 2.5.9-5.4L4.2 8.7l5.4-.8z" /></svg>);
  return (<svg {...common}><rect x="3" y="7" width="18" height="13" rx="2" /><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 13h18" /></svg>);
}
function Targets({ items }) {
  return (
    <section className="cd-target">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">TARGET</div>
          <h2>こんな方・組織におすすめ</h2>
        </div>
        <div className={"ct-grid cols-" + items.length}>
          {items.map((t, i) => (
            <div className="ct-card" key={i}>
              <span className="ct-ic"><TargetIcon name={t.icon} /></span>
              <h3>{t.h}</h3>
              <p>{t.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pricing & subsidy (via d.pricing) ---------- */
function Pricing({ p }) {
  return (
    <section className="cd-pricing tint">
      <div className="wrap">
        <div className="sec-head">
          <div className="sec-eyebrow">PRICING</div>
          <h2>受講費用・助成金</h2>
          {p.lead && <p className="sec-lead">{p.lead}</p>}
        </div>
        <div className="cp-grid">
          <div className="cp-card">
            <div className="cp-plabel">{p.priceLabel || "通常受講料（税抜）"}</div>
            <div className="cp-price"><b>{p.price}</b><span>円</span></div>
            <div className="cp-unit">{p.unit}</div>
            <ul className="cp-specs">
              {p.specs.map((s, i) => <li key={i}>{s}</li>)}
            </ul>
            <a className="cp-apply" href={CONTACT_URL} target="_blank" rel="noopener">受講を申し込む <span className="a">→</span></a>
          </div>
          <div className="cp-sub">
            <div className="cp-sub-tag">助成金適用時</div>
            <div className="cp-sub-cols">
              {p.subsidy.map((s, i) => (
                <div className="cp-sub-col" key={i}>
                  <div className="cs-label">{s.label}</div>
                  <div className="cs-rate">{s.rate}</div>
                  <div className="cs-orig">{s.original}</div>
                  <div className="cs-net"><b>{s.net}</b><span>円</span></div>
                  <div className="cs-unit">/1人（実質負担）</div>
                </div>
              ))}
            </div>
            <a className="cp-sim" href="training-subsidy-simulator.html">▶ 助成金シミュレーションで実質負担を試算する</a>
          </div>
        </div>
        {p.notes && <div className="cp-notes">{p.notes.map((n, i) => <p key={i}>{n}</p>)}</div>}
      </div>
    </section>
  );
}

/* ---------- Department / theme list (via window.DEPT) ---------- */
function DeptIcon() {
  return (
    <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M8 13h5" />
    </svg>
  );
}
function DeptPage({ d }) {
  return (
    <>
      <section className="cd-hero">
        <div className="wrap">
          <a className="cd-back" href="training-lp.html#stages"><span className="a">←</span> 研修メニュー一覧へ戻る</a>
          <div className="cd-eyebrow">専門コース ｜ PROFESSIONAL</div>
          <h1 className="cd-title">部門別・<span className="time">テーマ別</span>実践研修</h1>
          <p className="cd-lead">すでにAI活用に取り組み始めている企業向けに、<span className="em">テーマ別の実践研修</span>をご用意しています。</p>
          <p className="cd-sub">自社の業務課題や対象部門に合わせて、提案書作成・リサーチ・画像生成・業務フロー改善・AIエージェント開発など、目的別に深く学べます。気になるテーマはお気軽にお問い合わせください。</p>
        </div>
      </section>

      <section className="cd-body tint">
        <div className="wrap">
      {(d.features || [d.feature]).map((f, i) => (
        <div className="dept-feature" key={i}>
          <div>
            <span className="df-tag">{f.tag || "⭐ ステップアップ講座 ｜ 詳細ページあり"}</span>
            <h3>{f.title}</h3>
            <p>{f.desc}</p>
          </div>
          <a className="btn btn-gold df-cta" href={f.href}>詳細を見る <span className="arr">→</span></a>
        </div>
      ))}

          {/* other courses */}
          <div className="dept-grid">
            {d.courses.map((c, i) => (
              <a className="dept-card" href={CONTACT_URL} target="_blank" rel="noopener" key={i}>
                <span className="dc-ic"><DeptIcon /></span>
                <div className="dc-main">
                  <h4>{c.h}</h4>
                  <p>{c.p}</p>
                </div>
                <span className="dc-link">お問い合わせ <span className="a">→</span></span>
              </a>
            ))}
          </div>
          <p className="dept-note">上記テーマの<b>カリキュラム詳細・実施時間・費用</b>は、内容により個別にご案内しています。<br />ご興味のあるテーマがあれば、お気軽にお問い合わせください。</p>
        </div>
      </section>

      <ContactBand
        title={<>気になるテーマから、<br />お気軽にご相談ください。</>}
        body="対象部門・受講人数・実施形式に合わせて、テーマ別研修をカスタマイズしてご提案します。複数テーマの組み合わせや、自社業務に特化した内容にも対応可能です。"
      />
    </>
  );
}

function App() {
  return (
    <>
      <Header />
      {window.DEPT ? <DeptPage d={window.DEPT} /> : <CourseDetail d={window.COURSE} />}
      <Footer />
    </>
  );
}

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