import ProjectCard from '@/components/ProjectCard'
import projects from '@/content/projects.json'

const featured = projects.filter((p) => p.featured)

export default function FeaturedProjects() {
  return (
    <section className="mx-auto max-w-5xl px-6 py-16">
      <h2 className="mb-8 text-2xl font-semibold text-zinc-900 dark:text-white">Featured Projects</h2>
      <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {featured.map((project) => (
          <li key={project.title}>
            <ProjectCard {...project} />
          </li>
        ))}
      </ul>
    </section>
  )
}