"use client"

import { useDataStore } from "@/lib/data-store"

const stackCategories = [
  {
    title: "Backend",
    items: ["Go", "Python", "Node.js", "Rust"],
  },
  {
    title: "Databases",
    items: ["PostgreSQL", "Redis", "SQLite", "ClickHouse"],
  },
  {
    title: "Infrastructure",
    items: ["Docker", "Kubernetes", "Terraform", "AWS"],
  },
  {
    title: "APIs & Protocols",
    items: ["REST", "GraphQL", "gRPC", "WebSockets"],
  },
  {
    title: "Observability",
    items: ["Prometheus", "Grafana", "OpenTelemetry", "Sentry"],
  },
  {
    title: "Tooling",
    items: ["Git", "CI/CD", "Make", "Nix"],
  },
]

export function TechStack() {
  const { stackCategories } = useDataStore()

  return (
    <section id="stack" className="py-24 border-t border-border">
      <div className="max-w-4xl mx-auto px-6">
        <div className="grid md:grid-cols-[200px_1fr] gap-8 md:gap-12">
          {/* Section label */}
          <div>
            <h2 className="font-mono text-sm text-muted-foreground uppercase tracking-wider">Tech Stack</h2>
            <div className="mt-2 w-12 h-px bg-primary" />
          </div>

          {/* Content */}
          <div className="space-y-8">
            <p className="text-muted-foreground">
              Tools I reach for regularly. I'm not religious about any of them—the right choice depends on the problem.
            </p>

            {/* Stack grid */}
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {stackCategories.map((category) => (
                <div key={category.id} className="space-y-3">
                  <h3 className="font-mono text-xs text-primary uppercase tracking-wider">{category.title}</h3>
                  <ul className="space-y-1.5">
                    {category.items.map((item) => (
                      <li key={item} className="text-sm text-muted-foreground font-mono flex items-center gap-2">
                        <span className="w-1 h-1 bg-muted-foreground rounded-full" />
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}