/* service-ai-courses.html — AI研修コース一覧（業種・職種別9コース＋汎用3コース）
   データは src/ai-courses-data.jsx。各カードは業種ごとの専用ページへ飛ぶ。 */

/* ---- 01 選び方（最初に置く：どのコースを見ればよいか） ---- */
const CoPicker = () => (
  <section style={{padding:'64px 0 48px', background:'var(--paper)'}} data-screen-label="01 選び方">
    <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:26}}>
        <Eyebrow>HOW TO CHOOSE · コースの選び方</Eyebrow>
        <h2>まず、2つのどちらかを選びます。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
          職場のパソコンの慣れと、扱う書類・データの量で分かれます。迷ったら無料相談でお聞かせください。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16}}>
        {['basic', 'agent'].map(t => {
          const m = TYPE_META[t];
          const n = COURSES.filter(c => c.type === t).length;
          return (
            <a key={t} href={`#${t}`} style={{display:'flex', flexDirection:'column', background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'22px 24px', textDecoration:'none', color:'inherit', transition:'transform .2s, box-shadow .2s'}}
              onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 28px -12px rgba(20,32,60,.15)';}}
              onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}
            >
              <span style={{alignSelf:'flex-start', fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.08em', color:'#fff', background:'var(--navy-800)', borderRadius:4, padding:'3px 10px', fontWeight:600, marginBottom:12}}>{m.tools}</span>
              <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:19, color:'var(--ink-900)', margin:'0 0 10px', letterSpacing:'.02em'}}>{m.label}<span style={{fontFamily:'var(--font-mono)', fontSize:12.5, color:'var(--ink-500)', fontWeight:500, marginLeft:8}}>{n}コース</span></h3>
              <p style={{fontFamily:'var(--font-serif)', fontSize:14, lineHeight:1.7, color:'var(--accent)', fontWeight:600, margin:'0 0 10px'}}>{m.who}</p>
              <p style={{fontSize:13, lineHeight:1.85, color:'var(--ink-700)', margin:'0 0 14px', flex:1}}>{m.lead}</p>
              <span style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.06em', color:'var(--accent)', fontWeight:600, display:'inline-flex', alignItems:'center', gap:6, borderTop:'1px dashed var(--paper-line)', paddingTop:12}}>
                {m.label}の{n}コースを見る <Arrow dir="d"/>
              </span>
            </a>
          );
        })}
      </div>
    </div>
  </section>
);

/* ---- 02 コース一覧（カード＝押すと専用ページへ） ---- */
const CourseTile = ({ course }) => (
  <a href={course.page} style={{
    display:'flex', flexDirection:'column', height:'100%', background:'#fff',
    border:'1px solid var(--paper-line)', borderLeft:'3px solid var(--accent)',
    borderRadius:'var(--radius)', padding:'22px 24px 20px', textDecoration:'none', color:'inherit',
    transition:'transform .2s, box-shadow .2s'
  }}
  onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 28px -12px rgba(20,32,60,.18)';}}
  onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}
  >
    <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:20, color:'var(--ink-900)', margin:'0 0 8px', lineHeight:1.45, letterSpacing:'.02em'}}>{course.short}</h3>
    <p style={{fontFamily:'var(--font-serif)', fontSize:13.5, lineHeight:1.7, color:'var(--accent)', fontWeight:600, margin:'0 0 12px'}}>{course.tagline}</p>
    <p style={{fontSize:12.5, lineHeight:1.8, color:'var(--ink-700)', margin:'0 0 14px', flex:1}}>
      <strong style={{color:'var(--ink-900)'}}>対象</strong>：{course.target.length > 84 ? course.target.slice(0, 84) + '…' : course.target}
    </p>
    <div style={{display:'flex', gap:'6px 14px', flexWrap:'wrap', paddingTop:12, borderTop:'1px dashed var(--paper-line)', marginBottom:12}}>
      <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--ink-500)'}}>全6回／実訓練{fmtH(courseHours(course))}時間</span>
      <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--ink-500)'}}>{COURSE_PRICE}</span>
    </div>
    <span style={{
      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
      background:'var(--accent)', color:'#fff', borderRadius:6, padding:'11px 16px',
      fontSize:13.5, fontWeight:700, letterSpacing:'.02em'
    }}>カリキュラムを見る <Arrow/></span>
  </a>
);

const CourseSection = ({ type }) => {
  const list = COURSES.filter(c => c.type === type);
  const m = TYPE_META[type];
  return (
    <div id={type} style={{marginBottom:48, scrollMarginTop:90}}>
      <div style={{display:'flex', alignItems:'baseline', gap:12, flexWrap:'wrap', marginBottom:8}}>
        <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:22, color:'var(--ink-900)', margin:0, letterSpacing:'.02em'}}>{m.label}</h3>
        <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.06em', color:'#fff', background:'var(--navy-800)', borderRadius:4, padding:'3px 10px', fontWeight:600}}>{m.tools}</span>
        <span style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--ink-500)'}}>{list.length}コース</span>
      </div>
      <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 20px', maxWidth:'62ch'}}>{m.who}。{m.lead}</p>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16}}>
        {list.map(c => <CourseTile key={c.id} course={c} />)}
      </div>
    </div>
  );
};

