/* service-ai.html — AI活用支援（オマカセAIマナブくん：AI研修＋AI顧問） */

const AiWhy = () => (
  <section style={{padding:'80px 0 56px', background:'var(--paper)'}} data-screen-label="01 Why">
    <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:64, alignItems:'start'}}>
      <div>
        <Eyebrow>WHY · 学ぶ も 任せる も</Eyebrow>
        <h2 style={{marginTop:16}}>AIを活用したい。<br/>その入口を、2つ用意しました。</h2>
        <img src="assets/co-ai.jpg" alt="" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', marginTop:28, display:'block'}}/>
      </div>
      <div className="prose">
        <p>
          「AIを業務に活かしたい」「人事労務まわりをDX化したい」——
          ゴールは同じでも、効くアプローチは会社のステージで変わります。社員にスキルとして<strong>学ばせる</strong>のか、経営者の隣で実装まで<strong>任せる</strong>のか。
        </p>
        <p>
          私たちのAI事業は、<strong>「学ぶ＝各種AI研修」と「任せる＝AI顧問」の2形態</strong>です。
          社員には研修で基礎を渡し、経営層には顧問で実装を伴走する——両輪で回すと、全社でAIを使う体制が最短で立ち上がります。
        </p>
        <p style={{fontFamily:'var(--font-mono)', fontSize:13, color:'var(--navy-700)', letterSpacing:'.04em'}}>
          研修満足度 9.0／10／講師は、自社の社労士法人でAIを業務の中枢に組み込んで日常運用する実装者。
        </p>
      </div>
    </div>
  </section>
);

const AI_PROGRAMS = [
  {
    tag: '研修',
    name: 'リスキリング研修（AI導入・活用支援）',
    d: 'ChatGPT・Claude・Gemini・Gamma・Google Workspace 等を、自社の業務にどう落とすかまで。情報セキュリティ・動画制作・広告出稿まで幅広く。',
    price: '385,000円／名',
    sub: '税込・人材開発支援助成金の活用で実質およそ8万円強／名',
    href: '/reskilling/'
  },
  {
    tag: '研修',
    name: '若手社員向けAI活用研修「思考拡張の6日間」',
    d: 'AIとビジネス基礎力を同時に習得する6日間の実践研修。若手・新入社員の行動力と発想力を引き出し、組織の生産性とDX推進を後押しします。',
    price: '385,000円／名',
    sub: '税込・助成金の活用で実質84,250円／名',
    href: 'service-wakate.html'
  },
  {
    tag: '研修',
    name: 'AIエージェント入門講座（Claude Code 徹底活用）',
    d: '全6回×2時間。大量ファイル分析・書類自動生成・GAS／API／MCP連携・HP制作と公開まで、「AIに業務そのものを任せる」力を身につけます。',
    price: '385,000円／名',
    sub: '税込・全6回×12時間／リスキリング研修の次のステップ',
    href: '/ai-agent/'
  },
  {
    tag: '顧問',
    name: 'AI顧問・AI伴走パートナー',
    d: '月次伴走で、社内AI推進の“右腕”として常駐。ツール選定・運用ルール・社内勉強会・つまずきの解消まで、現場で動き続ける状態を保ちます。',
    price: '月額 10万円〜',
    sub: '税別・月1回の定例＋随時チャット相談のシンプルな1プラン',
    href: '/ai-advisor/'
  }
];

const ProgCard = ({ p, dark }) => (
  <a href={p.href} style={{
    display:'flex', flexDirection:'column', height:'100%',
    background: dark ? 'var(--navy-800)' : '#fff',
    border: dark ? 'none' : '1px solid var(--paper-line)',
    borderTop: dark ? 'none' : '3px solid var(--accent)',
    borderRadius:'var(--radius)', padding:'26px 26px 24px',
    textDecoration:'none', color: dark ? '#fff' : 'inherit',
    boxShadow: dark ? '0 18px 40px -18px rgba(20,32,60,.45)' : 'none',
    transition:'transform .2s, box-shadow .2s'
  }}
  onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.boxShadow= dark ? '0 22px 48px -18px rgba(20,32,60,.55)' : '0 12px 28px -12px rgba(20,32,60,.15)';}}
  onMouseLeave={e=>{e.currentTarget.style.transform='';e.currentTarget.style.boxShadow= dark ? '0 18px 40px -18px rgba(20,32,60,.45)' : 'none';}}
  >
    <span style={{alignSelf:'flex-start', display:'inline-block', fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.12em', color:'#fff', background:'var(--accent)', borderRadius:4, padding:'3px 10px', fontWeight:700, marginBottom:12}}>{p.tag}</span>
    <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:17, color: dark?'#fff':'var(--ink-900)', margin:'0 0 10px', lineHeight:1.5, letterSpacing:'.03em'}}>{p.name}</h4>
    <p style={{fontSize:13.5, lineHeight:1.9, color: dark?'rgba(255,255,255,.9)':'var(--ink-700)', margin:'0 0 14px'}}>{p.d}</p>
    <div style={{marginTop:'auto'}}>
      <div style={{fontFamily:'var(--font-serif)', fontWeight:900, fontSize:23, color: dark?'#fff':'var(--accent)', lineHeight:1.15, marginBottom:5}}>{p.price}</div>
      <div style={{fontSize:12, color: dark?'rgba(255,255,255,.7)':'var(--ink-500)', lineHeight:1.7, marginBottom:14}}>{p.sub}</div>
      <div style={{borderTop: dark?'1px dashed rgba(255,255,255,.25)':'1px dashed var(--paper-line)', paddingTop:14}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:7, background:'var(--accent)', color:'#fff', borderRadius:999, padding:'10px 18px', fontFamily:'var(--font-mono)', fontSize:12.5, fontWeight:700, letterSpacing:'.04em', boxShadow:'0 4px 12px -4px rgba(232,122,51,.5)'}}>
          専用ページで詳しく見る <Arrow/>
        </span>
      </div>
    </div>
  </a>
);

