sass-mohfarawati/components/home/projects-section.tsx

import { ArrowUpRight } from "lucide-react";
import Link from "next/link";

import { PortfolioCover } from "@/components/site/portfolio-cover";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { SectionHeading } from "./section-heading";
import type { ProjectCardCopy, ProjectsSectionCopy } from "./types";

type ProjectsSectionProps = {
  copy: ProjectsSectionCopy;
  items: ProjectCardCopy[];
};

export function ProjectsSection({ copy, items }: ProjectsSectionProps) {
  return (
    <section className="space-y-10">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
        {items.map((item, index) => {
          const featured = Boolean(item.featured);

          return (
            <Link
              key={`${item.title}-${index}`}
              href={item.href}
              className={cn(
                "group flex h-full flex-col overflow-hidden rounded-surface border border-border bg-surface-1 shadow-card transition duration-300 ease-out hover:-translate-y-1 hover:shadow-panel focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
                featured && "lg:col-span-2",
              )}
            >
              <div
                className={cn(
                  "relative overflow-hidden",
                  featured ? "aspect-[16/10]" : "aspect-[4/3]",
                )}
              >
                <PortfolioCover
                  src={item.coverImagePath ?? null}
                  title={item.title}
                  category={item.meta[0]}
                  sizes={
                    featured
                      ? "(min-width: 1024px) 66vw, 100vw"
                      : "(min-width: 1024px) 33vw, 100vw"
                  }
                />
              </div>

              <div className="flex flex-1 flex-col p-6">
                <div className="flex flex-wrap items-center gap-2">
                  {item.meta.map((metaItem) => (
                    <Badge
                      key={metaItem}
                      variant="outline"
                      className="border-border text-caption text-muted-foreground"
                    >
                      {metaItem}
                    </Badge>
                  ))}
                </div>

                <h3
                  className={cn(
                    "mt-4 font-semibold tracking-tight text-foreground",
                    featured ? "text-h3 sm:text-h2" : "text-h3",
                  )}
                >
                  {item.title}
                </h3>

                <p className="mt-2 line-clamp-2 text-small leading-relaxed text-muted-foreground">
                  {item.summary}
                </p>

                {item.stack.length > 0 ? (
                  <div className="mt-4 flex flex-wrap gap-2">
                    {item.stack.map((stackItem) => (
                      <Badge
                        key={stackItem}
                        variant="secondary"
                        className="bg-secondary/70 text-caption text-foreground"
                      >
                        {stackItem}
                      </Badge>
                    ))}
                  </div>
                ) : null}

                <span className="mt-auto inline-flex items-center gap-2 pt-6 text-caption font-medium text-foreground/70 transition-colors group-hover:text-brand-primary">
                  {item.cta}
                  <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </span>
              </div>
            </Link>
          );
        })}
      </div>
    </section>
  );
}