import Link from "next/link";

export default function About() {
  return (
    <div className="about-page page">
      {/* internal CSS: satu blok style yang mengatur background dan font halaman, judul, dan badge, memakai selector class dan id */}
      <style>{`
        .about-page {
          background-color: #f5f5f5;
          color: #222222;
          font-family: Arial, sans-serif;
        }

        #judul-bio {
          font-size: 28px;
          font-weight: bold;
          margin: 0 0 8px;
        }

        .about-page h2 {
          font-size: 20px;
          font-weight: bold;
          margin: 0 0 12px;
        }

        .badge-prodi {
          display: inline-block;
          background-color: #1f3a5f;
          color: #ffffff;
          padding: 2px 10px;
          font-size: 14px;
        }
      `}</style>

      {/* external CSS: file styles.css mengatur navbar, wrapper layout (main), kotak, tabel, dan footer */}
      <link rel="stylesheet" href="/styles.css" />

      <header>
        <nav className="nav-bar">
          <Link href="/">Home</Link>
          <Link href="/about">About</Link>
          <Link href="/hobbies">Hobbies</Link>
          <Link href="/gallery">Gallery</Link>
          <Link href="/contact">Contact</Link>
        </nav>
      </header>

      <main className="main-wrapper">
        <section className="box">
          <h1 id="judul-bio">Haloo👋</h1>
          <h2>Bio</h2>
          <p>Saya Zagar, mahasiswa Informatika semester 3. Saya suka bermain game,menonton film, dan mendengarkan musik pop rock.</p>
          {/* badge program studi, tampilannya diatur oleh internal CSS (class badge-prodi) */}
          <span className="badge-prodi">Mahasiswa Informatika</span>
        </section>

        <section className="box">
          <h2>Pendidikan</h2>
          {/* tabel pendidikan, tampilannya diatur oleh external CSS (class edu-table) */}
          <table className="edu-table">
            <thead>
              <tr>
                <th>Institusi</th>
                <th>Program Studi</th>
                <th>Semester</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Universitas Katolik Widya Mandala Surabaya</td>
                <td>Informatika</td>
                <td>3</td>
              </tr>
            </tbody>
          </table>
        </section>

        <section className="box">
          <h2>Kutipan Favorit</h2>
          {/* inline CSS: atribut style langsung pada elemen kutipan */}
          <blockquote
            style={{
              margin: 0,
              paddingLeft: "12px",
              borderLeft: "4px solid #1f3a5f",
              fontStyle: "italic",
              color: "#444444",
            }}
          >
            HAII HALOO👋
          </blockquote>
        </section>
      </main>

      <footer className="footer-bar">
        <p>&copy; 2026 Zagar</p>
      </footer>
    </div>
  );
}