import type { Metadata } from "next";
import { NavExternal } from "../../components/nav";
import HtmlComment from "../../components/html-comment";
import { profile, contacts } from "../../lib/data";

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

export default function ContactPage() {
  return (
    <>
      {/* pilihan css: external. alasannya, halaman ini memakai ulang kelas panel, container, dan nav
          yang sudah ada di styles.css. inline akan mengulang gaya, tailwind butuh script cdn tambahan
          padahal halaman ini sederhana dan tidak perlu komponen khusus */}
      <link rel="stylesheet" href="/styles.css" precedence="default" />
      <HtmlComment text="contact.html memakai external css karena gayanya sama dengan halaman lain dan cukup satu stylesheet bersama" />

      <header className="site-header">
        <p className="brand">{profile.nickname}</p>
        <NavExternal current="/contact" />
      </header>

      <main className="container">
        <h1>Kontak</h1>

        <section className="panel">
          <h2>Hubungi saya</h2>
          <p>Silakan hubungi saya lewat salah satu kanal berikut. Tidak ada formulir, langsung saja kirim pesan.</p>
          <ul className="contact-list">
            {contacts.map((item) => (
              <li key={item.label}>
                <span className="contact-label">{item.label}</span>
                <a
                  href={item.href}
                  {...(item.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                >
                  {item.text}
                </a>
              </li>
            ))}
          </ul>
        </section>

        <section className="panel">
          <h2>Lokasi</h2>
          <p>Saya berdomisili di {profile.city} dan kuliah di Universitas Katolik Widya Mandala Surabaya.</p>
        </section>
      </main>

      <footer className="site-footer">
        <p>
          &copy; {profile.year} {profile.name}
        </p>
      </footer>
    </>
  );
}