/* Section 6 — Voice (株式会社労務ニュース版・AI研修受講者の声) */

const INDUSTRY_ICON = {
  '福祉': (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M24 38c-9-6-14-12-14-19a7 7 0 0114-3 7 7 0 0114 3c0 7-5 13-14 19z"/>
    </svg>
  ),
  '教育': (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <path d="M6 18l18-8 18 8-18 8z"/>
      <path d="M14 22v8c0 3 5 5 10 5s10-2 10-5v-8"/>
      <path d="M42 18v10"/>
    </svg>
  ),
  '保育': (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <circle cx="24" cy="18" r="7"/>
      <path d="M10 40c2-8 8-12 14-12s12 4 14 12"/>
    </svg>
  ),
  '税理士': (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="10" y="8" width="28" height="32" rx="2"/>
      <path d="M16 18h16M16 24h16M16 30h10"/>
    </svg>
  ),
  'IT・コンサル': (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
      <rect x="6" y="10" width="36" height="22" rx="2"/>
      <path d="M16 38h16M24 32v6"/>
    </svg>
  )
};

const VOICES = [
  {
    industry: '福祉',
    headline: '迷ったときに、「AIに聞いてみよう」と自然に思えるようになった。',
    body: '最初は少し身構えていたAIが、すっかり身近な存在になりました。回を重ねるごとに仕事への向き合い方が更新されていく感覚があり、今では迷ったときに「AIに相談してみよう」と自然に思えるようになっています。',
    who: '受講者 A様', co: '福祉事業'
  },
  {
    industry: '教育',
    headline: '仕事の進め方が、根本から変わった。',
    body: '中途入社した直後の受講でしたが、手を動かしながら学ぶワーク中心の進行で、世の中の仕事の進め方がどれだけ変わってきているかを肌で実感できました。',
    who: '受講者 B様', co: '教育事業'
  },
  {
    industry: '福祉',
    headline: 'スライドを作る時間が、半分以下に。',
    body: 'GeminiやGammaの使いどころが分かり、業務の段取りが変わりました。これまで一から作っていたスライドが、AIと組み合わせることで体感半分以下の時間で仕上がります。',
    who: '受講者 C様', co: '福祉事業'
  },
  {
    industry: '保育',
    headline: '「AIなら、いけそう」と思えた。',
    body: 'パソコン操作が得意ではない自分でも、「AIならいける」と思える状態まで引き上げてもらえました。声で話しかけるだけでも形になると知れたのが、何より大きな収穫でした。',
    who: '受講者 D様', co: '保育事業'
  },
  {
    industry: '税理士',
    headline: '2時間が、あっという間。',
    body: 'AI活用への入口がはっきり見え、受講後はスタッフが日常業務で自然にAIを使うようになりました。テンポよく聞き取りやすい進行で、全員を置き去りにしない空気感も印象的でした。',
    who: '受講者 E様', co: '税理士事務所'
  },
  {
    industry: 'IT・コンサル',
    headline: '日々の仕事が、ぐっと軽くなった。',
    body: 'ChatGPTを使い始めてから、日々の仕事がぐっと軽くなりました。研修中から「自分の業務にどう落とすか」のイメージが湧き、講義とワークのバランスも絶妙でした。',
    who: '受講者 F様', co: 'IT・コンサル'
  }
];

const Voice = () => {
  const ref = React.useRef(null);
  const scroll = (dir) => {
    const el = ref.current; if (!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: 'smooth' });
  };
  return (
    <section className="voice" id="voice" data-screen-label="06 Voice">
      <div className="container">
        <div className="section-head" style={{display:'flex',flexDirection:'row',alignItems:'flex-end',justifyContent:'space-between',flexWrap:'wrap',gap:20}}>
          <div>
            <Eyebrow>CUSTOMER VOICE · 研修受講者の声</Eyebrow>
            <h2 style={{marginTop:14}}>受講後アンケートから、<br/>業種別に9件、抜粋しました。</h2>
            <p style={{fontSize:13,color:'var(--ink-500)',marginTop:10,maxWidth:'52ch',lineHeight:1.8}}>
              受講後アンケート（自由記述）からの抜粋。実際の社名・氏名は非掲載です。<br/>
              満足度 9.0／10（n=59）。9割以上が「日常的にAIを使うようになった」と回答。
            </p>
          </div>
          <a className="btn btn--ghost btn--sm" href="https://roumunews.jp/reskilling/" target="_blank" rel="noopener">研修LPで全件を見る <Arrow/></a>
        </div>
        <div className="voice__carousel" ref={ref}>
          {VOICES.map((v,i) => (
            <article className="voice__card" key={i}>
              <div className="voice__meta">
                <span>{v.industry}</span>
              </div>
              <div className="voice__quote">「{v.headline}」</div>
              <p className="voice__body">{v.body}</p>
              <div className="voice__person">
                <div className="voice__avatar voice__avatar--icon">
                  {INDUSTRY_ICON[v.industry] || INDUSTRY_ICON['福祉']}
                </div>
                <div>
                  <div className="who">{v.who}</div>
                  <div className="co">{v.co}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
        <div className="voice__controls">
          <button aria-label="前へ" onClick={() => scroll(-1)}><Arrow dir="l"/></button>
          <button aria-label="次へ" onClick={() => scroll(1)}><Arrow/></button>
        </div>
      </div>
    </section>
  );
};

window.Voice = Voice;
