function Services() {
  const items = [
    {
      kw: "web_apps",
      title: "Web applications.",
      body: "React and TypeScript on the front. Node, TypeScript and Postgres on the back, deployed on GCP. We pick boring stacks on purpose — we've shipped invoicing, scheduling, and CRM tools for teams of 5–500.",
      tags: ["react", "typescript", "node", "postgres", "gcp"]
    },
    {
      kw: "internal_tools",
      title: "Internal tools.",
      body: "The Retool-shaped hole in your org chart. Dashboards, admin panels, ops UIs. Often the highest-leverage thing we build all year.",
      tags: ["retool", "metabase", "supabase", "n8n"]
    },
    {
      kw: "mobile_apps",
      title: "Mobile applications.",
      body: "iOS and Android from one Flutter codebase. Native feel, native performance, half the build time of writing it twice. Flutter and Dart, exclusively — one framework, one language, both deep.",
      tags: ["flutter", "dart", "ios", "android"]
    }
  ];
  return (
    <section id="services" className="section">
      <div className="container">
        <p className="eyebrow">services</p>
        <h2 className="section-title">Three things, done well.</h2>
        <p className="section-sub">If your job doesn't fit one of these, write us anyway — we'll tell you honestly whether we're the right team.</p>

        <div className="services-grid">
          {items.map(it => (
            <div className="svc-card" key={it.kw}>
              <div className="svc-card-head">
                <span className="svc-kw">// {it.kw}</span>
              </div>
              <h4 className="svc-title">{it.title}</h4>
              <p className="svc-body">{it.body}</p>
              <div className="svc-tags">
                {it.tags.map(t => <span key={t} className="tag">{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;