import buku from "../../../public/img/filsafat.jpg";
import kalkulator from "../../../public/img/sebuah mimpi.webp";
import matematika from "../../../public/img/matematika.jpg";

export default function Content() {
  const items = [
    {
      name: "Buku",
      image: buku,
      function:
        "Digunakan sebagai sumber belajar utama untuk pelajaran matematika, membantu siswa memahami materi, latihan soal, dan teori pembelajaran.",
    },
    {
      name: "Kalkulator",
      image: kalkulator,
      function:
        "Berfungsi sebagai alat bantu perhitungan cepat untuk pelajaran matematika, fisika, dan berbagai kebutuhan hitung lainnya.",
    },
      {
      name: "Matematika",
      image: matematika,
      function:
        "Berfungsi sebagai alat bantu perhitungan cepat untuk pelajaran matematika, fisika, dan berbagai kebutuhan hitung lainnya.",
    },
  ];

  return (
    <div className="space-y-8 bg-white p-6 rounded-2xl">
      <h2 className="text-3xl font-bold text-black mb-6 border-b-4 border-blue-600 pb-2">
        Barang Sekolah
      </h2>

      {items.map((item, index) => (
        <div
          key={index}
          className="bg-black text-white rounded-2xl shadow-lg p-6 flex items-center gap-8 border-l-4 border-blue-600"
        >
          {/* KIRI - PENJELASAN */}
          <div className="flex-1">
            <h3 className="text-2xl font-bold text-blue-400 mb-3">
              {item.name}
            </h3>

            <p className="text-gray-300 leading-relaxed">
              {item.function}
            </p>
          </div>

          {/* KANAN - FOTO */}
          <div className="w-72">
            <img
              src={item.image}
              alt={item.name}
              className="w-full h-56 object-cover rounded-xl shadow border-2 border-blue-500"
            />
          </div>
        </div>
      ))}
    </div>
  );
}