import Image from "next/image";

export default function Header() {
  return (
    <section className=" text-white">
      {/* Bagian Atas */}
      <div className="container bg-[#B87C2C] mx-auto flex flex-col md:flex-row items-center justify-between px-6 py-10 md:py-16">
        <div className="md:w-1/2 space-y-4">
          <h1 className="text-2xl md:text-3xl font-bold leading-snug">
            Capai Audiens yang Lebih Luas dengan melakukan <br />
            <span className="text-white">Promote di CampaignPOOL</span>
          </h1>
          <p className="text-base md:text-lg opacity-90">
            Buat jangkauan lebih luas dan lebih dikenal.
          </p>
        </div>
        <div className="md:w-1/2 mt-8 md:mt-0 flex justify-center">
          <Image
            src="/h1.png"
            alt="Promote Illustration"
            width={400}
            height={300}
            className="object-contain"
          />
        </div>
      </div>

      {/* Bagian Langkah-langkah */}
      <div className="container mx-auto text-center py-10 px-4">
        <h2 className="text-2xl font-semibold text-black">
          Cara Promote di CampaignPOOL
        </h2>
        <p className="text-gray-600 mt-2">Langkah mudah untuk memasang iklan</p>

        {/* Langkah-langkah */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-10 place-items-center">
          {/* Langkah 1 */}
          <div className="p-6 w-full max-w-sm">
            <div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
              <Image
                src="/l1.png"
                alt="Langkah 1"
                width={150}
                height={100}
                className="object-contain"
              />
            </div>
            <h3 className="mt-4 font-semibold text-black text-center">
              Langkah 1
            </h3>
            <p className="text-sm text-gray-600 mt-2 text-center">
              Pilih tanggal tayang, tentukan target promote, dan unggah materi
              iklan
            </p>
          </div>

          {/* Langkah 2 */}
          <div className="p-6 w-full max-w-sm">
            <div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
              <Image
                src="/l2.png"
                alt="Langkah 2"
                width={150}
                height={100}
                className="object-contain"
              />
            </div>
            <h3 className="mt-4 font-semibold text-black text-center">
              Langkah 2
            </h3>
            <p className="text-sm text-gray-600 mt-2 text-center">
              Pemrosesan Internal dan Persetujuan
            </p>
          </div>

          {/* Langkah 3 */}
          <div className="p-6 w-full max-w-sm">
            <div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
              <Image
                src="/l3.png"
                alt="Langkah 3"
                width={150}
                height={100}
                className="object-contain"
              />
            </div>
            <h3 className="mt-4 font-semibold text-black text-center">
              Langkah 3
            </h3>
            <p className="text-sm text-gray-600 mt-2 text-center">
              Selamat! Promote Anda tayang
            </p>
          </div>

          {/* Langkah 4 (tengah bawah) */}
          <div className="md:col-span-3 flex justify-center">
            <div className="w-full max-w-sm">
              <div className="bg-gray-200 rounded-lg h-56 flex items-center justify-center">
                <Image
                  src="/l4.png"
                  alt="Langkah 4"
                  width={150}
                  height={100}
                  className="object-contain"
                />
              </div>
              <h3 className="mt-4 font-semibold text-black text-center">
                Langkah 4
              </h3>
              <p className="text-sm text-gray-600 mt-2 text-center">
                Pantau perkembangan Promote Anda
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}