"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import type { CmsAboutContent } from "@/types/cms-landing";

const DEFAULT_KICKER = "About Us";
const DEFAULT_HEADLINE = "Helping you find the right Solution";
const DEFAULT_DESC =
  "PT Qudo Buana Nawakara adalah perusahaan nasional Indonesia yang berfokus pada pengembangan aplikasi...";

export default function AboutSection({
  about,
}: {
  about?: CmsAboutContent | null;
}) {
  const kicker = about?.secondary_title?.trim() || DEFAULT_KICKER;
  const headline = about?.primary_title?.trim() || DEFAULT_HEADLINE;
  const desc = about?.description?.trim() || DEFAULT_DESC;

  const media = about?.images?.[0];
  const mediaUrl = media?.media_url?.trim();
  const isVideo =
    media?.media_type?.startsWith("video") ||
    /\.(mp4|webm)(\?|$)/i.test(mediaUrl ?? "") ||
    (mediaUrl?.toLowerCase().includes("video") ?? false);

  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">
        <div className="flex justify-center">
          <div className="relative h-[640px] w-[320px]">
            <Image
              src="/image/phone.png"
              alt="App Preview"
              fill
              className="pointer-events-none z-10 object-contain"
            />

            <div className="absolute bottom-[120px] left-[25px] right-[25px] top-[120px] z-0 overflow-hidden rounded-[2rem] bg-black/5">
              {mediaUrl && isVideo ? (
                // eslint-disable-next-line jsx-a11y/media-has-caption
                <video
                  src={mediaUrl}
                  className="h-full w-full object-cover"
                  autoPlay
                  muted
                  loop
                  playsInline
                />
              ) : mediaUrl ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={mediaUrl} alt="" className="h-full w-full object-cover" />
              ) : (
                <div className="flex flex-col gap-4 p-2">
                  {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%] rounded-2xl px-4 py-3 text-sm shadow ${
                        msg.type === "user"
                          ? "self-end rounded-br-sm bg-blue-600 text-white"
                          : "self-start rounded-bl-sm bg-gray-200 text-gray-800"
                      }`}
                    >
                      {msg.text}
                    </motion.div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

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

          <h2 className="mb-6 text-4xl font-extrabold leading-tight whitespace-pre-line">
            <span className="relative inline-block">
              <span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]/40"></span>
              <span className="relative">{headline}</span>
            </span>
          </h2>

          <p className="text-sm leading-relaxed text-gray-600 whitespace-pre-line">{desc}</p>
        </div>
      </div>
    </section>
  );
}