/* service-wakate.html — 若手社員向けAI活用研修プログラム「思考拡張の6日間」 */

const WkIntro = () => (
  <section style={{padding:'76px 0 48px', background:'var(--paper)'}} data-screen-label="01 Intro">
    <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(300px, 1fr))', gap:56, alignItems:'center'}}>
      <div>
        <Eyebrow>PROGRAM · 思考拡張の6日間</Eyebrow>
        <h2 style={{marginTop:16, lineHeight:1.45}}>「行動力」と「発想力」で<br/>未来を創る若手を育てる。</h2>
        <p className="lead" style={{marginTop:16, maxWidth:'52ch'}}>
          AIツールの使い方だけでなく、ゴール設定・伝達力・関係構築といった<strong>ビジネス基礎力をAI活用と統合して習得</strong>する、若手・新卒社員向けの6日間（2時間×6回／全12時間）の実践研修です。
        </p>
        <div style={{display:'flex', gap:10, flexWrap:'wrap', marginTop:22}}>
          {['AI活用×ビジネス基礎力','新入社員30〜40名向け','オンライン／ハイブリッド可'].map((t,i)=>(
            <span key={i} style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.04em', color:'var(--navy-700)', background:'var(--navy-050)', border:'1px solid var(--paper-line)', borderRadius:20, padding:'6px 14px'}}>{t}</span>
          ))}
        </div>
      </div>
      <div>
        <img src="assets/co-ai.jpg" alt="若手社員向けAI活用研修の様子" style={{width:'100%', aspectRatio:'4/3', objectFit:'cover', borderRadius:'var(--radius)', display:'block'}}/>
      </div>
    </div>
  </section>
);

const WkSubsidy = () => (
  <section style={{padding:'56px 0', background:'var(--paper-2)'}} data-screen-label="02 Subsidy">
    <div className="container">
      <div className="section-head" style={{textAlign:'center', marginBottom:28}}>
        <Eyebrow>COST · 助成金活用で約1/4の負担</Eyebrow>
        <h2>通常 385,000円（税込）が、<br/>実質 <span style={{color:'var(--accent)'}}>84,250円／人</span>に。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:16, maxWidth:820, margin:'0 auto'}}>
        {[
          {l:'経費助成', v:'288,750円'},
          {l:'賃金助成', v:'12,000円', n:'1,000円×12時間'},
          {l:'実質負担額', v:'84,250円／人', accent:true}
        ].map((b,i)=>(
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderTop:`3px solid ${b.accent?'var(--accent)':'var(--navy-700)'}`, borderRadius:'var(--radius)', padding:'22px 20px', textAlign:'center'}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.12em', color:'var(--ink-500)', marginBottom:8}}>{b.l}</div>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:800, fontSize:22, color:b.accent?'var(--accent)':'var(--navy-700)', lineHeight:1.3}}>{b.v}</div>
            {b.n && <div style={{fontSize:11, color:'var(--ink-500)', marginTop:6}}>{b.n}</div>}
          </div>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(150px, 1fr))', gap:14, maxWidth:820, margin:'28px auto 0'}}>
        {[
          {n:'12時間', l:'2時間×6回'},
          {n:'30〜40名', l:'新入社員（推奨）'},
          {n:'130%', l:'生産性向上 ※1'},
          {n:'98%', l:'研修満足度 ※2'}
        ].map((b,i)=>(
          <div key={i} style={{textAlign:'center', padding:'10px 6px'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:800, fontSize:26, color:'var(--navy-700)', lineHeight:1}}>{b.n}</div>
            <div style={{fontSize:12, color:'var(--ink-700)', marginTop:6}}>{b.l}</div>
          </div>
        ))}
      </div>
      <p style={{fontSize:11.5, color:'var(--ink-500)', textAlign:'center', marginTop:18, lineHeight:1.7}}>
        ※1 研修前後比較での実績／※2 研修者100名アンケート回答。<br/>
        表示の金額は助成金を活用いただいた場合の一例であり、申請は任意、受給には条件がございます。
      </p>
    </div>
  </section>
);

