import type { CSSProperties } from "react";
import type { Metadata } from "next";
import { NavInline } from "../components/nav";
import HtmlComment from "../components/html-comment";
import { profile } from "../lib/data";

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

// halaman ini WAJIB inline css saja: semua gaya memakai atribut style
const s: Record<string, CSSProperties> = {
  page: { maxWidth: "960px", margin: "0 auto", padding: "24px", fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif", color: "#1c2b33", background: "#f3f7f7", borderRadius: "20px", minHeight: "90vh" },
  brand: { margin: 0, fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.25rem", fontWeight: 700, color: "#0f4c5c" },
  hero: { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "32px", padding: "32px 0" },
  photo: { width: "280px", maxWidth: "100%", height: "auto", borderRadius: "16px", border: "6px solid #e09f3e" },
  heroText: { flex: "1 1 300px" },
  h1: { margin: "0 0 12px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "2.6rem", lineHeight: 1.15, color: "#0f4c5c" },
  tagline: { margin: "0 0 16px", fontSize: "1.2rem", lineHeight: 1.5 },
  section: { padding: "24px", background: "#ffffff", borderRadius: "12px", borderLeft: "6px solid #0f4c5c" },
  h2: { margin: "0 0 8px", fontFamily: "Georgia, 'Times New Roman', serif", fontSize: "1.5rem", color: "#0f4c5c" },
  p: { margin: 0, lineHeight: 1.7, maxWidth: "65ch" },
  footer: { marginTop: "32px", paddingTop: "16px", borderTop: "1px solid #c9d8db", fontSize: "0.9rem", color: "#4a5d66" },
};

export default function HomePage() {
  return (
    <div style={s.page}>
      <HtmlComment text="inline css: seluruh halaman ini distyle lewat atribut style sesuai aturan index.html" />
      <header>
        <p style={s.brand}>{profile.nickname}</p>
        <NavInline current="/" />
      </header>

      <main>
        <section style={s.hero}>
          <img src={profile.photo} alt={profile.photoAlt} width="280" height="210" style={s.photo} />
          <div style={s.heroText}>
            <h1 style={s.h1}>Halo, saya {profile.name}</h1>
            <p style={s.tagline}>{profile.tagline}</p>
          </div>
        </section>

        <section style={s.section}>
          <h2 style={s.h2}>Sekilas tentang saya</h2>
          <p style={s.p}>{profile.intro}</p>
        </section>
      </main>

      <footer style={s.footer}>
        <p style={{ margin: 0 }}>
          &copy; {profile.year} {profile.name}. Dibuat di {profile.city}.
        </p>
      </footer>
    </div>
  );
}