import novel from "../../assets/novel.png";
import elektronik from "../../assets/elektronik.png";
import alat from "../../assets/alat.png";

export default function Content() {
  const items = [
    {
      name: "novel",
      image: novel,
      function:
        "rekreatif (hiburan), didaktif (mendidik), moralitas (penanaman nilai baik-buruk), religius (ajaran agama), dan estetis (keindahan bahasa/cerita).",
    },
    {
      name: "elektronik",
      image: elektronik,
      function:
        "Elektronik digunakan untuk mempermudah pekerjaan manusia, memberikan hiburan, membantu komunikasi, serta meningkatkan efisiensi dan keamanan dalam kehidupan sehari-hari.",
    },
      {
      name: "Alat Tulis",
      image: alat ,
      function:
        "mencatat informasi, mendukung administrasi perkantoran, menunjang kegiatan belajar-mengajar, serta memfasilitasi ekspresi kreatif seperti menggambar dan merancang.",
    },
  ];

  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 Barang
      </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>
  );
}