"use client";

import { useState } from "react";
import { ArrowUpRight } from "lucide-react";
import type { Project } from "@/lib/contentTypes";
import ProjectImage from "./ui/ProjectImage";
import Reveal from "./ui/Reveal";
import SectionHeading from "./ui/SectionHeading";
import PillButton from "./ui/PillButton";

/** Jumlah proyek yang tampil sebelum tombol "Tampilkan Semua". */
const INITIAL_COUNT = 6;

/** Grid proyek dengan tinggi bervariasi (kesan masonry template asli). */
export default function Projects({ projects }: { projects: Project[] }) {
  const [showAll, setShowAll] = useState(false);
  const visible = showAll ? projects : projects.slice(0, INITIAL_COUNT);

  return (
    <section id="proyek" className="mx-auto max-w-6xl px-5 py-24 md:px-8 md:py-32">
      <SectionHeading
        label="Portofolio"
        title="Karya yang Membanggakan"
        description="Sistem informasi, dashboard kinerja, dan aplikasi mobile yang dipercaya instansi pemerintah, BUMN, maupun swasta."
      />

      <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {visible.map((project, i) => (
          <Reveal key={project.title} delay={(i % 3) * 0.1} className="h-full">
            <a
              href="#kontak"
              className="group flex h-full flex-col overflow-hidden rounded-3xl border border-line bg-surface transition-colors hover:border-line-2"
            >
              <div className="relative">
                <ProjectImage
                  title={project.title}
                  tone={project.tone}
                  image={project.image}
                  className="aspect-[4/3] w-full transition-transform duration-700 group-hover:scale-[1.04]"
                />
                {/* overlay hover */}
                <div className="absolute inset-0 flex items-end justify-between p-5 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                  <span className="rounded-full bg-white/95 px-4 py-2 text-xs font-semibold text-ink">
                    Lihat Studi Kasus
                  </span>
                  <span className="grid size-9 place-items-center rounded-full bg-white/95 text-ink">
                    <ArrowUpRight size={15} />
                  </span>
                </div>
              </div>

              <div className="flex flex-1 items-start justify-between gap-4 p-5">
                <div>
                  <h3 className="line-clamp-2 text-base font-semibold text-fg">
                    {project.title}
                  </h3>
                  <p className="mt-1 line-clamp-2 text-[13px] text-fog">{project.description}</p>
                  <span className="mt-2 inline-block font-accent text-[11px] tracking-wide text-mist uppercase">
                    {project.client}
                  </span>
                </div>
                <span className="shrink-0 font-accent text-xs text-mist">
                  {project.type}
                </span>
              </div>
            </a>
          </Reveal>
        ))}
      </div>

      <Reveal className="mt-12 flex flex-col items-center justify-center gap-3 sm:flex-row">
        {projects.length > INITIAL_COUNT && (
          <PillButton
            variant="ghost"
            withIcon={false}
            onClick={() => setShowAll((v) => !v)}
          >
            {showAll
              ? "Tampilkan Lebih Sedikit"
              : `Tampilkan Semua Proyek (${projects.length})`}
          </PillButton>
        )}
        <PillButton href="#kontak">Diskusikan Proyek Anda</PillButton>
      </Reveal>
    </section>
  );
}