import Link from "next/link";

export default function Contact() {
  return (
    <div className="page">
      {/* external CSS: dipilih karena styles.css sudah berisi gaya navbar, kotak, dan footer yang sama dengan halaman lain, jadi tampilan seragam dan mudah diubah dari satu file */}
      <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="contact-title">Hubungi Saya</h1>
          <p>Kamu bisa menghubungi saya lewat kontak berikut.</p>
        </section>

        <section className="box">
          <h2 className="contact-subtitle">Kontak</h2>
          <ul className="contact-list">
            <li>
              <span className="contact-label">Email</span>
              <a className="contact-link" href="mailto:zagar-n.inf25@ukwms.ac.id">
                zagar-n.inf25@ukwms.ac.id
              </a>
            </li>
            <li>
              <span className="contact-label">Instagram</span>
              {/* link eksternal: membuka situs di luar halaman sendiri pada tab baru */}
              <a
                className="contact-link"
                href="https://www.instagram.com/jmn_zn14"
                target="_blank"
                rel="noopener noreferrer"
              >
                @jmn_zn14
              </a>
            </li>
            <li>
              <span className="contact-label">Domisili</span>
              <span>Surabaya, Jawa Timur</span>
            </li>
          </ul>
        </section>
      </main>

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