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

export default function HomePage() {
  return (
    <>
      <header
        style={{
          backgroundColor: "#312e81",
          color: "#ffffff",
          padding: "24px 16px 0",
          textAlign: "center",
        }}
      >
        <h1 style={{ margin: "0 0 4px", fontSize: "2rem" }}>Halo, saya Yovan</h1>
        <p style={{ margin: 0 }}>
          Mahasiswa Informatika yang suka membangun hal-hal kecil di web.
        </p>
        <nav>
          <ul
            style={{
              listStyle: "none",
              margin: "16px 0 0",
              padding: 0,
              display: "flex",
              justifyContent: "center",
              flexWrap: "wrap",
              gap: 4,
            }}
          >
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link
                  href={link.href}
                  style={{
                    display: "block",
                    padding: "12px 16px",
                    color: "#ffffff",
                    textDecoration: "none",
                    borderRadius: "6px 6px 0 0",
                    // tab aktif (Home) diberi warna latar
                    backgroundColor: link.href === "/" ? "#4f46e5" : undefined,
                  }}
                >
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </header>

      <main style={{ maxWidth: 900, margin: "24px auto", padding: "0 16px" }}>
        <section
          style={{
            display: "flex",
            flexWrap: "wrap",
            alignItems: "center",
            gap: 24,
            backgroundColor: "#ffffff",
            borderRadius: 10,
            padding: 24,
            boxShadow: "0 1px 4px rgba(15, 23, 42, 0.12)",
          }}
        >
          <img
            src="/images/foto-profil.jpg"
            alt="Foto Yovan dari belakang memakai jersey bernomor 4 di lapangan"
            width={220}
            height={220}
            style={{
              width: 220,
              height: 220,
              objectFit: "cover",
              borderRadius: "50%",
              border: "4px solid #4f46e5",
            }}
          />
          <div style={{ flex: 1, minWidth: 240 }}>
            <h2 style={{ marginTop: 0, color: "#312e81", fontSize: "1.5rem" }}>
              Selamat datang di situs pribadi saya
            </h2>
            <p>
              Saya Yovan, mahasiswa semester 3 Program Studi Informatika di
              Universitas Katolik Widya Mandala Surabaya. Situs ini saya buat sebagai
              Perkenalan Pribadi saya.
            </p>
            <p>
              Silakan jelajahi halaman <strong>About</strong> untuk mengenal saya lebih
              jauh, <strong>Hobbies</strong> dan <strong>Gallery</strong> untuk sisi
              santai saya, serta <strong>Contact</strong> jika ingin menghubungi saya.
            </p>
          </div>
        </section>
      </main>

      <footer
        style={{
          textAlign: "center",
          padding: "20px 16px",
          color: "#64748b",
          fontSize: "0.9rem",
        }}
      >
        <p style={{ margin: 0 }}>
          &copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS
        </p>
      </footer>
    </>
  );
}