/* service-ai-course.jsx — 業種別コース 詳細ページの共通本体
   各シェル（service-ai-<id>.html）が window.COURSE_ID を先に定義してから <CoursePage/> を描く。
   データは src/ai-courses-data.jsx（COURSES 他）。 */

const CO = () => findCourse(window.COURSE_ID);

/* ---- 01 現場の困りごと → このコースで扱うこと ---- */
const CrsPains = () => {
  const c = CO();
  const m = TYPE_META[c.type];
  return (
    <section style={{padding:'72px 0 56px', background:'var(--paper)'}} data-screen-label="01 困りごと">
      <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
        <div style={{display:'flex', gap:'8px 12px', flexWrap:'wrap', marginBottom:20}}>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.06em', color:'#fff', background:'var(--navy-800)', borderRadius:4, padding:'4px 11px', fontWeight:600}}>{m.label}</span>
          <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.06em', color:'var(--accent)', background:'#fff', border:'1px solid var(--accent)', borderRadius:4, padding:'4px 11px', fontWeight:600}}>{m.tools}</span>
        </div>

        <div className="section-head" style={{marginBottom:26}}>
          <Eyebrow>こんな状態を変えます</Eyebrow>
          <h2>{c.tagline}</h2>
          <p className="lead" style={{marginTop:14, maxWidth:'62ch'}}>{c.heroLead}</p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(250px, 1fr))', gap:14, marginBottom:22}}>
          {c.pains.map((p, i) => (
            <div key={i} style={{background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderLeft:'3px solid var(--accent)', borderRadius:8, padding:'16px 18px'}}>
              <div style={{fontFamily:'var(--font-serif)', fontSize:14, lineHeight:1.75, color:'var(--ink-900)', fontWeight:600}}>「{p}」</div>
            </div>
          ))}
        </div>

        <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'22px 24px'}}>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)', margin:'0 0 8px'}}>受講後にできるようになること</h4>
          <p style={{fontSize:13.5, lineHeight:1.95, color:'var(--ink-700)', margin:'0 0 18px'}}>{c.goal}</p>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)', margin:'0 0 8px'}}>対象となる方の職務</h4>
          <p style={{fontSize:13.5, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>{c.target}</p>
          <p style={{fontSize:12, lineHeight:1.85, color:'var(--ink-500)', margin:'12px 0 0', paddingTop:12, borderTop:'1px dashed var(--paper-line)'}}>
            ※ お申込み時に、受講される方の担当業務を伺います。扱う書式や題材をその方の仕事に合わせるためです。
          </p>
        </div>
      </div>
    </section>
  );
};

