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

export default function AboutPage() {
  return (
    <>
      <header className="site-header">
        <h1 className="page-title">About Me</h1>
        <p className="tagline">Sedikit cerita tentang siapa saya.</p>
        <nav className="site-nav">
          <ul>
            {navLinks.map((link) => (
              <li key={link.href}>
                <Link href={link.href} className={link.href === "/about" ? "active" : undefined}>
                  {link.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </header>

      <main className="about-wrapper">
        <section id="bio">
          <h2 className="section-title">Bio</h2>
          <p>
            Nama saya Yovan Budianto Tanujaya, biasa dipanggil Yovan. Saya lahir
            di Surabaya dan sekarang tinggal di Surabaya. Saya sedang belajar
            Informatika dan tertarik pada pengembangan web.
          </p>
          <p>
            <span className="inline-block bg-indigo-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
              Mahasiswa Informatika
            </span>{" "}
            <span className="inline-block bg-emerald-600 text-white text-sm font-semibold px-3 py-1 rounded-full">
              Web Beginner
            </span>
          </p>
        </section>

        <section id="education">
          <h2 className="section-title">Pendidikan</h2>
          {/* ol dipakai karena urutan jenjang pendidikan itu penting (kronologis) */}
          <ol className="list-decimal pl-6">
            <li>SDK Santo Yusup Karangpilang (2013 - 2019)</li>
            <li>SMPK Angelus Custos 2 (2019 - 2022)</li>
            <li>SMA Santo Yusup Karangpilang (2022 - 2025)</li>
            <li>S1 Informatika, Universitas Katolik Widya Mandala Surabaya (2025 - sekarang)</li>
          </ol>
        </section>

        <section id="skills">
          <h2 className="section-title">Skill</h2>
          <h3 className="text-lg font-semibold mb-2">Skill yang sedang saya pelajari</h3>
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-orange-100">
                <th className="border border-stone-400 px-3 py-2 text-left">Skill</th>
                <th className="border border-stone-400 px-3 py-2 text-left">Level</th>
                <th className="border border-stone-400 px-3 py-2 text-left">Catatan</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td className="border border-stone-400 px-3 py-2">HTML</td>
                <td className="border border-stone-400 px-3 py-2">Pemula</td>
                <td className="border border-stone-400 px-3 py-2">
                  Sedang dipelajari di mata kuliah Pemrograman Web
                </td>
              </tr>
              <tr>
                <td className="border border-stone-400 px-3 py-2">CSS</td>
                <td className="border border-stone-400 px-3 py-2">Pemula</td>
                <td className="border border-stone-400 px-3 py-2">
                  Inline, internal, eksternal, dan Tailwind
                </td>
              </tr>
              <tr>
                <td className="border border-stone-400 px-3 py-2">PYTHON</td>
                <td className="border border-stone-400 px-3 py-2">Pemula</td>
                <td className="border border-stone-400 px-3 py-2">Class OOP</td>
              </tr>
            </tbody>
          </table>
          <h3 className="text-lg font-semibold mt-4 mb-2">Sifat yang menggambarkan saya</h3>
          {/* ul dipakai karena poin-poin ini tidak punya urutan */}
          <ul className="list-disc pl-6">
            <li>Rasa ingin tahu yang tinggi</li>
            <li>Suka bekerja dalam tim</li>
            <li>Sabar</li>
          </ul>
        </section>

        <section id="quote">
          <h2 className="section-title">Kutipan Favorit</h2>
          {/* inline CSS: prop style pada blockquote ini menjadi atribut style="" di HTML; inline punya prioritas tertinggi sehingga menimpa aturan lain */}
          <blockquote
            style={{
              borderLeft: "6px solid #ea580c",
              backgroundColor: "#ffedd5",
              margin: 0,
              padding: "12px 20px",
              fontStyle: "italic",
              color: "#7c2d12",
            }}
          >
            &quot;Hiduplah seperti ini hari terahkir mu.&quot;
            <footer>Jerinx</footer>
          </blockquote>
        </section>
      </main>

      <footer className="site-footer">
        <p>&copy; 2026 Yovan Budianto Tanujaya - Web Lanjut, Informatika UKWMS</p>
      </footer>
    </>
  );
}