"use client";

import { PROJECTS } from "@/data/content";
import { useStaggerReveal } from "@/hooks/useAnimations";
import ProjectCard from "./ProjectCard";

export default function Projects() {
  const visible = useStaggerReveal(PROJECTS.length, 100);

  return (
    <div style={{ padding: "48px 0" }}>
      <div
        style={{
          marginBottom: 8,
          fontFamily: "var(--mono)",
          fontSize: 11,
          color: "var(--muted)",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
        }}
      >
        {"# projects"}
      </div>
      <h2
        style={{
          fontFamily: "var(--sans)",
          fontSize: 28,
          fontWeight: 700,
          color: "var(--fg)",
          margin: "0 0 32px 0",
          letterSpacing: "-0.01em",
        }}
      >
        {"Things I've built"}
      </h2>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
          gap: 16,
        }}
      >
        {PROJECTS.map((project, i) => (
          <ProjectCard
            key={project.id}
            project={project}
            visible={visible.has(i)}
          />
        ))}
      </div>
    </div>
  );
}