import Nav from "../components/Nav";
import "./styles.css"; /* EKSTERNAL CSS ONLY: semua styling dari styles.css lewat kelas, tidak ada style="" di halaman ini */

export default function Hobbies() {
  return (
    <div className="layout-container">
      {/* EKSTERNAL CSS: .layout-container, .hobby-card, dll. dari styles.css mengatur tampilan */}
      <header className="hobbies-header">
        <Nav />
      </header>

      <main className="hobbies-main">
        <section className="hobby-card">
          {/* Foto pribadi: screenshot akun game saya sendiri. */}
          <img src="/images/photo-hobby-read.jpg" alt="Screenshot akun game saya, foto pribadi" width="300" height="200" />
        </section>

        <section className="hobby-card">
          {/* Foto pribadi: screenshot kode game saya sendiri. */}
          <img src="/images/photo-hobby-bike.jpg" alt="Screenshot kode game saya, foto pribadi" width="300" height="200" />
        </section>

        <section className="hobby-card">
          {/* Foto pribadi: peta game pixel art hasil tangkapan layar saya sendiri. */}
          <img src="/images/photo-hobby-code.jpg" alt="Peta game pixel art, hasil tangkapan layar saya sendiri" width="300" height="200" />
        </section>
      </main>

      <footer className="hobbies-footer">&copy; 2026 Hulio</footer>
    </div>
  );
}