const groups = [
  {
    title: "Languages",
    items: ["TypeScript", "Rust", "Python", "Go", "SQL"],
  },
  {
    title: "Frontend",
    items: ["React", "Next.js", "Tailwind", "Astro", "Svelte"],
  },
  {
    title: "Backend & data",
    items: ["Node", "Postgres", "Redis", "gRPC", "Kafka"],
  },
  {
    title: "Platform",
    items: ["Docker", "Terraform", "AWS", "Vercel", "GitHub Actions"],
  },
];

export default function DevStack() {
  return (
    <section className="border-y border-border/60 bg-muted/20">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            The tools I reach for
          </h2>
          <p className="mt-2 text-muted-foreground">
            Opinionated, boring on purpose, and battle-tested in production.
          </p>
        </div>

        <div className="grid gap-px overflow-hidden rounded-xl border border-border/60 bg-border/60 sm:grid-cols-2">
          {groups.map((group) => (
            <div key={group.title} className="bg-background p-6">
              <h3 className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
                {group.title}
              </h3>
              <ul className="mt-4 flex flex-wrap gap-2">
                {group.items.map((item) => (
                  <li
                    key={item}
                    className="rounded-lg border border-border/60 bg-card px-2.5 py-1 text-sm"
                  >
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
Dev Stack
