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

export default function HobbiesPage() {
  return (
    <>
      <header className="site-header">
        <h1 className="page-title">Hobbies</h1>
        <p className="tagline">Hal-hal yang saya lakukan di waktu luang.</p>
        <nav className="site-nav">
          <ul>
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link href={link.href} className={link.href === "/hobbies" ? "active" : undefined}>
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </header>

      <main className="page-wrapper">
        <section className="card">
          <h2>Tiga Hobi Utama</h2>
          <div className="hobby-grid">
            <article className="hobby-card">
              <img src="/images/hobi-bersepeda.jpg" alt="Sepeda balap saya terparkir, dengan ringkasan rute Strava bersepeda sore" />
              <h3>Bersepeda</h3>
              <p>
                Saya suka bersepeda sore keliling Surabaya. Dua rute terakhir saya
                menempuh 30,53 km dan 37,79 km.
              </p>
            </article>
            <article className="hobby-card">
              <img src="/images/hobi-menggambar.jpg" alt="Gambar digital karakter berhoodie biru memegang cat semprot buatan saya" />
              <h3>Menggambar</h3>
              <p>Saya suka menggambar karakter kartun dengan aplikasi digital.</p>
            </article>
            <article className="hobby-card">
              <img src="/images/hobi-olahraga.jpg" alt="Tim futsal berbaris merangkul bahu di lapangan dengan suporter di tribun" />
              <h3>Olahraga</h3>
              <p>Saya suka bermain futsal dan bermain setiap minggu.</p>
            </article>
          </div>
        </section>

        <section className="card">
          <h2>Lebih Dekat dengan Hobi Saya</h2>
          <h3>Perlengkapan yang saya pakai</h3>
          <ul>
            <li>Sepeda</li>
            <li>Sepatu futsal</li>
            <li>Ibis Piant X</li>
          </ul>
          <h3>Cara saya memulai hobi baru</h3>
          {/* ol dipakai karena langkah-langkahnya berurutan */}
          <ol>
            <li>Mencari tahu dasar-dasarnya lewat video dan buku.</li>
            <li>Mencoba dengan perlengkapan sederhana.</li>
            <li>Berlatih rutin setiap minggu.</li>
          </ol>
        </section>
      </main>

      <footer className="site-footer">
        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
      </footer>
    </>
  );
}