"use client";

import { useState } from "react";
import { ArrowIcon } from "./icons";
import { CMSImage } from "./Photo";
import type { CmsProject } from "@/lib/cms";

const categories = ["All", "Residential", "Commercial", "Hospitality"] as const;

export function PortfolioGallery({ projects }: { projects: CmsProject[] }) {
  const [active, setActive] = useState<(typeof categories)[number]>("All");

  const visible =
    active === "All" ? projects : projects.filter((p) => p.category === active);

  return (
    <div>
      {/* Filter pills */}
      <div className="flex flex-wrap items-center justify-center gap-3">
        {categories.map((c) => (
          <button
            key={c}
            type="button"
            onClick={() => setActive(c)}
            aria-pressed={active === c}
            className={`rounded-full px-5 py-2 text-[0.8rem] font-semibold transition-all duration-300 ${
              active === c
                ? "bg-teal text-white shadow-[0_12px_24px_-12px_rgba(15,123,123,0.6)]"
                : "border border-linen bg-white text-ink-soft hover:border-teal hover:text-teal"
            }`}
          >
            {c}
          </button>
        ))}
      </div>

      {/* Cards */}
      <div className="mt-12 grid gap-8 md:grid-cols-2">
        {visible.map((project) => (
          <a
            key={project.id}
            href={`/portfolio/${project.slug}`}
            className="card-soft lift group block overflow-hidden"
          >
            <div className="relative aspect-[4/3] overflow-hidden">
              <CMSImage
                value={project.image || project.rooms[0] || ""}
                fallbackKind="living"
                alt={`${project.title} — ${project.summary}`}
                sizes="(max-width: 768px) 100vw, 44vw"
                className="transition-transform duration-700 group-hover:scale-[1.05]"
              />
              <span className="absolute left-4 top-4 rounded-full bg-white/95 px-3 py-1 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-teal-deep">
                {project.category}
              </span>
            </div>
            <div className="p-6">
              <div className="flex items-start justify-between gap-4">
                <div>
                  <p className="text-[0.72rem] font-semibold uppercase tracking-[0.14em] text-coral">
                    {project.location}
                  </p>
                  <h2 className="display-3 mt-1.5 transition-colors group-hover:text-teal">
                    {project.title}
                  </h2>
                </div>
                <span className="mt-1 font-display text-sm text-ink-mute">
                  {project.year}
                </span>
              </div>
              <p className="mt-2 text-[0.92rem] text-ink-soft">{project.summary}</p>
              <span className="mt-5 inline-flex items-center gap-2 text-[0.8rem] font-semibold text-teal">
                View project
                <ArrowIcon className="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-x-1" />
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}