import Script from "next/script";
import Nav from "../components/Nav";

export default function Gallery() {
  return (
    <div style={{ fontFamily: "Arial, Helvetica, sans-serif", lineHeight: 1.7, color: "#1f2937" }}>
      {/* TAILWIND CSS ONLY: styling via kelas utility Tailwind (CDN script di bawah). Tidak ada internal/external CSS dan tidak ada style="" di halaman ini. */}
      <Script src="https://cdn.tailwindcss.com" />

      <header className="py-6 border-b border-gray-200">
        <Nav />
        <h1 className="text-2xl font-bold text-gray-900">Galeri Foto</h1>
        <p className="text-gray-600">Kumpulan foto pribadi dengan keterangan.</p>
      </header>

      <main className="max-w-5xl mx-auto px-4 py-8">
        <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* Foto pribadi: ganti src dengan foto Anda sendiri di /images. Setiap gambar punya alt deskriptif. */}
          <figure className="bg-white border rounded-lg p-3 shadow-sm">
            <img src="/images/photo-gallery-1.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
            <figcaption className="mt-2 text-sm text-gray-700">Peta game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
          </figure>
          <figure className="bg-white border rounded-lg p-3 shadow-sm">
            <img src="/images/photo-gallery-2.jpg" alt="Tampilan game pixel art dengan karakter dan trofi, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
            <figcaption className="mt-2 text-sm text-gray-700">Tampilan game pixel art, hasil tangkapan layar saya sendiri.</figcaption>
          </figure>
          <figure className="bg-white border rounded-lg p-3 shadow-sm">
            <img src="/images/photo-gallery-3.jpg" alt="Task Manager layar laptop, hasil tangkapan layar saya sendiri" className="w-full h-48 object-cover rounded-md" />
            <figcaption className="mt-2 text-sm text-gray-700">Task Manager, hasil tangkapan layar saya sendiri.</figcaption>
          </figure>
        </section>
      </main>

      <footer className="py-6 border-t border-gray-200 text-center text-xs text-gray-500">
        &copy; 2026 Hulio
      </footer>
    </div>
  );
}