import Link from "next/link";

export default function Hobbies() {
  return (
    <div className="page">
      {/* external CSS: seluruh tampilan halaman ini hanya memakai file styles.css */}
      <link rel="stylesheet" href="/styles.css" />

      <header>
        <nav className="nav-bar">
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
          <Link href="/hobbies">Hobbies</Link>
          <Link href="/gallery">Gallery</Link>
          <Link href="/contact">Contact</Link>
        </nav>
      </header>

      <main className="main-wrapper">
        <section className="box">
          <h1 className="hobby-title">Hobi Saya</h1>
          <p>Ini beberapa hal yang biasa saya lakukan di waktu luang.</p>
          {/* daftar tidak berurutan (ul): ringkasan hobi */}
          <ul className="hobby-list">
            <li>Bermain game</li>
            <li>Menonton film</li>
            <li>Mendengarkan musik</li>
          </ul>
        </section>

        <section className="box">
          <h2 className="hobby-subtitle">Bermain Game</h2>
          <img
            className="hobby-img"
            src="/images/hobibermaingame.jpg"
            alt="Tangkapan layar profil pemain di game mobile yang menampilkan peringkat dan statistik"
          />
          <p>Saya suka bermain game Mobile Legends</p>
        </section>

        <section className="box">
          <h2 className="hobby-subtitle">Menonton Film</h2>
          <img
            className="hobby-img"
            src="/images/hobimenontonfilm.jpg"
            alt="Adegan film seorang pria duduk di pantai berbatu dengan tebing di belakangnya"
          />
          <p>Saya juga suka menonton film</p>
        </section>

        <section className="box">
          <h2 className="hobby-subtitle">Mendengarkan Musik</h2>
          <img
            className="hobby-img"
            src="/images/hobimendengarkanmusik.jpg"
            alt="Tangkapan layar aplikasi pemutar musik yang sedang memutar sebuah lagu"
          />
          <p>Saya juga suka mendengarkan musik, terutama genre pop rock</p>
        </section>

        <section className="box">
          <h2 className="hobby-subtitle">Urutan Hobi Favorit</h2>
          {/* daftar berurutan (ol): peringkat hobi dari yang paling disukai */}
          <ol className="hobby-list">
            <li>Mendengarkan musik</li>
            <li>Menonton film</li>
            <li>Bermain game</li>
          </ol>
        </section>
      </main>

      <footer className="footer-bar">
        <p>&copy; 2026 Zagar</p>
      </footer>
    </div>
  );
}