"use client";

import Image from "next/image";
import { motion } from "framer-motion";

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" },
  ];

  const messages = [
    { id: 1, text: "Dimana posisi Ayah saya sekarang?", type: "user" },
    {
      id: 2,
      text: "Bapak Ahmad terdeteksi di Tenda Maktab 45, Mina.",
      type: "bot",
    },
    { id: 3, text: "Apakah ada berita cuaca hari ini?", type: "user" },
    {
      id: 4,
      text: "Makkah saat ini cerah, suhu 38°. Kemenag menghimbau jamaah untuk minum air tiap 1 jam.",
      type: "bot",
    },
  ];

  return (
    <section className="relative bg-[#f7f0e3] py-24">
      <div className="container mx-auto grid grid-cols-1 items-center gap-16 px-6 md:grid-cols-2">
        {/* PHONE WRAPPER */}
        <div className="flex justify-center">
          <div className="relative w-[320px] h-[640px]">
            {/* PHONE IMAGE */}
            <Image
              src="/image/phone.png"
              alt="App Preview"
              fill
              className="object-contain z-10 pointer-events-none"
            />

            {/* CHAT AREA */}
            <div className="absolute top-[120px] left-[25px] right-[25px] bottom-[120px] overflow-hidden z-0">
              <div className="flex flex-col gap-4">
                {messages.map((msg, index) => (
                  <motion.div
                    key={msg.id}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 1.2 }}
                    className={`max-w-[80%] px-4 py-3 rounded-2xl text-sm shadow ${
                      msg.type === "user"
                        ? "bg-blue-600 text-white self-end rounded-br-sm"
                        : "bg-gray-200 text-gray-800 self-start rounded-bl-sm"
                    }`}
                  >
                    {msg.text}
                  </motion.div>
                ))}
              </div>
            </div>
          </div>
        </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...
          </p>
        </div>
      </div>
    </section>
  );
}