function Services() {
  useReveal();
  const services = [
    {
      num: '01',
      en: 'ENTERPRISE SAAS DEVELOPMENT',
      title: '基幹業務SaaSの受託開発',
      body: '製造・金融・インフラ企業様の基幹業務を、マルチテナントSaaSとして再設計・構築します。要件定義から運用まで、一気通貫で責任を持ちます。',
      tags: ['BtoB SaaS', 'Multi-tenant', 'Enterprise'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <rect x="10" y="30" width="100" height="70" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <rect x="20" y="42" width="36" height="6" fill="var(--ink)" opacity="0.2"/>
          <rect x="20" y="54" width="80" height="1" fill="var(--line)"/>
          <rect x="20" y="62" width="50" height="6" fill="var(--shu)"/>
          <rect x="20" y="74" width="80" height="1" fill="var(--line)"/>
          <rect x="20" y="82" width="70" height="6" fill="var(--ink)" opacity="0.15"/>
          <circle cx="96" cy="18" r="8" fill="var(--shu)"/>
        </svg>
      )
    },
    {
      num: '02',
      en: 'PRODUCT STRATEGY',
      title: 'プロダクト戦略・PoC',
      body: '「そもそも何を作るべきか」から一緒に考えます。新規事業のユーザーリサーチ、プロトタイピング、PoC開発までを高速で反復します。',
      tags: ['Discovery', 'Prototyping', 'Research'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <polyline points="15,95 40,70 60,82 85,45 105,60" fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
          <circle cx="15" cy="95" r="3" fill="var(--ink)"/>
          <circle cx="40" cy="70" r="3" fill="var(--ink)"/>
          <circle cx="60" cy="82" r="3" fill="var(--ink)"/>
          <circle cx="85" cy="45" r="5" fill="var(--shu)"/>
          <circle cx="105" cy="60" r="3" fill="var(--ink)"/>
          <line x1="15" y1="105" x2="105" y2="105" stroke="var(--line)" strokeWidth="1"/>
          <line x1="15" y1="105" x2="15" y2="15" stroke="var(--line)" strokeWidth="1"/>
        </svg>
      )
    },
    {
      num: '03',
      en: 'DESIGN ENGINEERING',
      title: 'デザイン・デザインシステム構築',
      body: 'UI/UXデザインから、プロダクト横断で使い回せるデザインシステムの設計・実装まで。デザイナーとエンジニアが同じ言語で作ります。',
      tags: ['Design System', 'UX', 'Figma → Code'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <rect x="18" y="20" width="30" height="30" fill="var(--ink)" opacity="0.15"/>
          <rect x="52" y="20" width="30" height="30" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <circle cx="101" cy="35" r="15" fill="var(--shu)"/>
          <rect x="18" y="54" width="64" height="18" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <rect x="18" y="76" width="48" height="18" fill="var(--ink)" opacity="0.1"/>
          <rect x="70" y="76" width="30" height="18" fill="none" stroke="var(--ink)" strokeWidth="1" strokeDasharray="2 2"/>
        </svg>
      )
    },
    {
      num: '04',
      en: 'CLOUD & DEVOPS',
      title: 'クラウド基盤・SRE',
      body: 'AWS / GCP上でのマルチリージョン構成、Kubernetesベースのプラットフォーム設計、SLO設計と継続的改善まで。止めないシステムを、共に。',
      tags: ['AWS', 'Kubernetes', 'SRE'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <path d="M25 70 Q25 45 50 45 Q55 30 75 32 Q95 34 95 55 Q110 58 108 75 Q105 88 90 88 L35 88 Q18 88 25 70 Z"
                fill="none" stroke="var(--ink)" strokeWidth="1.2"/>
          <circle cx="60" cy="68" r="6" fill="var(--shu)"/>
          <line x1="60" y1="74" x2="60" y2="100" stroke="var(--shu)" strokeWidth="1" strokeDasharray="2 2"/>
          <rect x="45" y="100" width="30" height="10" fill="none" stroke="var(--ink)" strokeWidth="1"/>
        </svg>
      )
    },
    {
      num: '05',
      en: 'DATA & AI',
      title: 'データ基盤・AI/LLM活用',
      body: 'データウェアハウス構築、分析基盤、LLMを組み込んだ社内ワークフロー設計。「使えるAI」を事業の文脈に合わせて統合します。',
      tags: ['Snowflake', 'RAG', 'MLOps'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <ellipse cx="60" cy="30" rx="35" ry="10" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <path d="M25 30 L25 60 Q25 70 60 70 Q95 70 95 60 L95 30" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <path d="M25 60 L25 90 Q25 100 60 100 Q95 100 95 90 L95 60" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <ellipse cx="60" cy="60" rx="35" ry="10" fill="none" stroke="var(--line)" strokeWidth="1"/>
          <circle cx="85" cy="95" r="12" fill="var(--shu)"/>
          <text x="85" y="99" fontSize="8" fill="var(--bg)" textAnchor="middle" fontFamily="var(--f-mono)">AI</text>
        </svg>
      )
    },
    {
      num: '06',
      en: 'LEGACY MODERNIZATION',
      title: 'レガシーシステム刷新',
      body: '15年動き続けたOracle Forms、Excel運用のERP、モノリシックJava——動かしながら、止めずに、現代の形へ段階的に移行します。',
      tags: ['Migration', 'Strangler', 'Incremental'],
      glyph: (
        <svg viewBox="0 0 120 120" width="100%" height="100%">
          <rect x="15" y="20" width="35" height="80" fill="var(--ink)" opacity="0.18"/>
          <rect x="70" y="20" width="35" height="80" fill="none" stroke="var(--shu)" strokeWidth="2"/>
          <path d="M50 60 L70 60" stroke="var(--ink)" strokeWidth="1"/>
          <path d="M63 55 L70 60 L63 65" fill="none" stroke="var(--ink)" strokeWidth="1"/>
          <text x="32" y="108" fontSize="7" fill="var(--ink-mute)" textAnchor="middle" fontFamily="var(--f-mono)">LEGACY</text>
          <text x="87" y="108" fontSize="7" fill="var(--shu)" textAnchor="middle" fontFamily="var(--f-mono)">MODERN</text>
        </svg>
      )
    },
  ];

  return (
    <section id="services">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">03</span>SERVICES — サービス</p>
          <h2 className="h-section">エンタープライズの<br/>課題に、6つの切り口で。</h2>
          <div className="meta-row">
            <span className="mono small">/ 要件定義から運用まで、一貫した伴走支援</span>
            <span className="mono small">01 — 06</span>
          </div>
        </div>
        <div className="services-grid reveal-stagger">
          {services.map((s, i) => (
            <div className="service" key={i}>
              <div className="s-num">{s.num} / SERVICE</div>
              <div className="s-glyph">{s.glyph}</div>
              <h3 className="s-title">
                <span className="en">{s.en}</span>
                {s.title}
              </h3>
              <p className="s-body">{s.body}</p>
              <div className="s-tags">
                {s.tags.map(t => <span className="s-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Services });