import { useState } from "react";
import Modal from "../common/Modal";

type Project = {
  id: string;
  title: string;
  image: string; // public/ path
  description: string;
  link?: string;
};

const projects: Project[] = [
  {
    id: "perlica",
    title: "Perlica",
    image: "/portfolio/perlica.png",
    description: "E-commerce redesign with modern UI and Django backend integration.",
    link: "#",
  },
  {
    id: "epinger",
    title: "Epinger",
    image: "/portfolio/epinger.png",
    description: "Landing page with responsive layout and animation system.",
    link: "#",
  },
  {
    id: "davo1",
    title: "Davo",
    image: "/portfolio/davo1.png",
    description: "Portfolio template and component library built with Vite + Tailwind.",
    link: "#",
  },
];

export default function PortfolioGrid() {
  const [active, setActive] = useState<Project | null>(null);
  return (
    <section id="portfolio" className="section">
      <div className="container">
        <h2 className="text-2xl md:text-3xl font-bold mb-2 text-rainbow">My Work</h2>
  <p className="text-[var(--c-lines)] mb-6 max-w-2xl">Selected projects combining engineering, design systems, performance optimization and infrastructure. Click a tile for details.</p>
        <div className="grid gap-6 md:grid-cols-3">
          {projects.map((p) => (
            <button
              key={p.id}
              className="card overflow-hidden text-left"
              onClick={() => setActive(p)}
            >
              <div className="aspect-[16/10] w-full overflow-hidden">
                <img src={p.image} alt={p.title} className="w-full h-full object-cover hover:scale-105 transition-transform" />
              </div>
              <div className="p-4">
                <h3 className="text-lg font-semibold tracking-wide text-rainbow">{p.title}</h3>
                <p className="text-xs text-[var(--c-lines)] mt-1 uppercase">View details →</p>
              </div>
            </button>
          ))}
        </div>
      </div>

      <Modal open={!!active} onClose={() => setActive(null)} title={active?.title}>
        <div className="space-y-3">
          {active && (
            <>
              <img src={active.image} alt={active.title} className="w-full rounded" />
              <p>{active.description}</p>
              {active.link && (
                <a href={active.link} target="_blank" rel="noreferrer" className="inline-block px-4 py-2 glow border rounded">
                  Visit project
                </a>
              )}
            </>
          )}
        </div>
      </Modal>
    </section>
  );
}