/* ---- 02 カリキュラム（回ごとのカード） ---- */
const CrsCurriculum = () => {
  const c = CO();
  const total = courseHours(c);
  return (
    <section id="curriculum" style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="02 カリキュラム">
      <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
        <div className="section-head" style={{marginBottom:14}}>
          <Eyebrow>CURRICULUM · 全6回／実訓練{fmtH(total)}時間</Eyebrow>
          <h2>カリキュラム</h2>
          <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
            各回2時間で、扱うのはこの3つ。<strong>全科目が、その職務の実務そのもの</strong>です。研修中に仕上げたものは、そのまま現場でお使いいただけます。
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:14, marginBottom:16}}>
          {c.sessions.map((s, si) => {
            const sub = s[1].reduce((a, i) => a + i[1], 0);
            return (
              <div key={si} style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'20px 22px', display:'flex', flexDirection:'column'}}>
                <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', gap:10, marginBottom:12}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.1em', color:'var(--accent)', fontWeight:700}}>第{si + 1}回</span>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--ink-500)'}}>実訓練 {fmtH(sub)}時間</span>
                </div>
                <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16.5, color:'var(--ink-900)', margin:'0 0 14px', lineHeight:1.55, letterSpacing:'.02em'}}>{s[0]}</h3>
                <ol style={{margin:0, padding:0, listStyle:'none', flex:1}}>
                  {s[1].map((item, ii) => (
                    <li key={ii} style={{display:'flex', gap:10, alignItems:'flex-start', padding:'9px 0', borderTop:'1px solid var(--paper-line)'}}>
                      <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--ink-500)', flexShrink:0, marginTop:3}}>{ii + 1}</span>
                      <span style={{fontSize:13, lineHeight:1.75, color:'var(--ink-700)', flex:1, minWidth:0}}>{item[0]}</span>
                    </li>
                  ))}
                </ol>
              </div>
            );
          })}
        </div>

        {/* 複数の施設種別を1コースにまとめた場合の読み替え表。科目名は抽象に保ち、
            受講者が自施設の書式を扱うことで「訓練内容に沿った受講者の選定」を満たす。 */}
        {c.variants && (
          <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--navy-800)', borderRadius:'var(--radius)', padding:'22px 24px', marginBottom:16}}>
            <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16.5, color:'var(--ink-900)', margin:'0 0 6px', letterSpacing:'.02em'}}>施設ごとに、扱う書式はこう読み替えます</h3>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 16px', maxWidth:'62ch'}}>
              同じカリキュラムを3施設種で共同開催します。やることは同じでも書式の呼び名が違うため、<strong>受講者はご自身の施設の書式を持ち込んで</strong>各回の演習を行います。ご自身の担当業務そのものを扱う形です。
            </p>
            <div style={{overflowX:'auto', WebkitOverflowScrolling:'touch'}}>
              <table style={{width:'100%', minWidth:660, borderCollapse:'collapse', fontSize:12}}>
                <thead>
                  <tr style={{background:'var(--paper-2)'}}>
                    <th style={{textAlign:'left', padding:'9px 11px', borderBottom:'1px solid var(--paper-line)', fontWeight:700, color:'var(--ink-900)', whiteSpace:'nowrap'}}>施設</th>
                    {c.variants.heads.map((h, i) => (
                      <th key={i} style={{textAlign:'left', padding:'9px 11px', borderBottom:'1px solid var(--paper-line)', fontWeight:700, color:'var(--ink-900)', lineHeight:1.5}}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {c.variants.rows.map((r, ri) => (
                    <tr key={ri}>
                      <th scope="row" style={{textAlign:'left', padding:'10px 11px', borderTop:'1px solid var(--paper-line)', borderRight:'1px solid var(--paper-line)', background:'var(--paper-2)', fontWeight:700, color:'var(--ink-900)', lineHeight:1.5, verticalAlign:'top'}}>{r[0]}</th>
                      {r[1].map((v, vi) => (
                        <td key={vi} style={{padding:'10px 11px', borderTop:'1px solid var(--paper-line)', lineHeight:1.65, color:'var(--ink-700)', verticalAlign:'top'}}>{v}</td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div style={{background:'var(--navy-800)', color:'#fff', borderRadius:'var(--radius)', padding:'20px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap'}}>
          <div>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, letterSpacing:'.02em'}}>実訓練時間 合計 {fmtH(total)}時間</div>
            <div style={{fontSize:12, lineHeight:1.8, color:'rgba(255,255,255,.78)', marginTop:5}}>
              1回の開催枠は2時間15分（うち休憩15分）。休憩は実訓練時間に含めていません。
            </div>
          </div>
          <a className="btn btn--primary" href="contact.html">このコースを相談する <Arrow/></a>
        </div>

        {/* 科目ごとの時間数は既定で畳む。顧客には不要だが、助成金の計画届では科目単位の区分が効くため出せるようにしておく */}
        <details style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:10, marginTop:14, overflow:'hidden'}}>
          <summary style={{cursor:'pointer', listStyle:'none', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'15px 20px'}}>
            <span style={{minWidth:0}}>
              <span style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:14.5, color:'var(--ink-900)', display:'block'}}>助成金申請用｜科目ごとの時間割</span>
              <span style={{fontSize:12, lineHeight:1.7, color:'var(--ink-500)'}}>職業訓練実施計画届にそのまま添付できる形（全18科目）</span>
            </span>
            <span style={{color:'var(--accent)', flexShrink:0}}><Arrow dir="d"/></span>
          </summary>
          <div style={{padding:'0 20px 20px'}}>
            <p style={{fontSize:12.5, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 14px'}}>
              助成金の計画届には、科目ごとの時間数の記載が必要です。そのまま添付できる形にしてあります。
            </p>
            <div style={{overflowX:'auto', WebkitOverflowScrolling:'touch'}}>
              <table style={{width:'100%', minWidth:480, borderCollapse:'collapse', fontSize:12.5}}>
                <thead>
                  <tr style={{background:'var(--paper-2)'}}>
                    <th style={{textAlign:'left', padding:'9px 12px', borderBottom:'1px solid var(--paper-line)', fontWeight:700, whiteSpace:'nowrap', color:'var(--ink-900)'}}>回</th>
                    <th style={{textAlign:'left', padding:'9px 12px', borderBottom:'1px solid var(--paper-line)', fontWeight:700, color:'var(--ink-900)'}}>科目</th>
                    <th style={{textAlign:'right', padding:'9px 12px', borderBottom:'1px solid var(--paper-line)', fontWeight:700, whiteSpace:'nowrap', color:'var(--ink-900)'}}>時間</th>
                  </tr>
                </thead>
                <tbody>
                  {c.sessions.map((s, si) => s[1].map((item, ii) => (
                    <tr key={`${si}-${ii}`}>
                      <td style={{padding:'9px 12px', borderTop:'1px solid var(--paper-line)', whiteSpace:'nowrap', fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--accent)', verticalAlign:'top'}}>
                        {ii === 0 ? `第${si + 1}回` : ''}
                      </td>
                      <td style={{padding:'9px 12px', borderTop:'1px solid var(--paper-line)', lineHeight:1.7, color:'var(--ink-700)'}}>{item[0]}</td>
                      <td style={{padding:'9px 12px', borderTop:'1px solid var(--paper-line)', textAlign:'right', whiteSpace:'nowrap', fontFamily:'var(--font-mono)', color:'var(--ink-700)'}}>{fmtH(item[1])}</td>
                    </tr>
                  )))}
                  <tr style={{background:'var(--paper-2)'}}>
                    <td colSpan={2} style={{padding:'11px 12px', borderTop:'2px solid var(--accent)', fontWeight:700, color:'var(--ink-900)'}}>実訓練時間 合計</td>
                    <td style={{padding:'11px 12px', borderTop:'2px solid var(--accent)', textAlign:'right', whiteSpace:'nowrap', fontFamily:'var(--font-mono)', fontWeight:700, color:'var(--accent)'}}>{fmtH(total)}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p style={{fontSize:11.5, lineHeight:1.8, color:'var(--ink-500)', margin:'10px 0 0'}}>
              単位は時間。1回の開催枠は2時間15分（うち休憩15分）で、休憩は実訓練時間に含めていません。
            </p>
          </div>
        </details>

        <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'20px 24px', marginTop:14}}>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)', margin:'0 0 8px'}}>持ち帰る成果物</h4>
          <p style={{fontSize:13.5, lineHeight:1.95, color:'var(--ink-700)', margin:0}}>{c.output}</p>
          {c.note && (
            <p style={{fontSize:12, lineHeight:1.85, color:'var(--ink-500)', margin:'12px 0 0', paddingTop:12, borderTop:'1px dashed var(--paper-line)'}}>※ {c.note}</p>
          )}
        </div>
      </div>
    </section>
  );
};

/* ---- 03 助成金 ---- */
const CrsSubsidy = () => {
  const c = CO();
  return (
    <section id="subsidy" style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="03 助成金">
      <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
        <div className="section-head" style={{marginBottom:22}}>
          <Eyebrow>SUBSIDY · 助成金</Eyebrow>
          <h2>人材開発支援助成金を<br/>お使いいただけます。</h2>
          <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
            事業展開等リスキリング支援コースの対象です。中小企業で経費助成の割合が高い場合、385,000円／名の受講料に対して<strong>実質8万円強／名</strong>の負担となる例があります。
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(230px, 1fr))', gap:14, marginBottom:16}}>
          {[
            ['受講料', COURSE_PRICE, '税込'],
            ['助成金活用後の負担', 'およそ8万円強／名', '中小企業で経費助成の割合が高い場合の例'],
            ['回数・実訓練時間', `全6回／${fmtH(courseHours(c))}時間`, '1回2時間15分（うち休憩15分）'],
            ['実施方法', '同時双方向オンライン', 'Zoom。貸切での通学制も可']
          ].map((x, i) => (
            <div key={i} style={{background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'18px 20px'}}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.1em', color:'var(--ink-500)', marginBottom:8}}>{x[0]}</div>
              <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', lineHeight:1.5, marginBottom:6}}>{x[1]}</div>
              <div style={{fontSize:12, lineHeight:1.75, color:'var(--ink-500)'}}>{x[2]}</div>
            </div>
          ))}
        </div>

        <div className="callout callout--info">
          <h4>申請まで、こちらで引き受けます</h4>
          <p>
            使えるかどうかの確認、計画届の作成、研修後の支給申請まで、グループの社会保険労務士法人 労務ニュース（累計6億円超の申請実績）が一緒に進めます。カリキュラムは科目ごとの時間数を明示した形でお渡しするので、計画届にそのまま添付できます。「研修にお金をかけたいが原資がない」を解けるケースは少なくありません。
          </p>
        </div>

        <p style={{fontSize:12, lineHeight:1.9, color:'var(--ink-500)', margin:'14px 0 0'}}>
          ※ 助成金の支給は労働局の審査によります。要件の充足や支給額を当社が保証するものではありません。実際の活用可否は、事業所の状況を確認したうえでご案内します。
        </p>
        <p style={{fontSize:12.5, lineHeight:1.9, margin:'12px 0 0'}}>
          <a href="service-ai-courses.html">全コースの一覧を見る →</a>
        </p>
      </div>
    </section>
  );
};

