/* 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 CoLegalChange = () => (
  <section id="legal" style={{padding:'72px 0 56px', background:'var(--paper)', scrollMarginTop:80}} data-screen-label="03 改正">
    <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:26}}>
        <Eyebrow>2026年8月3日 助成金改正</Eyebrow>
        <h2>なぜ、業種別に分けたのか。</h2>
        <p className="lead" style={{marginTop:14, maxWidth:'62ch'}}>
          人材開発支援助成金（事業展開等リスキリング支援コース）が改正され、<strong>令和8年8月3日以降に職業訓練実施計画届を提出する訓練</strong>から、新しい取扱いが適用されます。DX・GX関連の訓練であっても、内容が概念理解やリテラシー習得にとどまるものは助成対象外になりました。
        </p>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16, marginBottom:22}}>
        <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid #b9414a', borderRadius:'var(--radius)', padding:'20px 22px'}}>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'#b9414a', margin:'0 0 12px'}}>対象外になったもの</h4>
          <ul style={{margin:0, paddingLeft:18, fontSize:13, lineHeight:1.9, color:'var(--ink-700)'}}>
            <li>AI・DXの概念、デジタル技術の概要</li>
            <li>データ活用の考え方</li>
            <li><strong>生成AIを利用するための汎用的なプロンプトの作り方</strong></li>
            <li>接遇・マナーなど、職業人として共通して必要なもの</li>
            <li>職務に間接的に必要な知識・技能</li>
          </ul>
        </div>
        <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:'3px solid var(--accent)', borderRadius:'var(--radius)', padding:'20px 22px'}}>
          <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--accent)', margin:'0 0 12px'}}>対象になるもの</h4>
          <ul style={{margin:0, paddingLeft:18, fontSize:13, lineHeight:1.9, color:'var(--ink-700)'}}>
            <li>受講者の具体的な業務に直結し、そのまま活用できる内容</li>
            <li>公式に示された例：<strong>営業担当者向けに、生成AIで商品提案書の構成案作成・文章生成・修正方法を学ぶ訓練</strong></li>
            <li>訓練内容に沿って受講者が選定されていること</li>
          </ul>
        </div>
      </div>

      <div className="callout callout--info">
        <h4>見落とされがちな点：除外後に10時間を割ると、訓練全体が不支給になります</h4>
        <p>
          カリキュラムの一部に概念的な内容が含まれる場合、その部分の時間は実訓練時間から除外されます。除外後の実訓練時間が10時間未満になると、<strong>訓練全体が不支給（経費助成も出ない）</strong>となります。「AIの基礎を学び、あとは各自で応用する」という構成の研修は、この点でとくに危うくなりました。
        </p>
      </div>

      <div className="prose" style={{marginTop:20}}>
        <p>
          そこで当社は、<strong>全科目を特定の職務の実務に直結させた業種・職種別コース</strong>を用意しました。概念説明の科目を置かず、各回で受講者が自分の職場の文書・データを実際に処理します。科目ごとの時間数を明示しているため、計画届にそのまま添付できます。
        </p>
      </div>
    </div>
  </section>
);

/* ---- 04 助成金要件との対応 ---- */
const REQ_ROWS = [
  ['実訓練時間が10時間以上であること', '12.0時間（1回2.0時間×全6回）。概念科目を置かないため、除外が生じても余裕があります'],
  ['訓練内容が職務に直接必要であること', '全科目が、受講者の担当業務の成果物作成・データ処理です'],
  ['訓練内容に沿った受講者の選定', 'コースごとに「対象となる方の職務」を明記。お申込み時に確認します'],
  ['eラーニングの回数制限（年度1回）', '該当しません。同時双方向型オンライン（Zoom）または貸切の通学制で実施します'],
  ['同一労働者の年度受講回数（3回まで）', '本コースは1コースで1回。既存コースとの併用時はご相談ください']
];

const CoRequirement = () => (
  <section style={{padding:'0 0 72px', background:'var(--paper)'}} data-screen-label="04 要件適合">
    <div className="container" style={{maxWidth:960, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:22}}>
        <Eyebrow>REQUIREMENTS · 要件適合の設計</Eyebrow>
        <h2>業種別コースは、全て同じ設計で<br/>要件に合わせています。</h2>
      </div>
      <div style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', overflow:'hidden'}}>
        {REQ_ROWS.map((r, i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'minmax(180px, 34%) 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.8, color:'var(--ink-700)'}}>{r[1]}</div>
          </div>
        ))}
      </div>
      <div style={{marginTop:16}}>
        <CoAccordion title="助成金の経過措置（8月2日以前にお申込みの方）">
          <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:'0 0 10px'}}>
            令和8年8月2日以前に契約の締結またはお申込みが行われている訓練は、改正前の取扱いが適用されます。この場合、計画届の提出時に<strong>契約書・申込書の写しなど、契約締結日・申込日が分かる書類</strong>が必要になります。該当する場合は書類を保管してください。
          </p>
          <p style={{fontSize:12.5, lineHeight:1.85, color:'var(--ink-500)', margin:0}}>
            令和8年8月3日以降に計画届を提出する訓練は、改正後の取扱いとなります。
          </p>
        </CoAccordion>
      </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: '行っていません。改正でeラーニングは同一労働者につき年度1回までに制限されたことと、各回で手を動かして成果物を作る設計のため、同時双方向のオンライン（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, CoLegalChange, CoRequirement, CoFAQ, CoCoursesCTA });