const ProgGroupLabel = ({ en, jp, note }) => (
  <div style={{display:'flex', alignItems:'baseline', gap:14, flexWrap:'wrap', margin:'0 0 18px'}}>
    <span style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.16em', color:'var(--accent)', fontWeight:700}}>{en}</span>
    <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:20, color:'var(--ink-900)', margin:0, letterSpacing:'.03em'}}>{jp}</h3>
    <span style={{fontSize:13, color:'var(--ink-500)'}}>{note}</span>
  </div>
);

const AiPrograms = () => {
  const trainings = AI_PROGRAMS.filter(p => p.tag === '研修');
  const advisor = AI_PROGRAMS.find(p => p.tag === '顧問');
  return (
    <section style={{padding:'64px 0', background:'var(--paper-2)'}} data-screen-label="02 Programs & Price">
      <div className="container">
        <div className="section-head" style={{marginBottom:36}}>
          <Eyebrow>PROGRAMS & PRICE · ラインナップと料金</Eyebrow>
          <h2>「学ぶ」と「任せる」、2つの入口。<br/>料金も、ここに。</h2>
          <p className="lead" style={{marginTop:12, maxWidth:'62ch'}}>
            社員に学ばせる<strong>研修</strong>は名・コース単位、経営者の隣で伴走する<strong>AI顧問</strong>は月額制。各カードをクリックすると、専用ページで詳しく見られます。
          </p>
        </div>

        <ProgGroupLabel en="LEARN · 学ぶ" jp="AI研修（3コース）" note="社員のスキルを底上げ／助成金の活用可" />
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(250px, 1fr))', gap:20, marginBottom:44}}>
          {trainings.map((p, i) => <ProgCard key={i} p={p} dark={false} />)}
        </div>

        <ProgGroupLabel en="DELEGATE · 任せる" jp="AI顧問" note="経営者の隣で、実装まで月次伴走" />
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 520px))', gap:20}}>
          <ProgCard p={advisor} dark={true} />
        </div>

        <div className="callout callout--info" style={{marginTop:28}}>
          <h4>助成金で原資を確保する（研修）</h4>
          <p>
            「研修にお金をかけたいが原資がない」を、助成金で解けるケースは少なくありません。
            要件の確認から申請の設計まで、隣の社労士法人（累計6億円超の申請実績）と連携して進めます。
          </p>
        </div>
      </div>
    </section>
  );
};

const AiSteps = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="04 Steps">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>FLOW · 進め方</Eyebrow>
        <h2>研修で火をつけ、顧問で消さない。</h2>
      </div>
      <div className="steps">
        <div className="step"><div className="step__n">1</div><div className="step__t">無料相談（30分）</div><div className="step__b">現状のAI活用度と、目指す状態を伺います。助成金が使えるかもこの場で。</div></div>
        <div className="step"><div className="step__n">2</div><div className="step__t">研修の設計・助成金申請</div><div className="step__b">対象者とゴールに合わせてプログラムを設計。並行して助成金の申請を設計します。</div></div>
        <div className="step"><div className="step__n">3</div><div className="step__t">研修の実施</div><div className="step__b">手を動かすワーク中心。「自分の業務にどう使うか」を持ち帰れる状態にします。</div></div>
        <div className="step"><div className="step__n">4</div><div className="step__t">AI顧問で定着（任意）</div><div className="step__b">月次伴走で推進役を支援。研修を“やって終わり”にせず、現場で回し続けます。</div></div>
      </div>
    </div>
  </section>
);