/* ---- 04 実施要領 ---- */
const CrsFormat = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="04 実施要領">
    <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:22}}>
        <Eyebrow>FORMAT · 実施要領</Eyebrow>
        <h2>実施要領</h2>
      </div>
      <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', overflow:'hidden', marginBottom:14}}>
        {[
          ['料金', `${COURSE_PRICE}（${COURSE_PRICE_NOTE.replace('税込・', '税込。')}）`],
          ['回数・時間', '全6回 × 1回2時間15分（うち休憩15分）＝ 実訓練時間 12.0時間'],
          ['実施方法', '同時双方向型オンライン（Zoom）。貸切での通学制も可。eラーニングは行いません'],
          ['開催間隔', '週1回 または 隔週（各回の宿題を実行する時間を確保するため）'],
          ['人数', '社内貸切での実施にも対応。ご希望の人数・日程に合わせて調整します'],
          ['講師', '倉田 諒（株式会社労務ニュース 代表取締役／経営心理士・組織分析アドバイザー®）']
        ].map((r, i) => (
          <div key={i} className="crs-kv" style={{display:'grid', gridTemplateColumns:'minmax(120px, 26%) 1fr', borderTop: i ? '1px solid var(--paper-line)' : 'none'}}>
            <div style={{padding:'14px 18px', background:'var(--paper-2)', fontSize:13, fontWeight:700, lineHeight:1.65, color:'var(--ink-900)'}}>{r[0]}</div>
            <div style={{padding:'14px 18px', fontSize:13, lineHeight:1.85, color:'var(--ink-700)'}}>{r[1]}</div>
          </div>
        ))}
      </div>
      <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'20px 24px'}}>
        <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)', margin:'0 0 12px'}}>受講にあたってのご準備</h4>
        <ul style={{margin:0, paddingLeft:18, fontSize:13, lineHeight:1.95, color:'var(--ink-700)'}}>
          <li>各回で、貴社の実際の文書・データをお使いいただきます（研修用のサンプルではなく、実務の成果物を持ち帰るため）。</li>
          <li>個人情報を含む資料は、AIに渡す前のマスキング手順を第1回で扱います。当社の受講者向けマスキングツールもお渡しします。</li>
          <li>AIエージェントコースは、受講前にPC環境（Claude Codeの導入可否・社内ネットワークの制約）を確認します。</li>
        </ul>
      </div>
    </div>
  </section>
);

