"use client";

import { useState } from "react";
import Link from "next/link";

export default function Home() {
  // state hover untuk link "Kenali saya lebih jauh"
  const [hover, setHover] = useState(false);

  return (
    // inline CSS: semua gaya halaman ini ditulis langsung lewat atribut style pada tiap elemen
    <div
      style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        backgroundColor: "#f5f5f5",
        color: "#222222",
        fontFamily: "Arial, sans-serif",
        lineHeight: 1.5,
      }}
    >
      <header style={{ backgroundColor: "#1f3a5f", padding: "12px 20px" }}>
        <nav>
          <Link href="/" style={{ color: "#ffffff", marginRight: "20px", textDecoration: "none" }}>Home</Link>
          <Link href="/about" style={{ color: "#ffffff", marginRight: "20px", textDecoration: "none" }}>About</Link>
          <Link href="/hobbies" style={{ color: "#ffffff", marginRight: "20px", textDecoration: "none" }}>Hobbies</Link>
          <Link href="/gallery" style={{ color: "#ffffff", marginRight: "20px", textDecoration: "none" }}>Gallery</Link>
          <Link href="/contact" style={{ color: "#ffffff", textDecoration: "none" }}>Contact</Link>
        </nav>
      </header>

      <main
        style={{
          flex: 1,
          width: "100%",
          maxWidth: "560px",
          margin: "0 auto",
          padding: "40px 16px",
          boxSizing: "border-box",
        }}
      >
        <section
          style={{
            textAlign: "center",
            backgroundColor: "#ffffff",
            border: "1px solid #cccccc",
            padding: "32px 20px",
          }}
        >
          <img
            src="/images/fotoprofile.jpg"
            alt="Foto Zagar tersenyum di pantai pada malam hari"
            width={150}
            height={150}
            style={{
              display: "block",
              margin: "0 auto 16px",
              width: "150px",
              height: "150px",
              objectFit: "cover",
              border: "1px solid #cccccc",
            }}
          />
          <h1 style={{ fontSize: "28px", fontWeight: "bold", margin: "0 0 4px" }}>Zagar Nashrullah</h1>
          <p style={{ margin: "0 0 12px", color: "#555555" }}>Mahasiswa Informatika</p>
          <p style={{ margin: "0 0 20px" }}>HAAAAIII!!!</p>
          <Link
            href="/about"
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
            style={{
              display: "inline-block",
              padding: "8px 20px",
              border: "1px solid #1f3a5f",
              borderRadius: "8px",
              color: hover ? "#ffffff" : "#1f3a5f",
              backgroundColor: hover ? "#1f3a5f" : "transparent",
              textDecoration: "none",
            }}
          >
            Kenali saya lebih jauh
          </Link>
        </section>
      </main>

      <footer
        style={{
          textAlign: "center",
          padding: "16px",
          borderTop: "1px solid #cccccc",
          color: "#555555",
          fontSize: "14px",
        }}
      >
        <p style={{ margin: 0 }}>&copy; 2026 Zagar</p>
      </footer>
    </div>
  );
}