export default function AboutPage() {
  return (
    <section className="space-y-8">
      <h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">
        About Me - Pecinta Kereta Api
      </h1>

      <div className="space-y-4 text-zinc-300">
        <p>
          Halo! Saya adalah seorang pecinta kereta api Indonesia,
          khususnya kereta api kelas eksekutif yang melayani
          perjalanan Surabaya - Jakarta.
        </p>

        <p>
          Saya sangat menyukai dunia perkeretaapian Indonesia,
          mulai dari lokomotif, rangkaian kereta, fasilitas
          perjalanan, stasiun, hingga perkembangan teknologi
          transportasi kereta api.
        </p>

        {/* Kereta Api Favorit */}
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-white">
            Kereta Api Favorit Surabaya - Jakarta
          </h2>

          <ul className="list-disc list-inside text-zinc-400 space-y-2">
            <li>
              <strong className="text-white">
                KA 1,2,3,4 Argo Bromo Anggrek
              </strong>
              {" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 2 yang melayani
              perjalanan Surabaya Pasarturi - Jakarta Gambir via Semarang Tawang.
            </li>

            <li>
              <strong className="text-white">
                KA 5-6 Argo Semeru
              </strong>
              {" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 1 relasi
              Surabaya Gubeng - Jakarta Gambir via Yogyakarta.
            </li>

            <li>
              <strong className="text-white">
                KA 7-8 Bima
              </strong>
              {" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 1 dengan
              perjalanan Surabaya Gubeng - Jakarta Gambir via Yogyakarta.
            </li>
          </ul>
        </div>

        {/* Kegiatan Favorit */}
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-white">
            Kegiatan Favorit
          </h2>

          <ol className="list-decimal list-inside text-zinc-400 space-y-1">
            <li>Menonton perjalanan kereta api.</li>
            <li>Berburu foto dan video kereta api (Trainspotting).</li>
            <li>Mengoleksi informasi jadwal perjalanan kereta api.</li>
            <li>Mencoba perjalanan kereta api jarak jauh.</li>
            <li>Mengikuti perkembangan KAI Indonesia.</li>
          </ol>
        </div>

        {/* Tabel Kereta Api */}
        <div className="space-y-2 pt-4">
          <h2 className="text-xl font-semibold text-white">
            Daftar Kereta Api Favorit
          </h2>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse border border-zinc-800">
              <thead>
                <tr className="bg-zinc-900 text-white">
                  <th className="border border-zinc-800 px-4 py-2">
                    No.
                  </th>
                  <th className="border border-zinc-800 px-4 py-2">
                    Nama Kereta
                  </th>
                  <th className="border border-zinc-800 px-4 py-2">
                    Relasi
                  </th>
                  <th className="border border-zinc-800 px-4 py-2">
                    Kelas
                  </th>
                </tr>
              </thead>

              <tbody className="text-zinc-400">
                <tr>
                  <td className="border border-zinc-800 px-4 py-2">1</td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Argo Bromo Anggrek
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Surabaya Pasarturi - Jakarta Gambir via Semarang Tawang
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Eksekutif & Compartment Suites Batch 2
                  </td>
                </tr>

                <tr>
                  <td className="border border-zinc-800 px-4 py-2">2</td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Argo Semeru
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Surabaya Gubeng - Jakarta Gambir via Yogyakarta
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Eksekutif & Compartment Suites Batch 1 
                  </td>
                </tr>

                <tr>
                  <td className="border border-zinc-800 px-4 py-2">3</td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Bima
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Surabaya Gubeng - Jakarta Gambir via Yogyakarta
                  </td>
                  <td className="border border-zinc-800 px-4 py-2">
                    Eksekutif & Compartment Suites Batch 1
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        {/* Semboyan */}
        <div className="pt-4 space-y-2">
          <h2 className="text-xl font-semibold text-white">
            Motto Pecinta Kereta Api
          </h2>

          <blockquote className="border-l-4 border-red-600 pl-4 italic text-zinc-400">
            "Kereta Api Bukan Sekadar Transportasi,
            Tetapi Juga Perjalanan, Pengalaman, dan Kebanggaan
            Perkeretaapian Indonesia."
          </blockquote>
        </div>

        {/* External Link */}
        <div className="pt-4">
          <p className="text-sm">
            Informasi resmi perkeretaapian Indonesia:{" "}
            <a
              href="https://www.kai.id/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-400 underline hover:text-blue-300"
            >
              PT Kereta Api Indonesia (Persero)
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}