/* ---- 05 ほかのコース ---- */
const CrsOthers = () => {
  const c = CO();
  const same = COURSES.filter(x => x.type === c.type && x.id !== c.id);
  const other = COURSES.filter(x => x.type !== c.type);
  const m = TYPE_META[c.type];
  const om = TYPE_META[c.type === 'basic' ? 'agent' : 'basic'];
  const Row = ({ list, heading, note }) => (
    <div style={{marginBottom:26}}>
      <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', margin:'0 0 5px', letterSpacing:'.02em'}}>{heading}</h3>
      <p style={{fontSize:12.5, lineHeight:1.8, color:'var(--ink-500)', margin:'0 0 12px'}}>{note}</p>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:10}}>
        {list.map(x => (
          <a key={x.id} href={x.page} style={{display:'flex', flexDirection:'column', gap:5, background:'#fff', border:'1px solid var(--paper-line)', borderRadius:8, padding:'13px 15px', textDecoration:'none', color:'inherit', transition:'border-color .2s, transform .2s'}}
            onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--accent)';e.currentTarget.style.transform='translateY(-2px)';}}
            onMouseLeave={e=>{e.currentTarget.style.borderColor='';e.currentTarget.style.transform='';}}
          >
            <span style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:14, lineHeight:1.5, color:'var(--ink-900)'}}>{x.short}</span>
            <span style={{fontSize:11.5, lineHeight:1.7, color:'var(--ink-500)'}}>{x.tagline}</span>
          </a>
        ))}
      </div>
    </div>
  );
  return (
    <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="05 ほかのコース">
      <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
        <div className="section-head" style={{marginBottom:24}}>
          <Eyebrow>OTHER COURSES · 全{COURSES.length}コース</Eyebrow>
          <h2>ほかの業種・職種のコース</h2>
        </div>
        <Row list={same} heading={`同じ${m.label}（${m.tools}）`} note={m.who} />
        <Row list={other} heading={`${om.label}（${om.tools}）`} note={om.who} />
        <div className="callout callout--info">
          <h4>ご希望の業種がない場合</h4>
          <p>
            コースは順次追加しています。介護事業所・医療機関・建設・不動産・運送・飲食小売など、ご希望の業種・職種があればお聞かせください。既存コースの科目を貴社の業務に差し替える形でも組めます（差し替え後も実訓練12.0時間と全科目の実務適用は維持します）。
          </p>
        </div>
        <p style={{fontSize:12.5, lineHeight:1.9, margin:'14px 0 0'}}>
          <a href="service-ai-courses.html">業種・職種別コースの一覧へ戻る →</a>　／
          <a href="service-ai.html">AI活用支援の全体を見る →</a>
        </p>
      </div>
    </section>
  );
};

