const Hero = () => (
  <section className="hero">
    <div className="wrap hero-grid">
      <div>
        <h1 className="display hero-h1" style={{ marginTop: 8 }}>
          <span className="hero-h1-pre">生成AIを活用した、結果が出る採用代行</span>
          <span className="qt">採用の</span><em>ノウハウ</em><span className="qt">や</span><br/>
          <em>リソース不足</em><span className="qt">を、</span><br/>
          <span className="qt">全て</span><em>解決</em><span className="qt">。</span>
        </h1>
        <p className="hero-sub">
          AI RPOパートナーは、AIネイティブな採用支援を通じて、採用活動の戦略立案から運用までを総合サポートし、結果をだします。
        </p>
        <div className="hero-price">
          <span className="hero-price-tag">PRICING</span>
          <span className="hero-price-body">
            月額20万円〜 時間稼働型の定額制
          </span>
        </div>
        <div className="hero-ctas">
          <a href="/meeting/" className="btn btn-primary btn-lg">無料で相談する <Ic.arrow/></a>
          <a href="/contact/" className="btn btn-ghost btn-lg">サービス資料をダウンロード</a>
        </div>
      </div>

      <div className="hero-visual">
        <HeroInfographic/>
      </div>
    </div>
  </section>
);

// Tabler-style outline icons (stroke, no fill) — same convention as window.Ic
const WheelIc = {
  target: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/>
    </svg>
  ),
  chart: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 20h16"/><rect x="5" y="12" width="3.5" height="6" rx="1"/><rect x="10.25" y="8" width="3.5" height="10" rx="1"/><rect x="15.5" y="4" width="3.5" height="14" rx="1"/>
    </svg>
  ),
  user: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="8" r="3.5"/><path d="M5 20a7 7 0 0 1 14 0"/>
    </svg>
  ),
  chat: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 4v-4H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/><path d="M8 9h8M8 12h5"/>
    </svg>
  ),
  calendar: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/><path d="M9 14h.01M12 14h.01M15 14h.01"/>
    </svg>
  ),
  users: (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="m11 17 2 2a1 1 0 1 0 3-3"/>
      <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"/>
      <path d="m21 3 1 11h-2"/>
      <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"/>
      <path d="M3 4h8"/>
    </svg>
  ),
};

