import Link from "next/link";
import { navLinks } from "../../_data/nav-links";

export default function GalleryPage() {
  return (
    <>
      <header className="bg-indigo-900 text-white pt-6 text-center">
        <h1 className="text-3xl font-bold mb-1">Gallery</h1>
        <p>Potret momen-momen yang saya simpan.</p>
        <nav>
          <ul className="flex flex-wrap justify-center gap-1 mt-4 list-none p-0">
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  className={
                    link.href === "/gallery"
                      ? "block px-4 py-3 rounded-t-md bg-indigo-600"
                      : "block px-4 py-3 rounded-t-md hover:bg-indigo-600"
                  }
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </header>

      <main className="max-w-5xl mx-auto px-4 py-6">
        <section>
          <h2 className="text-2xl font-semibold text-indigo-900 mb-4">Koleksi Foto</h2>
          {/* grid responsif: 1 kolom di ponsel, 2 di tablet, 3 di layar lebar */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-1.jpg" alt="Saya bersama teman-teman di kampus, berfoto dengan seragam merah" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Bersama teman-teman di kampus.</figcaption>
          </figure>
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-2.jpg" alt="Maskot kucing dan karakter pemegang kue ulang tahun pada poster raksasa di tribun" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Poster raksasa di tribun pertandingan basket.</figcaption>
          </figure>
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-3.jpg" alt="Suasana arena basket dengan poster burung elang raksasa di tribun" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Suasana arena pertandingan basket.</figcaption>
          </figure>
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-4.jpg" alt="Ringkasan rute bersepeda sore 30,53 km di Surabaya dari aplikasi Strava" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Rute bersepeda sore sejauh 30,53 km.</figcaption>
          </figure>
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-5.jpg" alt="Layar hasil pertandingan Clash Squad yang dimenangkan tim saya" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Kemenangan di game Clash Squad.</figcaption>
          </figure>
          <figure className="bg-white rounded-lg shadow overflow-hidden">
            <img src="/images/galeri-6.jpg" alt="Rangkaian Arduino Smart Parking System dengan layar LCD bertuliskan Welcome dan Slot Left 4, dua sensor inframerah, dan motor servo" className="w-full h-56 object-cover" />
            <figcaption className="p-3 text-sm text-slate-600">Proyek Arduino Smart Parking System.</figcaption>
          </figure>
          </div>
        </section>
      </main>

      <footer className="text-center py-5 text-sm text-slate-500">
        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
      </footer>
    </>
  );
}