const Problems = () => {
  const items = [
    '採用のノウハウが社内になく、何から手をつければいいか分からない',
    '人事の工数が足りず、スカウトや媒体運用に手が回らない',
    'スカウトを送っても返信が来ない、応募が集まらない',
    'エージェント対応に時間を取られ、コア業務が進まない',
    '採用広報まで手が回らず、自社の魅力を候補者に伝えられていない',
    '過去に採用代行（RPO）を利用したが、思うような成果が出なかった',
  ];
  return (
    <section id="problems" className="problems">
      <div className="wrap-narrow">
        <Eyebrow>Why Now · 採用の現在地</Eyebrow>
        <h2 className="display" style={{ marginTop: 24 }}>
          こんな<em>採用のお悩み</em>、<br/>ありませんか？
        </h2>
        <div className="prob-grid">
          {items.map((t, i) => (
            <div key={i} className="prob-item">
              <div className="chk"><Ic.check/></div>
              <div>{t}</div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 12 }}>
          <div className="prob-tag">
            その課題、<b>AI RPOパートナー</b>が解決します。
          </div>
        </div>
      </div>
    </section>
  );
};

const About = () => (
  <section id="about">
    <div className="wrap-narrow">
      <Eyebrow>About · サービス概要</Eyebrow>
      <h2 className="display" style={{ marginTop: 24 }}>
        採用成果に責任を持つ、<em>専任のRPO</em>。
      </h2>
      <div className="about-body" style={{ marginTop: 40 }}>
        <p>
          AI RPOパートナーは、採用戦略の立案から日々の運用まで、<span className="hl">採用活動全体を伴走</span>するRPO（採用代行）サービスです。
        </p>
        <p>
          経験豊富な採用のプロフェッショナルが専任チームとしてアサインされ、ペルソナ設計、媒体運用、スカウト、エージェント対応、選考管理、採用広報まで一気通貫でご支援します。
        </p>
        <p>
          さらに、工数のかかる定型業務には<span className="hl">自社開発の生成AIツール</span>を活用することで、担当者が戦略判断や候補者とのコミュニケーションに集中できる体制を実現。結果として、質とスピードを両立した採用活動が可能になります。
        </p>
      </div>
    </div>
  </section>
);

const SCOPE = [
  { n: '01', t: '採用戦略の立案', d: '採用市場分析、求める人材像（ペルソナ）設計、年間採用計画策定、チャネル選定、KPI設定、効果検証まで。月次の定例レポートと改善ミーティングで継続的に伴走します。' },
  { n: '02', t: '媒体運用', d: '媒体選定、原稿作成、日々の運用、数値分析、応募数最大化に向けた改善施策までを担います。' },
  { n: '03', t: 'ダイレクトリクルーティング', d: '媒体選定、スカウト送信、数値分析、文面改善まで。候補者ごとにパーソナライズしたアプローチで返信率を高めます。' },
  { n: '04', t: 'エージェントコントロール', d: '人材紹介会社の選定、案件情報の展開、推薦フィードバック、説明会対応まで。決定率を引き上げます。' },
  { n: '05', t: '応募者対応・内定者フォロー', d: '書類スクリーニング、選考連絡、カジュアル面談・面接代行、候補者対応、ATS（採用管理システム）の導入・運用設計、内定者フォローまで。歩留まり・承諾率を改善します。' },
  { n: '06', t: '採用ブランディング・広報', d: '採用3C分析、求人票・インタビュー記事、採用ピッチ資料、採用動画、Notion採用サイト、SNS運用まで。' },
];

const Scope = () => (
  <section id="scope">
    <div className="wrap">
      <Eyebrow>Coverage · 支援スコープ</Eyebrow>
      <h2 className="display" style={{ marginTop: 24, maxWidth: 820 }}>
        戦略から運用まで、<br/><em>採用に必要なすべて</em>を。
      </h2>
      <div className="scope-grid">
        {SCOPE.map(s => (
          <div key={s.n} className="scope-cell">
            <div className="scope-num">{s.n}</div>
            <div className="scope-title">{s.t}</div>
            <div className="scope-desc">{s.d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const LOGO_BRANDS = [
  { name: 'freee', src: '/assets/logos/01.webp' },
  { name: 'セレス', src: '/assets/logos/02.png' },
  { name: 'GARDEN GROUP', src: '/assets/logos/03.png' },
  { name: 'MINISTOP', src: '/assets/logos/04.png' },
  { name: '松田', src: '/assets/logos/05.png' },
  { name: 'KANEKO CORD', src: '/assets/logos/06.png' },
  { name: '前田道路', src: '/assets/logos/07.png' },
  { name: 'Ling', src: '/assets/logos/08.png' },
  { name: '双日テックイノベーション株式会社様', src: '/assets/logos/09.png' },
  { name: 'Access Bridge', src: '/assets/logos/10.png' },
  { name: 'BUYSELL TECHNOLOGIES', src: '/assets/logos/11.png' },
];
const LogoBand = () => (
  <section className="logo-band">
    <div className="logo-carousel-wrap">
      <div className="logo-carousel-track">
        {[...LOGO_BRANDS, ...LOGO_BRANDS].map((b, i) => (
          <img key={i} src={b.src} alt={b.name} className="logo-carousel-item" loading="lazy"/>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Problems, About, Scope, LogoBand });