const AiCross = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="05 Related">
    <div className="container">
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>RELATED · あわせて見られています</Eyebrow>
        <h2>AIの効果を、組織に根づかせるなら。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16}}>
        <a className="smap__card" href="service-leadership.html"><div className="role">LEADERSHIP</div><div className="nm">リーダー育成</div><div className="one">AIを使いこなす前に、まず「自分で動かせる」チームに。育成と両輪で。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>詳しく見る <Arrow/></div></a>
        <a className="smap__card" href="service-hyoka.html"><div className="role">ALIGNMENT</div><div className="nm">評価のしくみづくり</div><div className="one">AIで上がった生産性を、評価と報酬に正しく反映する仕組みを。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>詳しく見る <Arrow/></div></a>
        <a className="smap__card" href="../index.html"><div className="role">社労士法人</div><div className="nm">助成金で原資を確保</div><div className="one">研修費はリスキリング助成金で。申請は社労士法人が設計・代行します。</div><div style={{marginTop:14, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--accent)', fontWeight:600}}>サイトを見る <Arrow/></div></a>
      </div>
    </div>
  </section>
);

const AiCTA = () => (
  <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(26px,3.2vw,36px)', lineHeight:1.5, 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'}}>無料相談</em>で現状を。
      </h2>
      <p style={{fontSize:16, 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="/reskilling/" target="_blank" rel="noopener" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>研修LPを見る</a>
      </div>
    </div>
  </section>
);

const AI_CASES = [
  { t:'就業規則を、3日 → 1時間に', d:'ヒアリングシートから30+規程を一気に生成。罫線・改ページまで体裁完備。' },
  { t:'雇用契約書41通を、一括再生成', d:'雛形＋社員データから自動生成。手作業3日 → 数分に。' },
  { t:'給与計算をGASで内製', d:'勤怠 → 残業集計 → 有給管理 → 取込TSVまで自動化。外注なら数百万円規模を内製化。' },
  { t:'顧問先50社の規程を1日で横断分析', d:'各社の規程を丸ごと読ませ、必要な条文だけ抽出。法改正対応の棚卸しが1日で完了。' }
];
const AiCases = () => (
  <section style={{padding:'72px 0', background:'var(--navy-800)', color:'#fff'}} data-screen-label="自社実績">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <span className="eyebrow" style={{color:'var(--accent)'}}>REAL CASES · 全て自社で稼働中</span>
        <h2 style={{color:'#fff'}}>「教える側」が、毎日AIを動かしている。</h2>
        <p className="lead" style={{marginTop:12, maxWidth:'64ch', color:'rgba(255,255,255,.82)'}}>
          研修も顧問も、机上の理論ではありません。以下はすべて、自社の社労士法人で実際に動かしている実装事例。やって見せられる人間が、伴走します。
        </p>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16}}>
        {AI_CASES.map((c,i)=>(
          <div key={i} style={{background:'rgba(255,255,255,.05)', border:'1px solid rgba(255,255,255,.12)', borderRadius:'var(--radius)', padding:'22px 20px'}}>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15.5, color:'#fff', margin:'0 0 10px', lineHeight:1.55}}>{c.t}</h4>
            <p style={{fontSize:12.5, lineHeight:1.85, color:'rgba(255,255,255,.78)', margin:0}}>{c.d}</p>
          </div>
        ))}
      </div>
      <div style={{marginTop:24}}>
        <a className="btn btn--ghost" href="/ai-advisor/" style={{color:'#fff', borderColor:'rgba(255,255,255,.4)'}}>実装事例をもっと見る（AI顧問ページ） <Arrow/></a>
      </div>
    </div>
  </section>
);

const AI_FAQS = [
  { q:'AI研修とAI顧問、どちらを選べばよいですか？', a:'社員5名以上に学ばせたい場合は研修、経営者・幹部が自社業務にAIを組み込みたい場合は顧問が適しています。多くの場合、研修＋顧問の組み合わせが最も効果的です。迷う場合は無料相談で30分お話しいただければ、適切なプランをご提案します。' },
  { q:'研修は何人から受講できますか？', a:'社員3名〜から受講可能です。社内研修としての貸切実施もご相談いただけます。各コース共通です。' },
  { q:'プログラミング経験がなくても大丈夫ですか？', a:'AI顧問・活用導入研修は、プログラミング知識不要です。AIエージェント入門講座（上級）は、ChatGPT・Claudeを日常的に使っている方向けですが、コードを書ける必要はありません。' },
  { q:'助成金は使えますか？', a:'人材開発支援助成金は「研修」への助成です（通常385,000円 → 実質84,250円／名の例）。AI顧問（コンサルティング）は対象外です。' }
];
const AiFAQ = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} data-screen-label="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:12}}>
        {AI_FAQS.map((f,i)=>(
          <details key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'18px 22px'}}>
            <summary style={{fontWeight:700, fontSize:15, 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.95, color:'var(--ink-700)', margin:'14px 0 0', paddingLeft:28}}>{f.a}</p>
          </details>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { AiWhy, AiPrograms, AiSteps, AiCases, AiFAQ, AiCross, AiCTA });
