function Stack() {
  useReveal();
  const [cat, setCat] = useState('frontend');
  const cats = {
    frontend: { label: 'FRONTEND', items: [
      { name: 'TypeScript', role: 'LANGUAGE' }, { name: 'React', role: 'FRAMEWORK' }, { name: 'Next.js', role: 'FRAMEWORK' },
      { name: 'Remix', role: 'FRAMEWORK' }, { name: 'Vite', role: 'BUNDLER' }, { name: 'Tailwind', role: 'STYLING' },
      { name: 'Radix UI', role: 'PRIMITIVES' }, { name: 'Storybook', role: 'DOCS' }, { name: 'Playwright', role: 'TESTING' },
    ]},
    backend: { label: 'BACKEND', items: [
      { name: 'Node.js', role: 'RUNTIME' }, { name: 'Go', role: 'LANGUAGE' }, { name: 'Rust', role: 'LANGUAGE' },
      { name: 'Kotlin', role: 'LANGUAGE' }, { name: 'tRPC', role: 'RPC' }, { name: 'GraphQL', role: 'API' },
      { name: 'Temporal', role: 'WORKFLOW' }, { name: 'Kafka', role: 'STREAMING' },
    ]},
    infra: { label: 'INFRASTRUCTURE', items: [
      { name: 'AWS', role: 'CLOUD' }, { name: 'GCP', role: 'CLOUD' }, { name: 'Kubernetes', role: 'ORCHESTRATION' },
      { name: 'Terraform', role: 'IAC' }, { name: 'Pulumi', role: 'IAC' }, { name: 'ArgoCD', role: 'GITOPS' },
      { name: 'Datadog', role: 'OBSERVABILITY' }, { name: 'Grafana', role: 'OBSERVABILITY' },
    ]},
    data: { label: 'DATA & AI', items: [
      { name: 'PostgreSQL', role: 'DATABASE' }, { name: 'Snowflake', role: 'WAREHOUSE' }, { name: 'dbt', role: 'TRANSFORM' },
      { name: 'Redis', role: 'CACHE' }, { name: 'LangChain', role: 'LLM' }, { name: 'Anthropic API', role: 'LLM' },
      { name: 'pgvector', role: 'VECTOR' },
    ]},
    design: { label: 'DESIGN', items: [
      { name: 'Figma', role: 'DESIGN' }, { name: 'Tokens Studio', role: 'TOKENS' }, { name: 'Linear', role: 'PM' },
      { name: 'Notion', role: 'DOCS' },
    ]},
  };

  return (
    <section id="stack">
      <div className="wrap">
        <div className="section-header reveal">
          <p className="h-eyebrow"><span className="num">07</span>TECH STACK — 技術スタック</p>
          <h2 className="h-section">枯れた技術と、<br/>新しい道具を、慎重に。</h2>
          <div className="meta-row">
            <span className="mono small">/ 技術は目的ではなく、道具。事業の寿命に耐える選定を。</span>
            <span className="mono small">5 CATEGORIES / 37 TECHNOLOGIES</span>
          </div>
        </div>
        <div className="stack-layout reveal">
          <div className="stack-cats">
            {Object.entries(cats).map(([k, v]) => (
              <div key={k} className={`stack-cat ${cat === k ? 'active' : ''}`} onClick={() => setCat(k)}>
                <span>{v.label}</span>
                <span className="count">{String(v.items.length).padStart(2, '0')}</span>
              </div>
            ))}
          </div>
          <div className="stack-items" key={cat}>
            {cats[cat].items.map(t => (
              <div className="tech" key={t.name}>
                <div className="t-name">{t.name}</div>
                <div className="t-role">{t.role}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stack });