import Image from "next/image";

export default function AboutSection() {
  const socials = [
    { name: "Facebook", icon: "/image/fb.png" },
    { name: "Instagram", icon: "/image/ig.png" },
    { name: "X", icon: "/image/x.png" },
    { name: "Youtube", icon: "/image/yt.png" },
    { name: "Tiktok", icon: "/image/tt.png" },
  ];

  return (
    <section className="relative bg-[#f7f0e3] py-24">
      {/* TOP CENTER CONTENT */}
      <div className="absolute left-1/2 top-8 flex -translate-x-1/2 flex-col items-center gap-6">
        <p className="text-sm font-semibold uppercase tracking-widest text-gray-400">
          Manage All your channels from Multipool
        </p>

        {/* SOCIAL ICONS */}
        <div className="flex gap-6">
          {socials.map((item) => (
            <div
              key={item.name}
              className="flex  items-center justify-center rounded-full"
            >
              <Image src={item.icon} alt={item.name} width={40} height={40} />
            </div>
          ))}
        </div>
      </div>

      <div className="container mx-auto grid grid-cols-1 items-center gap-16 px-6 md:grid-cols-2">
        {/* PHONE IMAGE */}
        <div className="flex justify-center">
          <Image
            src="/image/phone.png"
            alt="App Preview"
            width={320}
            height={640}
            className="object-contain"
          />
        </div>

        {/* TEXT CONTENT */}
        <div className="max-w-xl">
          <p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
            About Us
          </p>

          <h2 className="mb-6 text-4xl font-extrabold leading-tight">
            Helping you find the right{" "}
            <span className="relative inline-block">
              <span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]/40"></span>
              <span className="relative">Solution</span>
            </span>
          </h2>

          <p className="text-sm leading-relaxed text-gray-600">
            PT Qudo Buana Nawakara adalah perusahaan nasional Indonesia yang
            berfokus pada pengembangan aplikasi untuk mendukung kegiatan
            reputasi manajemen institusi, organisasi dan publik figur. Dengan
            dukungan teknologi otomatisasi dan kecerdasan buatan (AI) untuk
            mengoptimalkan proses. Perusahaan didukung oleh team SDM nasional
            yang sudah berpengalaman serta memiliki sertifikasi internasional,
            untuk memastikan produk yang dihasilkan handal dan berkualitas
            tinggi. PT Qudo Buana Nawakara berkantor pusat di Jakarta dengan
            support office di Bandung, Indonesia – India – USA – Oman.
          </p>
        </div>
      </div>
    </section>
  );
}