function Cases() {
  useReveal();
  const [filter, setFilter] = useState('ALL');
  const filters = ['ALL', 'MANUFACTURING', 'FINANCE', 'INFRA', 'RETAIL'];
  const cases = [
    { id: '001', ind: 'MANUFACTURING', title: '大手自動車部品メーカーの生産管理SaaS', client: '東証P上場 / 従業員32,000名', kpi: '-41%', kpiLabel: '作業時間削減', hue: 35 },
    { id: '002', ind: 'FINANCE', title: '信託銀行のローン審査ワークフロー刷新', client: '都市銀行子会社', kpi: '×3.2', kpiLabel: '審査速度向上', hue: 250 },
    { id: '003', ind: 'INFRA', title: '地域電力会社の設備点検モバイルアプリ', client: '大手電力会社', kpi: '94%', kpiLabel: '現場採用率', hue: 135 },
    { id: '004', ind: 'RETAIL', title: '小売チェーンの需要予測プラットフォーム', client: '全国展開 / 1,800店舗', kpi: '-28%', kpiLabel: '廃棄ロス削減', hue: 60 },
    { id: '005', ind: 'MANUFACTURING', title: '精密機器工場のMES現代化プロジェクト', client: '売上3,000億円規模', kpi: '99.9%', kpiLabel: 'トレーサビリティ', hue: 20 },
    { id: '006', ind: 'FINANCE', title: '生命保険の契約管理コアシステム再構築', client: '大手生保', kpi: '-52%', kpiLabel: '運用コスト削減', hue: 280 },
  ];
  const visible = filter === 'ALL' ? cases : cases.filter(c => c.ind === filter);

  return (
    <section id="cases">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">05</span>CASE STUDIES — 実績</p>
          <h2 className="h-section">信頼に、結果で<br/>応えてきました。</h2>
          <div className="cases-head meta-row" style={{ borderTop: 'none', paddingTop: 0 }}>
            <span className="mono small">/ 代表的な導入事例 6件 / 全件は事業内容お問い合わせ時に開示</span>
            <div className="filters">
              {filters.map(f => (
                <span key={f} className={`filter ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</span>
              ))}
            </div>
          </div>
        </div>
        <div className="cases-grid reveal-stagger" key={filter}>
          {visible.map((c, i) => <CaseCard key={c.id} {...c} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function CaseCard({ id, ind, title, client, kpi, kpiLabel, hue, idx }) {
  return (
    <article className="case">
      <div className="c-cover">
        <CaseVisual hue={hue} kind={ind} idx={idx} />
      </div>
      <div className="c-body">
        <div className="c-industry">CASE {id} — {ind}</div>
        <h3 className="c-title">{title}</h3>
        <p className="c-client">{client}</p>
        <div className="c-kpi">
          <span>{kpiLabel}</span>
          <b>{kpi}</b>
        </div>
      </div>
    </article>
  );
}

function CaseVisual({ hue, kind, idx }) {
  const base = `oklch(0.88 0.04 ${hue})`;
  const accent = `oklch(0.55 0.14 ${hue})`;
  return (
    <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%' }} preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill={base}/>
      {kind === 'MANUFACTURING' && <g>
        <rect x="40" y="80" width="60" height="140" fill={accent} opacity="0.8"/>
        <rect x="110" y="120" width="60" height="100" fill={accent} opacity="0.5"/>
        <rect x="180" y="60" width="60" height="160" fill={accent} opacity="0.9"/>
        <rect x="250" y="100" width="60" height="120" fill={accent} opacity="0.6"/>
        <line x1="30" y1="220" x2="380" y2="220" stroke="var(--ink)" strokeWidth="1"/>
      </g>}
      {kind === 'FINANCE' && <g>
        <circle cx="200" cy="150" r="70" fill="none" stroke={accent} strokeWidth="24"/>
        <circle cx="200" cy="150" r="40" fill={accent}/>
      </g>}
      {kind === 'INFRA' && <g>
        <path d={`M0,200 Q 100,${120 + idx * 10} 200,170 T 400,150 L 400,300 L 0,300 Z`} fill={accent} opacity="0.7"/>
        <path d={`M0,240 Q 100,${200 + idx * 5} 200,220 T 400,200 L 400,300 L 0,300 Z`} fill={accent}/>
      </g>}
      {kind === 'RETAIL' && <g>
        {Array.from({ length: 9 }).map((_, i) => (
          <rect key={i} x={60 + (i % 3) * 90} y={60 + Math.floor(i / 3) * 70} width="60" height="50" fill={accent} opacity={0.3 + (i / 9) * 0.7}/>
        ))}
      </g>}
      <rect x="20" y="20" width="40" height="16" fill="var(--ink)"/>
      <text x="40" y="32" fontSize="9" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-mono)">{kind.slice(0, 4)}</text>
    </svg>
  );
}

Object.assign(window, { Cases });