"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import { Reveal } from "@/components/reveal";

export type UIScreenshot = {
  src: string;
  title: string;
  description?: string;
};

export function DesktopUIShowcase({
  title = "Desktop Interface",
  subtitle = "Control surface software designed for clarity and speed.",
  screenshots,
}: {
  title?: string;
  subtitle?: string;
  screenshots: UIScreenshot[];
}) {
  return (
    <section className="relative overflow-hidden">
      <div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
        {/* Header */}
        <div className="flex flex-col gap-2">
          <h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
            {title}
          </h2>
          <p className="text-sm sm:text-[15px] text-black/60 max-w-3xl">
            {subtitle}
          </p>
        </div>

        {/* Grid */}
        <div className="mt-6 sm:mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {screenshots.map((shot, i) => (
            <Reveal key={shot.src}>
              <motion.div
                whileHover={{ y: -6 }}
                transition={{ type: "spring", stiffness: 160, damping: 18 }}
                className="glass rounded-3xl overflow-hidden group"
              >
                {/* Image */}
                <div className="relative aspect-[16/10] w-full overflow-hidden">
                  <Image
                    src={shot.src}
                    alt={shot.title}
                    fill
                    className="object-cover transition duration-500 group-hover:scale-[1.04]"
                  />
                </div>

                {/* Caption */}
                <div className="p-4">
                  <div className="text-sm font-semibold text-black/75">
                    {shot.title}
                  </div>
                  {shot.description ? (
                    <div className="mt-1 text-sm text-black/60 leading-relaxed">
                      {shot.description}
                    </div>
                  ) : null}
                </div>
              </motion.div>
            </Reveal>
          ))}
        </div>

        {/* Specular highlight */}
        <div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
      </div>
    </section>
  );
}