/* ---- 06 FAQ ---- */
const CrsFAQ = () => {
  const c = CO();
  const m = TYPE_META[c.type];
  const faqs = [
    { q: 'これまでのリスキリング研修と、どう違いますか？', a: `扱う題材が違います。リスキリング研修は業種を問わない汎用的な題材でAIの使い方を学ぶ構成です。本コースは全科目が「${c.short}」の担当業務そのもので構成されており、研修中に作ったものをそのまま実務で使えます。` },
    { q: `${m.label}ではなく、もう一方のコースの方が合うか判断できません。`, a: 'PC操作に不慣れな方が多い職場、ブラウザで完結させたい場合は基礎コース（ChatGPT・Gemini中心）です。扱う書類やデータの量が多く、一括生成や突合まで踏み込みたい場合はAIエージェントコース（Claude Code中心）です。判断が難しい場合は、無料相談で現在の業務とPC環境を伺ってご提案します。' },
    { q: '助成金はいくら戻ってきますか？', a: '事業所の規模や訓練の実施方法、賃金助成の対象時間によって変わります。中小企業で経費助成の割合が高い場合、385,000円／名の受講料に対して実質8万円強／名の負担となる例があります。正確な額は、貴社の状況を確認したうえで試算してご案内します。助成金の支給は労働局の審査によるため、当社が支給を保証するものではありません。' },
    { q: 'カリキュラムを自社の業務に合わせて変えられますか？', a: 'できます。ただし変更後も、全科目を実務適用の内容にすることと、実訓練時間12.0時間を確保することは維持します（助成金の要件を満たすため）。ご希望を伺って組み直します。' },
    { q: '1人だけの受講もできますか？', a: '可能です。社内貸切での実施にも対応しています。人数やご希望の日程に合わせて調整しますので、ご相談ください。' },
    { q: 'なぜ社労士法人グループがAI研修をやっているのですか？', a: '当社は社会保険労務士法人 労務ニュースを内に持つ労務ニュースグループの一社で、日常的に人事労務の実務を行っています。その現場で、就業規則の生成・雇用契約書の一括作成・給与計算前のチェック・顧問先規程の横断分析などにAIを実際に使っています。使ったことのある業務を教えているため、「実務でどこが詰まるか」を踏まえて進められます。' },
    { q: 'eラーニングで受講できますか？', a: '行っていません。各回で実際に手を動かし、その場で成果物を仕上げていただく形のため、同時双方向のオンライン（Zoom）または貸切の通学制で実施します。' }
  ];
  return (
    <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="06 FAQ">
      <div className="container" style={{maxWidth:820, margin:'0 auto'}}>
        <div className="section-head" style={{marginBottom:24}}>
          <Eyebrow>FAQ · よくあるご質問</Eyebrow>
          <h2>よくあるご質問</h2>
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:10}}>
          {faqs.map((f, i) => (
            <details key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'16px 20px'}}>
              <summary style={{fontWeight:700, fontSize:14.5, color:'var(--ink-900)', cursor:'pointer', listStyle:'none', display:'flex', gap:12, alignItems:'flex-start'}}>
                <span style={{color:'var(--accent)', fontFamily:'var(--font-mono)', fontWeight:700, flexShrink:0}}>Q.</span><span style={{minWidth:0}}>{f.q}</span>
              </summary>
              <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:'12px 0 0', paddingLeft:28}}>{f.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---- 07 CTA ---- */
const CrsCTA = () => {
  const c = CO();
  return (
    <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="07 CTA">
      <div className="container" style={{textAlign:'center', maxWidth:720, margin:'0 auto'}}>
        <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.24em', color:'rgba(255,255,255,.7)', marginBottom:16}}>FREE CONSULTATION</div>
        <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(24px,3.2vw,34px)', lineHeight:1.55, color:'#fff', marginBottom:18, letterSpacing:'.04em'}}>
          <em style={{fontStyle:'normal', background:'linear-gradient(180deg, transparent 62%, rgba(230,126,34,.55) 62% 92%, transparent 92%)', padding:'0 4px'}}>{c.short}</em>の、<br/>どの業務から始めますか。
        </h2>
        <p style={{fontSize:15, lineHeight:2, color:'rgba(255,255,255,.85)', marginBottom:28}}>
          受講予定者の担当業務を伺い、カリキュラムの当てはまり具合と助成金の活用可否をご案内します。科目の差し替えもご相談いただけます。
        </p>
        <div style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
          <a className="btn btn--primary btn--lg" href="contact.html">無料相談を予約する <Arrow/></a>
          <a className="btn btn--ghost btn--lg" href="service-ai-courses.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>全{COURSES.length}コースを見る</a>
        </div>
      </div>
    </section>
  );
};

/* ---- ページ本体 ---- */
const CoursePage = () => {
  const c = CO();
  return (
    <>
      <Topbar current="service.html" />
      <PageHero
        kicker={`AI TRAINING · ${TYPE_META[c.type].label}`}
        title={<>{c.short}のための<br/><em>{c.type === 'agent' ? 'AIエージェント実務研修' : 'AI実務研修'}</em></>}
        lead={`全6回・実訓練12.0時間・${COURSE_PRICE}（税込）。全科目が「${c.short}」の実務そのもの。人材開発支援助成金の活用で、実質8万円強／名の負担でご受講いただけます。`}
      />
      <Breadcrumb trail={[
        {label:'ホーム', href:'index.html'},
        {label:'サービス', href:'service.html'},
        {label:'AI活用支援', href:'service-ai.html'},
        {label:'業種・職種別コース', href:'service-ai-courses.html'},
        {label:c.short}
      ]} />
      <CrsPains />
      <CrsCurriculum />
      <CrsSubsidy />
      <CrsFormat />
      <CrsOthers />
      <CrsFAQ />
      <CrsCTA />
      <Footer />
    </>
  );
};

Object.assign(window, { CoursePage });