const HeroInfographic = () => {
  // The client switched to a pre-made image of the wheel. The old SVG
  // recreation below is preserved (behind this early return) for easy revert.
  const USE_IMAGE = true;
  if (USE_IMAGE) {
    return (
      <img
        src="/assets/hero-wheel.webp?v=3"
        alt="AI RPOパートナーの提供範囲：要件定義・改善提案、媒体運用、スカウト運用、候補者対応（日程調整・面接設定から候補者フォローまで）、採用広報、エージェント対応。月額20万円〜の時間稼働型・定額制で、必要な業務に柔軟に時間を配分し、戦略から運用まで一気通貫で支援。月次レポートで成果を可視化し継続的に改善。"
        className="hero-wheel-img"
        width="1401"
        height="1061"
        loading="eager"
        decoding="async"
        ref={(el) => { if (el) el.setAttribute('fetchpriority', 'high'); }}
      />
    );
  }

  // Geometry: θ measured from TOP (12 o'clock), increasing CLOCKWISE.
  const point = (deg, r) => {
    const a = (deg * Math.PI) / 180;
    return [300 + r * Math.sin(a), 300 - r * Math.cos(a)];
  };
  // Annular wedge path a0→a1 (deg), inner ri, outer ro.
  const wedge = (a0, a1, ri, ro) => {
    const [x0o, y0o] = point(a0, ro);
    const [x1o, y1o] = point(a1, ro);
    const [x1i, y1i] = point(a1, ri);
    const [x0i, y0i] = point(a0, ri);
    return `M ${x0o} ${y0o} A ${ro} ${ro} 0 0 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${ri} ${ri} 0 0 0 ${x0i} ${y0i} Z`;
  };

  const ri = 132, ro = 250, anchorR = 191;

  const segments = [
    { a0: 300, a1: 360, c: 330, title: '要件定義・改善提案', desc: ['採用要件整理・', '打ち手提案'], icon: WheelIc.target },
    { a0: 0,   a1: 60,  c: 30,  title: '媒体運用',         desc: ['各媒体の運用・改善で', '効果を最大化'], icon: WheelIc.chart },
    { a0: 60,  a1: 120, c: 90,  title: 'スカウト運用',     desc: ['ターゲット設計から', '送信・改善まで'], icon: WheelIc.user },
    { a0: 120, a1: 180, c: 150, title: '候補者対応',       desc: ['候補者とのコミュニケーション', 'を丁寧に支援'], icon: WheelIc.chat },
    { a0: 180, a1: 240, c: 210, title: '日程調整',         desc: ['候補者との調整・', '面接設定を代行'], icon: WheelIc.calendar },
    { a0: 240, a1: 300, c: 270, title: 'エージェント対応', desc: ['紹介会社との連携・', '推薦管理を支援'], icon: WheelIc.users },
  ];

  // Three subtle clockwise chevrons on the outer ring.
  const chevron = (deg) => {
    const [tx, ty] = point(deg, 268);
    return `rotate(${deg} ${tx} ${ty}) translate(${tx} ${ty})`;
  };

  return (
    <div className="infog2 wheelfx">
      <svg viewBox="0 0 600 600" className="infog2-svg" aria-hidden="true">
        <defs>
          <filter id="hubShadow" x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx="0" dy="4" stdDeviation="14" floodColor="#2a1d3d" floodOpacity="0.16"/>
          </filter>
          <radialGradient id="wedgeGrad" cx="300" cy="300" r="250" gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#f4f0fa"/>
            <stop offset="100%" stopColor="#e8e1f3"/>
          </radialGradient>
        </defs>
        {/* Outer ring + subtle rotating chevrons */}
        <circle cx="300" cy="300" r="268" fill="none" stroke="var(--border)" strokeWidth="1"/>
        <g className="wheel-ring">
          {[20, 140, 260].map((d) => (
            <path key={d} d="M -5 4 L 0 -4 L 5 4" fill="none"
              stroke="var(--border-strong)" strokeWidth="1.4"
              strokeLinecap="round" strokeLinejoin="round"
              transform={chevron(d)} />
          ))}
        </g>

        {/* 6 wedges (white stroke creates the divider gaps) */}
        {segments.map((s) => (
          <path key={s.title} d={wedge(s.a0, s.a1, ri, ro)}
            fill="url(#wedgeGrad)" stroke="#ffffff" strokeWidth="4" strokeLinejoin="round"/>
        ))}

        {/* White center hub */}
        <circle cx="300" cy="300" r="126" fill="#ffffff" stroke="var(--border)" strokeWidth="1" filter="url(#hubShadow)"/>

        {/* Segment content */}
        {segments.map((s) => {
          const [ax, ay] = point(s.c, anchorR);
          return (
            <foreignObject key={s.title} x={ax - 85} y={ay - 48} width="170" height="96">
              <div className="wheel-seg" xmlns="http://www.w3.org/1999/xhtml">
                <div className="wheel-seg-ic">{s.icon}</div>
                <div className="wheel-seg-t">{s.title}</div>
                <div className="wheel-seg-d">{s.desc[0]}<br/>{s.desc[1]}</div>
              </div>
            </foreignObject>
          );
        })}

        {/* Center hub text */}
        <foreignObject x="174" y="174" width="252" height="252">
          <div className="wheel-hub" xmlns="http://www.w3.org/1999/xhtml">
            <div className="wheel-hub-pre">月額20万円〜</div>
            <div className="wheel-hub-big">時間稼働型</div>
            <div className="wheel-hub-sub">ご状況に合わせて</div>
            <div className="wheel-hub-sub">柔軟に時間を配分</div>
          </div>
        </foreignObject>
      </svg>

      {/* Outer annotations placed in the surrounding whitespace */}
      <div className="wheel-note left">必要な業務に、<br/>柔軟に時間を配分</div>
      <div className="wheel-note right">戦略から運用まで、<br/>一気通貫で支援</div>
      <div className="wheel-note bottom">月次レポートで成果を可視化し、継続的に改善</div>
    </div>
  );
};

Object.assign(window, { Hero });