import { StaticPages } from "@/interfaces/types";
import MediaWithFallback from "@/shared/MediaWithFallback";
import { getTranslations } from "next-intl/server";

export default async function HomeAboutus({
  about_us,
}: {
  about_us: StaticPages;
}) {
  const t = await getTranslations();
  return (
    <section className="py-12 relative overflow-hidden bg-gradient-to-br from-white via-white to-primary-light/20">
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div
          className="absolute top-20 left-10 w-32 h-32 rounded-full bg-primary/5 blur-3xl"
          style={{ transform: "translateY(5.61637px) scale(1.03744)" }}
        ></div>
        <div
          className="absolute top-40 right-20 w-40 h-40 rounded-full bg-accent/10 blur-3xl"
          style={{ transform: "translateY(-15.9096px) scale(1.11932)" }}
        ></div>
        <div
          className="absolute bottom-20 left-1/3 w-36 h-36 rounded-full bg-primary/8 blur-3xl"
          style={{ transform: "translateY(8.29859px) scale(1.04979)" }}
        ></div>
        <div className="absolute top-10 right-10 w-3 h-3 rounded-full bg-primary/20"></div>
        <div className="absolute bottom-32 left-20 w-2 h-2 rounded-full bg-accent/30"></div>
        <div className="absolute top-1/2 right-1/4 w-4 h-4 rounded-full bg-primary/15"></div>
      </div>
      <div className="container relative z-10">
        <div className="text-center mb-16 max-w-3xl mx-auto">
          <div className="flex items-center justify-center gap-3 mb-6">
            <div className="w-12 h-[2px] bg-gradient-to-r from-transparent to-primary/50 rounded-full"></div>
            <MediaWithFallback
              src={about_us?.image}
              alt={about_us?.title}
              className="size-12"
            />
            <div className="w-12 h-[2px] bg-gradient-to-l from-transparent to-primary/50 rounded-full"></div>
          </div>
          <h2 className="text-3xl md:text-[44px] mb-6 text-text-primary font-semibold leading-[1.2]">
            {about_us?.title}
          </h2>
          <p className="text-lg text-text-secondary leading-relaxed">
            {about_us?.content}
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
          {about_us?.sub_sections?.map((sub_section, index) => (
            <div key={index} className="group relative">
              <div className="relative group-hover:-translate-y-4 duration-300 h-full bg-gradient-to-br from-rose-50 to-pink-50 backdrop-blur-sm rounded-3xl p-8 shadow-lg hover:shadow-primary/20 hover:shadow-2xl transition-all duration-500 border border-white/60">
                <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-white/40 to-transparent rounded-bl-[100px] rounded-tr-3xl"></div>
                <div className="group-hover:scale-110 transition-all duration-300 relative inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-primary/10 to-primary/20 rounded-full mb-6 shadow-lg">
                  <div className="absolute inset-0 rounded-full bg-white/30 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  {/* <span className="text-4xl relative z-10 ">🌸</span> */}
                  <MediaWithFallback
                    src={sub_section?.image}
                    alt={sub_section?.key}
                    className="size-20"
                  />
                  <div
                    className="absolute inset-0 border-2 border-dashed border-primary/30 rounded-full animate-spin duration-800"
                    style={{ transform: "rotate(338.4deg)" }}
                  ></div>
                </div>
                <div className="relative z-10">
                  <h3 className="text-xl md:text-2xl mb-3 text-text-primary group-hover:text-primary transition-colors duration-300">
                    {sub_section?.key}
                  </h3>
                  <p className="text-text-secondary font-normal text-sm leading-relaxed">
                    {sub_section?.value}
                  </p>
                </div>
                <div
                  className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent rounded-3xl"
                  style={{ opacity: 0, transform: "translateX(-100%)" }}
                ></div>
                <div className="absolute bottom-4 left-4 w-8 h-8 border-2 border-primary/10 rounded-full"></div>
                <div className="absolute bottom-6 left-6 w-4 h-4 border-2 border-primary/20 rounded-full"></div>
              </div>
            </div>
          ))}
        </div>
        <div className="text-center mt-16">
          <p className="text-text-secondary italic">
            {t("Text.home_aboutus_quote")}
          </p>
          <div className="flex items-center justify-center gap-2 mt-4">
            <span className="text-sm text-primary">♥</span>
            <span className="text-sm text-primary">♥</span>
            <span className="text-sm text-primary">♥</span>
          </div>
        </div>
      </div>
    </section>
  );
}