const AiScout = () => (
  <section className="ai-scout">
    <div className="wrap">
      <div className="scout-grid">
        <div>
          <div className="scout-badge"><Ic.sparkles/> AI Native Operation</div>
          <h2 className="display">
            AIエージェントを<br/><em>フル活用</em>した、<br/>次世代の採用支援。
          </h2>
          <p style={{ color: 'var(--fg-muted)', marginTop: 22, fontSize: 15, lineHeight: 1.9 }}>
            AI RPOパートナーでは、最新の生成AIとAIエージェントを採用業務フローに組み込んでいます。
            候補者選定、スカウト文面作成、原稿制作、競合分析、データ集計——工数のかかる定型業務をAIが担うことで、担当者は戦略判断や候補者との関係構築といった本質的な業務に集中できます。
          </p>
          <p style={{ color: 'var(--fg-muted)', marginTop: 16, fontSize: 13, lineHeight: 1.9, padding: '14px 16px', background: 'var(--bg-3)', borderLeft: '3px solid var(--accent)', borderRadius: 4 }}>
            ※ AIが生成したアウトプットは必ず担当者が最終確認・承認した上で運用に使用します。採用ブランドや候補者体験を損なわない設計です。
          </p>
        </div>

        <div className="scout-stack">
          <div className="stack-head">
            <div className="stack-lbl">AI AGENTS IN USE</div>
            <div className="stack-sub">採用業務を支えるAIエージェント</div>
          </div>

          {[
            { k: 'Scout',     t: '候補者選定・スカウトAI', ai: 'プロファイル解析 / 文面生成', tag: '「AIスカウトくん」として提供', hot: true },
            { k: 'Copy',      t: 'コンテンツ生成AI',  ai: '求人票 / 広報コンテンツ',       tag: '原稿作成を高速化' },
            { k: 'Insights',  t: '市場・競合分析AI',   ai: '訴求設計 / ペルソナ分析',       tag: '運用データから学習' },
            { k: 'Ops',       t: 'オペレーションAI', ai: 'レポート / データ集計',        tag: '定型業務を自動化' },
          ].map(row => (
            <div key={row.k} className={`stack-row ${row.hot ? 'hot' : ''}`}>
              <div className="stack-k">{row.k}</div>
              <div className="stack-t">{row.t}</div>
              <div className="stack-ai">{row.ai}</div>
              <div className="stack-tag">{row.tag}</div>
            </div>
          ))}

          <div className="stack-foot">
            <span>◆</span> AIが下支えし、人が判断する。
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Process = () => (
  <section>
    <div className="wrap">
      <Eyebrow>Process · ご利用の流れ</Eyebrow>
      <h2 className="display" style={{ marginTop: 24 }}>
        ご契約から<br/>運用開始までの<em>流れ</em>。
      </h2>
      <div className="proc-list">
        {[
          ['STEP 01', 'お問い合わせ', '資料ダウンロード、または無料相談フォームからお気軽にご連絡ください。'],
          ['STEP 02', 'ヒアリング', '現状の採用課題、目標、体制、予算を詳しくお伺いします。'],
          ['STEP 03', 'ご提案', 'ヒアリング内容をもとに、採用戦略と支援プランをオーダーメイドでご提案します。'],
          ['STEP 04', 'ご契約', 'ご提案内容にご納得いただけましたら、契約を締結します。'],
          ['STEP 05', 'キックオフ', '専任担当者をアサインし、運用体制を構築します。'],
          ['STEP 06', '運用開始', '専任チームによる採用支援を開始。週次で成果をレビューし、改善を重ねます。'],
        ].map(([n, t, d]) => (
          <div key={n} className="proc-step">
            <div className="pn">{n}</div>
            <h3>{t}</h3>
            <p>{d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const FAQ_DATA = [
  ['AI RPOパートナーは、スカウト代行サービスですか？', 'いいえ。AI RPOパートナーは採用戦略の立案から日々の運用までを一気通貫でご支援するRPO（採用代行）サービスです。スカウトは支援領域の一部で、戦略設計・媒体運用・エージェント対応・選考管理・採用広報まで、採用活動全体の成果にコミットします。'],
  ['どの工程から相談できますか？', '採用戦略の設計段階からご相談いただくケースが最も多く、成果も出やすい傾向にあります。既存の採用体制の一部強化として、特定工程のみからの支援も可能です。まずは現状の課題をお聞かせください。'],
  ['どんな企業の採用を支援していますか？', 'スタートアップ・ベンチャーから業界大手まで幅広くご支援しています。特に、採用戦略や体制に課題を感じている企業様との相性が良いサービスです。新卒・中途・エンジニア・CXOクラスなど、各領域に実績があります。'],
  ['成果はどのように測定・報告されますか？', 'プロジェクトごとに採用KPI（応募数、返信率、決定率、time-to-hire等）を設計し、週次レポートで進捗と改善アクションを可視化します。「なぜうまくいったか／いかなかったか」を常に言語化してお届けします。'],
  ['生成AIを使うと採用品質は落ちませんか？', 'いいえ、むしろ品質は向上します。AIは原稿作成や競合分析などの定型業務を担い、担当者は戦略判断や候補者との関係構築といった本質的な業務に集中できます。AIの生成物は必ず担当者が最終確認した上で運用に使用します。'],
  ['自社の情報をAIに学習させても大丈夫ですか？', 'ご安心ください。機密情報の取り扱いには細心の注意を払っており、外部の学習データに利用されない環境での生成AI活用を徹底しています。詳細は資料または無料相談にてご説明します。'],
  ['対応可能な媒体を教えてください。', 'Wantedly、YOUTRUST、Green、ビズリーチ、doda、リクナビ、マイナビ、LinkedIn、Findy、Paizaなど80以上の媒体に対応しています。ご希望の媒体があればお問い合わせください。'],
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="why">
      <div className="wrap-narrow">
        <Eyebrow>FAQ · よくある質問</Eyebrow>
        <h2 className="display" style={{ marginTop: 24 }}>
          よくある<em>質問</em>。
        </h2>
        <div className="faq-list">
          {FAQ_DATA.map(([q, a], i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="q-mark">Q.</span>
                <span>{q}</span>
                <span className="arrow"><Ic.plus/></span>
              </button>
              <div className="faq-a">{a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CtaFinal = () => (
  <section id="cta" className="cta-final">
    <div className="wrap">
      <Eyebrow>Get Started</Eyebrow>
      <h2 className="display" style={{ marginTop: 24 }}>
        採用に、<em>結果</em>を。<br/>戦略から運用まで、<em>まるごと</em>お任せ。
      </h2>
      <p>
        <b>月額20万円〜の定額制</b>で、専任チームが採用成果に責任を持って伴走します。<br/>
        まずはお気軽に、無料相談・資料ダウンロードからご検討ください。
      </p>
      <div className="btns">
        <a href="/contact/" className="btn btn-accent btn-lg">サービス資料をダウンロード <Ic.arrow/></a>
        <a href="/meeting/" className="btn btn-ghost btn-lg">無料相談を予約</a>
      </div>
    </div>
  </section>
);

Object.assign(window, { AiScout, Process, FAQ, CtaFinal });