const WkInstructor = () => (
  <section style={{padding:'64px 0', background:'var(--paper)'}} data-screen-label="03 Instructor">
    <div className="container" style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:48, alignItems:'center', maxWidth:960, margin:'0 auto'}}>
      <div>
        <img src="assets/kurata.jpg" alt="講師 倉田諒" style={{width:'100%', aspectRatio:'1/1', objectFit:'cover', borderRadius:'var(--radius)', display:'block'}}/>
      </div>
      <div>
        <Eyebrow>INSTRUCTOR · 講師紹介</Eyebrow>
        <h2 style={{marginTop:14}}>AI活用と人材育成の<br/>専門家が指導します。</h2>
        <p style={{fontSize:14.5, lineHeight:2, color:'var(--ink-700)', marginTop:16}}>
          AI活用とビジネススキル研修の専門家。新入社員の能力開発と組織活性化をサポートし、多数の企業で若手人材育成を手がけてきました。「行動力」と「発想力」を兼ね備えた自発的人材の育成に定評があり、AI技術とビジネス基礎力を統合した独自の研修手法で、受講者の実践的なスキル向上を実現します。
        </p>
        <div style={{marginTop:18, fontFamily:'var(--font-mono)', fontSize:13, color:'var(--navy-700)', letterSpacing:'.04em'}}>
          主催：株式会社労務ニュース ／ 講師：代表取締役　倉田 諒
        </div>
      </div>
    </div>
  </section>
);

const CURRICULUM = [
  { n:'第1回', t:'AIとゴール設定', sub:'思考の拡張と「意思」', tool:'ChatGPT（メール作成、文書作成、業務効率化）', skill:'AIの革新性理解、思考の拡張、ゴール設定', do:'現状の課題に対する業務上のゴールを設定し、AI活用プランを作成する' },
  { n:'第2回', t:'AIへの指示と伝達力', sub:'「人を動かす」技術', tool:'ChatGPT（プロンプトの5要素、効果的な指示）', skill:'プロンプト作成、コミュニケーション技術、伝達力', do:'AI（新人）と上司（人間）の両方に伝わる指示・依頼を作成する' },
  { n:'第3回', t:'AIと関係構築', sub:'「信頼」を得る技術', tool:'Canva, Gamma（自己紹介資料、プレゼン資料作成）', skill:'デザインツール活用、自己開示、関係構築技術', do:'自分を知ってもらい安心してもらう自己紹介資料を作成する' },
  { n:'第4回', t:'AIと価値提供', sub:'「報酬」を得る技術', tool:'NotebookLM（情報収集、要約、分析）', skill:'情報収集・整理、価値提供の考え方、ギブのマインド', do:'実務に関する情報を収集し、相手の役に立つ価値として提供する' },
  { n:'第5回', t:'AIと自己管理', sub:'「成長」する技術', tool:'Googleサービス（Todo、カレンダー、Keep、Notion）', skill:'タスク・時間管理、優先順位設定、自己成長技術', do:'業務を棚卸しし、成長につながるタスクを具体的にスケジュール化する' },
  { n:'第6回', t:'AIとイノベーション', sub:'「行動」と「発想」の総括', tool:'最新AIサービス（HP作成、自動化、アプリ作成）', skill:'イノベーション思考、問題解決力、行動力・発想力', do:'現場の課題を解決するイノベーションプランを作成し、行動宣言をする' }
];

