import type { Metadata } from "next";
import Script from "next/script";
import { NavTailwind } from "../../components/nav";
import HtmlComment from "../../components/html-comment";
import { profile, gallery } from "../../lib/data";

export const metadata: Metadata = { title: "Galeri | Personal Website" };

export default function GalleryPage() {
  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800">
      {/* halaman ini WAJIB tailwind css saja: script cdn dimuat di sini, semua gaya berupa kelas utilitas */}
      <Script src="https://cdn.tailwindcss.com" />

      <header className="mx-auto max-w-5xl px-6 pt-4">
        <p className="m-0 font-serif text-xl font-bold text-teal-800">{profile.nickname}</p>
        <NavTailwind current="/gallery" />
      </header>

      <main className="mx-auto max-w-5xl px-6 pb-6">
        <section>
          <h1 className="mb-2 mt-6 font-serif text-4xl font-bold leading-tight text-teal-800">Galeri Foto</h1>
          <p className="mb-6 max-w-prose leading-relaxed">Beberapa potret dari keseharian saya.</p>
        </section>

        <section>
          <h2 className="mb-4 font-serif text-2xl font-bold text-teal-800">Koleksi terbaru</h2>
          <HtmlComment text="grid responsif: 1 kolom di ponsel, 2 di tablet, 3 di layar lebar" />
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            {gallery.map((photo) => (
              <figure key={photo.src} className="m-0 overflow-hidden rounded-xl bg-white shadow">
                <img
                  src={photo.src}
                  alt={photo.alt}
                  width="400"
                  height="300"
                  className="aspect-[4/3] w-full object-cover"
                />
                <figcaption className="px-4 py-3 text-sm font-semibold text-slate-700">{photo.caption}</figcaption>
              </figure>
            ))}
          </div>
        </section>
      </main>

      <footer className="mx-auto max-w-5xl border-t border-slate-300 px-6 pb-8 pt-4 text-sm text-slate-600">
        <p className="m-0">
          &copy; {profile.year} {profile.name}
        </p>
      </footer>
    </div>
  );
}