import Image from 'next/image';

export default function HobbiesPage() {
  const hobbies = [
    {
      title: 'KA Argo Bromo Anggrek',
      category: 'Kereta Favorit #1',
      desc: 'Salah satu kereta api favorit saya yang melayani relasi Surabaya Pasarturi - Gambir. Saya suka mengabadikan perjalanan, lokomotif, rangkaian kereta, serta kemewahan fasilitas kereta eksekutif ini.',
      img: '/images/Ka.1-2-3-4 Argo Bromo Anggrek.jpg',
    },
    {
      title: 'KA Argo Semeru',
      category: 'Kereta Favorit #2',
      desc: 'Kereta api eksekutif favorit dengan relasi Surabaya Gubeng - Gambir. Menjadi salah satu objek menarik untuk konten YouTube, mulai dari kedatangan kereta hingga suasana perjalanan.',
      img: '/images/Ka.5-6 Argo Semeru.jpg',
    },
    {
      title: 'KA Bima',
      category: 'Kereta Favorit #3',
      desc: 'Kereta api legendaris yang melayani perjalanan Surabaya Gubeng - Gambir. Saya tertarik mengabadikan perjalanan, sejarah, dan pengalaman menggunakan kereta api ini.',
      img: '/images/Ka.7-8 Bima Argo Bima.jpg',
    },
  ];

  return (
    <section className="space-y-8">

      {/* Header */}
      <div className="space-y-2">
        <h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">
          Hobi Saya - Railfans Indonesia
        </h1>

        <p className="text-zinc-400">
          Mengenal dunia perkeretaapian Indonesia melalui
          fotografi, videografi, trainspotting, dan konten YouTube.
        </p>
      </div>

      {/* Hobbies Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        {hobbies.map((hobby, index) => (
          <div
            key={index}
            className="bg-zinc-900 border border-zinc-800
            rounded-xl p-4 space-y-4 hover:border-red-600
            transition duration-300"
          >
            {/* Image */}
            <div className="h-48 relative rounded-lg overflow-hidden">
              <Image
                src={hobby.img}
                alt={hobby.title}
                fill
                sizes="(max-width: 768px) 100vw,
                (max-width: 1200px) 50vw, 33vw"
                className="object-cover hover:scale-105
                transition duration-500"
              />
            </div>

            {/* Category */}
            <span className="text-xs font-semibold
            text-red-400 uppercase tracking-wider">
              {hobby.category}
            </span>

            {/* Title */}
            <h2 className="text-xl font-semibold text-white">
              {hobby.title}
            </h2>

            {/* Description */}
            <p className="text-zinc-400 text-sm leading-relaxed">
              {hobby.desc}
            </p>
          </div>
        ))}

      </div>

      {/* YouTube Creator Section */}
      <div className="bg-zinc-900 border border-zinc-800
      rounded-xl p-6 space-y-3">

        <h2 className="text-2xl font-bold text-white">
          My YouTube Railway Channel
        </h2>

        <p className="text-zinc-400">
          Saya ingin mengembangkan channel YouTube yang
          berisi dokumentasi kereta api Indonesia, khususnya
          kereta api favorit rute Surabaya - Jakarta.
        </p>

        <ul className="list-disc list-inside text-zinc-400 space-y-2">
          <li>Dokumentasi Argo Bromo Anggrek.</li>
          <li>Review dan perjalanan Argo Semeru.</li>
          <li>Dokumentasi KA Bima.</li>
          <li>Trainspotting dan railway photography.</li>
          <li>Review fasilitas kereta api eksekutif.</li>
          <li>Vlog perjalanan kereta api jarak jauh.</li>
        </ul>
      </div>

      {/* Motto */}
      <div className="border-l-4 border-red-600 pl-4 py-2">
        <h2 className="text-lg font-semibold text-white">
          Motto Seorang Railfans
        </h2>

        <p className="text-zinc-400 italic">
          "Setiap Kereta Punya Cerita, Setiap Perjalanan
          Punya Kenangan. Bangga Menjadi Bagian dari
          Perkeretaapian Indonesia!"
        </p>
      </div>

    </section>
  );
}