const WkCurriculum = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} id="curriculum" data-screen-label="04 Curriculum">
    <div className="container">
      <div className="section-head" style={{marginBottom:32}}>
        <Eyebrow>CURRICULUM · カリキュラム</Eyebrow>
        <h2>全6回・各回2時間。<br/>ビジネスの「型」をAIで身につける。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:18}}>
        {CURRICULUM.map((c,i)=>(
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'24px 24px', borderTop:'3px solid var(--accent)'}}>
            <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:10}}>
              <span style={{fontFamily:'var(--font-mono)', fontSize:12, fontWeight:700, color:'var(--accent)', letterSpacing:'.08em'}}>{c.n}</span>
              <h3 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:18, color:'var(--ink-900)', margin:0, letterSpacing:'.02em'}}>{c.t}</h3>
            </div>
            <div style={{fontSize:13, color:'var(--accent)', fontWeight:600, marginBottom:14}}>{c.sub}</div>
            <dl style={{margin:0, fontSize:13, lineHeight:1.8}}>
              <dt style={{fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.1em', color:'var(--navy-700)', fontWeight:700, marginTop:6}}>学ぶツール</dt>
              <dd style={{margin:'2px 0 8px', color:'var(--ink-700)'}}>{c.tool}</dd>
              <dt style={{fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.1em', color:'var(--navy-700)', fontWeight:700}}>身につくスキル</dt>
              <dd style={{margin:'2px 0 8px', color:'var(--ink-700)'}}>{c.skill}</dd>
              <dt style={{fontFamily:'var(--font-mono)', fontSize:10.5, letterSpacing:'.1em', color:'var(--navy-700)', fontWeight:700}}>実践内容</dt>
              <dd style={{margin:'2px 0 0', color:'var(--ink-700)'}}>{c.do}</dd>
            </dl>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const WkFeatures = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="05 Features">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>FEATURES · 研修の特徴</Eyebrow>
        <h2>「使い方」で終わらせない。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:20, marginBottom:40}}>
        {[
          {t:'AIとビジネススキルの統合学習', d:'ツールの使い方だけでなく、ゴール設定・伝達力・関係構築などのビジネス基礎力をAI活用と組み合わせて習得します。'},
          {t:'「行動力」と「発想力」の育成', d:'AIを活用しながら、自発的に行動を起こす力と創造的な問題解決力を身につけ、自己肯定感を育てます。'},
          {t:'最新のAIツールを網羅', d:'ChatGPT・Canva・NotebookLM・Googleサービスなど、最新のAIツールを厳選し、実務で即活用できるレベルまで。'}
        ].map((f,i)=>(
          <div key={i} style={{background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'24px 22px'}}>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', margin:'0 0 10px', lineHeight:1.5}}>{f.t}</h4>
            <p style={{fontSize:13, lineHeight:1.9, color:'var(--ink-700)', margin:0}}>{f.d}</p>
          </div>
        ))}
      </div>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>MERIT · 研修のメリット</Eyebrow>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(280px, 1fr))', gap:16}}>
        {[
          {t:'業務効率化による生産性向上', d:'メール・文書作成・情報収集などの日常業務が劇的に効率化し、価値の高い業務に時間を使えるようになります。'},
          {t:'自発的人材の育成', d:'ゴール設定から実行まで、自ら考え行動する力を身につけ、組織全体の活性化と成長促進を実現します。'},
          {t:'コミュニケーション力の向上', d:'関係構築技術と価値提供の考え方を習得し、社内外でより良い関係を築ける人材へ。'},
          {t:'組織のデジタル化推進', d:'紙文化からの脱却、データ管理の効率化など、組織全体のDX推進の土台となる人材を育成します。'}
        ].map((m,i)=>(
          <div key={i} style={{display:'flex', gap:14, background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'20px 22px'}}>
            <span style={{color:'var(--accent)', fontWeight:800, fontSize:18, flex:'0 0 auto'}}>✓</span>
            <div>
              <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15, color:'var(--ink-900)', margin:'0 0 6px'}}>{m.t}</h4>
              <p style={{fontSize:13, lineHeight:1.85, color:'var(--ink-700)', margin:0}}>{m.d}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="callout callout--info" style={{marginTop:32}}>
        <h4>対象者・準備するもの</h4>
        <p>
          <strong>対象：</strong>若手社員・新卒社員（特別な技術知識は不要。パソコンの基本操作ができれば参加可能）。<br/>
          <strong>準備：</strong>PC（各種AIサービスのアカウント登録あり）／インターネット接続環境。
        </p>
      </div>
    </div>
  </section>
);

const WkResults = () => (
  <section style={{padding:'72px 0', background:'var(--paper-2)'}} id="results" data-screen-label="06 Results">
    <div className="container">
      <div className="section-head" style={{marginBottom:28}}>
        <Eyebrow>RESULTS · 研修導入効果（実績データ）</Eyebrow>
        <h2>数字で見る、変化。</h2>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))', gap:20}}>
        {[
          {n:'75%', u:'時間短縮', t:'業務効率化', d:'メール・資料作成・情報収集などの日常業務が大幅に効率化。価値の高い業務に集中できます。'},
          {n:'130%', u:'向上', t:'行動力・発想力', d:'ゴール設定から実行まで自発的に行動する力が向上し、創造的な問題解決提案が増加。'},
          {n:'98%', u:'満足度', t:'組織活性化', d:'新入社員の主体的な取り組みが組織全体に波及し、職場の活性化と生産性向上を実現。'}
        ].map((r,i)=>(
          <div key={i} style={{background:'#fff', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'28px 24px', borderTop:'3px solid var(--accent)'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:800, fontSize:40, color:'var(--accent)', lineHeight:1}}>{r.n}<span style={{fontSize:15, color:'var(--ink-700)', marginLeft:6}}>{r.u}</span></div>
            <h4 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:16, color:'var(--ink-900)', margin:'14px 0 8px'}}>{r.t}</h4>
            <p style={{fontSize:13, lineHeight:1.85, color:'var(--ink-700)', margin:0}}>{r.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const WK_FAQ = [
  { q:'どんな人が対象ですか？', a:'若手社員・新卒社員が対象です。特別な技術知識は不要で、パソコンの基本操作ができれば参加可能です。' },
  { q:'準備するものはありますか？', a:'PCとインターネット接続環境をご用意ください。各種AIサービスのアカウント登録が必要になります。' },
  { q:'研修形式はどのようなものですか？', a:'5〜6名のグループワーク、受講者によるサンプル資料の作成など、参加型の実践形式で、全6回×各回2時間（合計12時間）で実施します。' },
  { q:'オンラインでの参加は可能ですか？', a:'はい、すべての研修はオンラインで実施可能です。対面とのハイブリッド形式でも対応できます。' }
];

const WkFAQ = () => (
  <section style={{padding:'72px 0', background:'var(--paper)'}} data-screen-label="07 FAQ">
    <div className="container" style={{maxWidth:820, margin:'0 auto'}}>
      <div className="section-head" style={{marginBottom:24}}>
        <Eyebrow>FAQ · よくある質問</Eyebrow>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'minmax(0, 1fr)', gap:12}}>
        {WK_FAQ.map((f,i)=>(
          <div key={i} style={{background:'var(--paper-2)', border:'1px solid var(--paper-line)', borderRadius:'var(--radius)', padding:'20px 24px'}}>
            <div style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:15.5, color:'var(--navy-700)', marginBottom:8}}>Q. {f.q}</div>
            <div style={{fontSize:14, lineHeight:1.9, color:'var(--ink-700)'}}>{f.a}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const WkCTA = () => (
  <section style={{padding:'76px 0', background:'linear-gradient(180deg, var(--navy-800), var(--navy-900))', color:'#fff'}} data-screen-label="08 CTA">
    <div className="container" style={{textAlign:'center', maxWidth:760, margin:'0 auto'}}>
      <div style={{fontFamily:'var(--font-mono)', fontSize:12, letterSpacing:'.24em', color:'rgba(255,255,255,.7)', marginBottom:16}}>PRICE & CONTACT</div>
      <h2 style={{fontFamily:'var(--font-serif)', fontWeight:700, fontSize:'clamp(26px,3.4vw,38px)', lineHeight:1.45, color:'#fff', marginBottom:14, letterSpacing:'.03em'}}>
        料金：一人 <em style={{fontStyle:'normal', color:'#fff'}}>385,000円</em>（税込）
      </h2>
      <p style={{fontSize:17, lineHeight:1.8, color:'rgba(255,255,255,.92)', marginBottom:10}}>
        助成金活用で <span style={{color:'var(--accent)', fontWeight:800, fontSize:'1.15em'}}>84,250円／人</span> で受講可能！
      </p>
      <p style={{fontSize:13, lineHeight:1.8, color:'rgba(255,255,255,.7)', marginBottom:28}}>
        助成金内訳：経費助成 288,750円 ／ 賃金助成 12,000円（1,000円×12時間）。実質負担は約1/4に。<br/>
        ※申請は任意、受給には条件がございます。
      </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, { WkIntro, WkSubsidy, WkInstructor, WkCurriculum, WkFeatures, WkResults, WkFAQ, WkCTA });