import { useTranslations } from "next-intl";
import Image from "next/image";

export function Story() {
  const t = useTranslations();
  return (
    <div className="pb-0 relative z-10 max-[350px]:pb-30 ">
      <div className="max-w-260 mx-auto px-4">
        <section className="relative -top-30 rounded-xl w-full lg:h-[70vh] h-[80vh] min-h-150 sm:overflow-hidden shadow-2xl flex flex-col items-start justify-between">
          {/* Background Image */}
          <div
            className="absolute inset-0 z-0 rounded-xl"
            style={{
              backgroundImage: "url(/images/img13.jpg)",
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}
          />

          {/* Gradient Overlay */}
          <div
            className="absolute inset-0 z-10 rounded-xl"
            style={{
              background: `linear-gradient(to bottom right, black 5%, transparent 70%, transparent 90%)`,
            }}
          />

          {/* Content */}
          <div className="relative z-20 p-8 lg:p-12 max-w-130">
            <h2 className="uppercase font-unbounded text-white text-4xl lg:text-5xl font-bold mb-6">
              {t("about.story.title")}
            </h2>
            <p className="font-almarai text-gray-300 mb-4">
              {t("about.story.description")}
            </p>
            <button className="font-almarai text-white flex items-center gap-2 hover:text-red-500 transition">
              {t("about.story.readMore")}
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </button>
          </div>

          {/* bottom cards */}
          <div className="flex max-md:flex-col items-end justify-center md:gap-10 gap-5 z-20 relative bottom-0 mx-auto max-md:pb-5 max-sm:px-2">
            <div
              className="flex sm:flex-row flex-col sm:items-center items-start 
            md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-7 p-2 bg-linear-to-br 
            from-[#f21b1b] to-[#830909] sm:gap-5 gap-2"
            >
              <span className="sm:rounded-xl rounded-lg bg-black sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
                <Image
                  src="/images/about/fireforce-vision.png"
                  alt="image icon"
                  width={100}
                  height={100}
                  className="object-cover"
                />
              </span>
              <div className="space-y-1 text-white">
                <h2 className="font-unbounded text-xl font-semibold">
                  {t("about.story.vision.title")}
                </h2>
                <p className="font-almarai">
                  {t("about.story.vision.description")}
                </p>
              </div>
            </div>
            <div className="flex sm:flex-row flex-col sm:items-center items-start md:rounded-t-xl max-md:rounded-xl max-w-md w-full sm:p-4 p-2 bg-black sm:gap-5 gap-2">
              <span className="sm:rounded-xl rounded-lg bg-[#1e1d1c] sm:p-3 p-1 max-sm:w-15 max-sm:h-15">
                <Image
                  src="/images/about/fireforce-mission.png"
                  alt="image icon"
                  width={100}
                  height={100}
                  className=""
                />
              </span>
              <div className="space-y-1 text-white">
                <h2 className="font-unbounded text-xl font-semibold">
                  {t("about.story.mission.title")}
                </h2>
                <p className="font-almarai">
                  {t("about.story.mission.description")}
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}