function Services() {
  const items = [
    { n: '01', en: 'Video Production', jp: '映像制作', mi: '../../assets/services/01-video.png',
      body: '企画・構成・撮影・編集まで一貫して対応。AI補助で試作・編集を高速化し、視聴者に届く映像を設計。',
      stats: [['Turn', '4.2d'], ['Precision', '98%']] },
    { n: '02', en: 'Web Content', jp: 'Webコンテンツ制作', mi: '../../assets/services/02-web.png',
      body: 'サイト企画・構築から、文章・写真・ビジュアルの制作まで。AIライティングと人のディレクションを組み合わせ、読まれるコンテンツに。',
      stats: [['PV uplift', '+38%'], ['Articles', '120']] },
    { n: '03', en: 'BPO', jp: '業務プロセス代行', mi: '../../assets/services/03-bpo.png', link: 'https://www.nyusatsu-king.com/', external: true,
      body: 'データ入力・業務マニュアル化・リサーチ。入札王の年間120万件データを支える入力センターを運用。',
      stats: [['Entries/y', '1.2M'], ['Error', '±0.02%']] },
    { n: '04', en: 'AI Build · NEW', jp: 'AI構築・ツール開発', mi: '../../assets/services/04-ai.png', flag: true, link: '/gateguard',
      body: 'AI エージェント設計、社内ツール開発、OSS 提供 (gateguard 等)。戦略から実装・運用まで伴走します。',
      stats: [['Agents', '12'], ['OSS', '03']] },
  ];
  return (
    <section id="service" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S01 / Service</div>
          <h2 className="section-title"><span className="en">What we do</span>サービス紹介</h2>
          <a href="#contact" className="zw-link" style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase'}}>ご相談 →</a>
        </div>
        <div className="services">
          {items.map(it => (
            <div key={it.n} className={'service ' + (it.flag ? 'flag' : '')}
                 onClick={it.link ? () => { it.external ? window.open(it.link, '_blank', 'noopener,noreferrer') : (window.location.href = it.link); } : undefined}
                 style={it.link ? {cursor:'pointer'} : undefined}>
              <span className="sidx">{it.n}</span>
              <img className="icon" src={it.mi} alt={it.en} />
              <span className="en">{it.en}</span>
              <h3>{it.jp}</h3>
              <p>{it.body}</p>
              <div className="stat">
                {it.stats.map(([k,v]) => <div key={k}><span className="k">{k}</span><span className="v">{v}</span></div>)}
              </div>
              {it.link && (
                <a className="link" href={it.link} target={it.external ? '_blank' : undefined} rel={it.external ? 'noopener noreferrer' : undefined}>詳しく <span className="mi">→</span></a>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;