import { projects } from "@/lib/data";
import CommercialProjectCard from "@/components/commercial-project-card";

const CommercialProjects = () => {
  const commercialProjects = projects.filter((p) => p.commercial);

  return (
    <div
      id="commercial-projects"
      className="flex flex-col items-center justify-center gap-8 p-4 w-full"
    >
      <div className="text-center">
        <h3 className="mt-4 mb-2 text-5xl font-bold tracking-tight text-white">
          Commissioned Work 💼
        </h3>
        <p className="text-xl text-white/80 max-w-2xl mx-auto">
          Selected commercial projects and freelance commissions.
        </p>
      </div>

      <div className="w-full max-w-[90vw] md:max-w-6xl">
        <div className="flex items-stretch gap-6 overflow-x-auto pb-8 pt-4 px-4 snap-x snap-mandatory md:justify-center scrollbar-thin scrollbar-thumb-yellow-400 scrollbar-track-white/10">
          {commercialProjects.map((project) => (
            <CommercialProjectCard key={project.id} project={project} />
          ))}
        </div>
      </div>
    </div>
  );
};

export default CommercialProjects;