const GeneralSection = () => (
  <div id="general" style={{marginBottom:20, scrollMarginTop:90}}>
    <div style={{display:'flex', alignItems:'baseline', gap:12, flexWrap:'wrap', marginBottom:8}}>
      <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:22, color:'var(--ink-900)', margin:0, letterSpacing:'.02em'}}>汎用コース</h3>
      <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, letterSpacing:'.06em', color:'var(--ink-700)', background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:4, padding:'3px 10px', fontWeight:600}}>業種を問わない</span>
      <span style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--ink-500)'}}>{GENERAL_COURSES.length}コース</span>
    </div>
    <p style={{fontSize:13.5, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 20px', maxWidth:'62ch'}}>
      AIの使い方そのものを一から学びたい場合、若手社員の育成を目的とする場合はこちら。これまでどおり実施しています。
    </p>
    <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16}}>
      {GENERAL_COURSES.map((g, i) => (
        <a key={i} href={g.href} style={{
          display:'flex', flexDirection:'column', height:'100%', background:'#fff',
          border:'1px solid var(--paper-line)', borderLeft:'3px solid var(--ink-500)',
          borderRadius:'var(--radius)', padding:'22px 24px 20px', textDecoration:'none', color:'inherit',
          transition:'transform .2s, box-shadow .2s'
        }}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow='0 12px 28px -12px rgba(20,32,60,.18)';}}
        onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow='';}}
        >
          <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, color:'var(--ink-900)', margin:'0 0 8px', lineHeight:1.5, letterSpacing:'.02em'}}>{g.name}</h3>
          <p style={{fontFamily:'var(--font-serif)', fontSize:13.5, lineHeight:1.7, color:'var(--ink-500)', fontWeight:600, margin:'0 0 12px'}}>{g.short}</p>
          <p style={{fontSize:12.5, lineHeight:1.8, color:'var(--ink-700)', margin:'0 0 14px', flex:1}}>{g.d}</p>
          <div style={{display:'flex', gap:'6px 14px', flexWrap:'wrap', paddingTop:12, borderTop:'1px dashed var(--paper-line)', marginBottom:12}}>
            <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--ink-500)'}}>{g.meta}</span>
            <span style={{fontFamily:'var(--font-mono)', fontSize:11.5, color:'var(--ink-500)'}}>{COURSE_PRICE}</span>
          </div>
          <span style={{
            display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
            background:'var(--paper-2)', border:'1px solid var(--paper-line)', color:'var(--ink-900)',
            borderRadius:6, padding:'11px 16px', fontSize:13.5, fontWeight:700, letterSpacing:'.02em'
          }}>専用ページを見る <Arrow/></span>
        </a>
      ))}
    </div>
    <p style={{fontSize:12, lineHeight:1.9, color:'var(--ink-500)', margin:'16px 0 0'}}>
      ※ 汎用コースで助成金の活用をご検討の場合は、貴社の状況を確認したうえでご案内します。まずはご相談ください。
    </p>
  </div>
);

const CoCourses = () => (
  <section id="courses" style={{padding:'56px 0 72px', background:'var(--paper-2)'}} data-screen-label="02 コース一覧">
    <div className="container" style={{maxWidth:1060, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>COURSES · 全{COURSES.length + GENERAL_COURSES.length}コース</Eyebrow>
        <h2>コース一覧</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'60ch'}}>
          業種・職種別が{COURSES.length}コース、業種を問わない汎用が{GENERAL_COURSES.length}コース。カードを押すと、そのコースの専用ページでカリキュラム（科目ごとの時間数）をご覧いただけます。
        </p>
      </div>
      <CourseSection type="basic" />
      <CourseSection type="agent" />
      <GeneralSection />
    </div>
  </section>
);

/* ---- 03 助成金（実利だけを書く。要件適合の自己申告はしない） ---- */
const CoSubsidy = () => (
  <section id="subsidy" style={{padding:'72px 0', background:'var(--paper)', scrollMarginTop:80}} 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回／12.0時間', '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>
    </div>
  </section>
);

/* 折りたたみ（service-ai.jsx の Accordion とは別名にして二重宣言を避ける） */
const CoAccordion = ({ title, children }) => (
  <details style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:10, padding:0, marginBottom:10, overflow:'hidden'}}>
    <summary style={{cursor:'pointer', listStyle:'none', display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'15px 20px', fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)'}}>
      <span>{title}</span>
      <span style={{color:'var(--accent)', flexShrink:0}}><Arrow dir="d"/></span>
    </summary>
    <div style={{padding:'4px 20px 20px'}}>{children}</div>
  </details>
);

/* ---- 05 FAQ ---- */
const CO_FAQS = [
  { q: '業種別コースと、これまでのリスキリング研修はどう違いますか？', a: '扱う題材が違います。リスキリング研修は業種を問わない汎用的な題材でAIの使い方を学ぶ構成です。業種別コースは、全科目が受講者の担当業務そのもの（保育園なら月案と連絡帳、営業なら提案書と見積書、ECなら商品ページと商品データ）で構成されています。研修中に作ったものを、そのまま実務で使えます。' },
  { q: '基礎コースとAIエージェントコースは、どちらを選べばよいですか？', 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）または貸切の通学制で実施します。' }
];

const CoFAQ = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="05 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}}>
        {CO_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>
);

/* ---- 06 CTA ---- */
const CoCoursesCTA = () => (
  <section style={{padding:'72px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="06 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'}}>どの業務をAIに任せたいか</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.html" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>AI活用支援の全体を見る</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { CoPicker, CoCourses, CoSubsidy, CoFAQ, CoCoursesCTA });
