import { Link } from "@/i18n/routing";
import { cva, type VariantProps } from "class-variance-authority";
import { useTranslations } from "next-intl";
import Image, { type StaticImageData } from "next/image";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const defaultArrow = "/images/who-we-are/arrow-right.svg";

const layoutVariants = cva(
  "flex w-full max-w-6xl flex-col items-center justify-between gap-10 sm:gap-12 lg:gap-16",
  {
    variants: {
      imagePlacement: {
        left: "lg:flex-row",
        right: "lg:flex-row-reverse",
      },
    },
    defaultVariants: {
      imagePlacement: "left",
    },
  }
);

type WhoWeAreProps = VariantProps<typeof layoutVariants> & {
  eyebrow?: string;
  title?: string;
  description?: string;
  highlight?: string;
  bullets?: string[];
  outro?: string;
  ctaLabel?: string;
  ctaHref?: string;
  image?: StaticImageData | string;
  imageAlt?: string;
  className?: string;
};

export default function WhoWeAre({
  imagePlacement,
  className,
}: WhoWeAreProps) {
  const t = useTranslations("whoWeAre");
  const tCommon = useTranslations("common");

  const bullets = [
    t("bullet1"),
    t("bullet2"),
    t("bullet3"),
  ];

  return (
    <section
      className={cn("w-full bg-white py-14 sm:py-16 md:py-20", className)}
    >
      <div className="mx-auto flex max-w-[1280px] flex-col gap-10 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-[120px]">
        <div className={layoutVariants({ imagePlacement })}>
          <div className="w-full max-w-[620px] lg:max-w-[520px] text-start flex flex-col items-start gap-4 sm:gap-5">
            <div className="flex flex-col gap-2 items-start w-full">
              <p className="text-[15px] sm:text-[16px] font-semibold text-[#F9A21B]">
                {t("eyebrow")}
              </p>
              <h2 className="text-3xl sm:text-4xl md:text-[40px] font-bold leading-[1.35] text-[#202020]">
                {t("title")}
              </h2>
            </div>

            <div className="flex flex-col gap-4 sm:gap-5 items-start text-start">
              <p className="text-base sm:text-[17px] leading-[1.65] text-[#646464]">
                {t("description")}
              </p>

              <p className="text-base sm:text-[17px] font-medium leading-[1.65] text-primary">
                {t("highlight")}
              </p>

              <ul className="flex flex-col gap-3 sm:gap-3.5 w-full">
                {bullets.map((item) => (
                  <li
                    key={item}
                    className="flex flex-row text-start items-start justify-start gap-2"
                  >
                    <span className="mt-1 inline-flex h-4 w-1.5 items-center justify-center rounded-full bg-primary shrink-0" />
                    <p className="flex-1 text-base sm:text-[17px] font-medium leading-[1.65] text-[#202020]">
                      {item}
                    </p>
                  </li>
                ))}
              </ul>

              <p className="text-base sm:text-[17px] leading-[1.65] text-[#646464]">
                {t("outro")}
              </p>
            </div>

            <Link
              href="/about-us"
              className="mt-2 flex w-full sm:w-auto justify-start"
            >
              <Button className="h-12 sm:h-[48px] rounded-xl border border-white bg-primary text-white px-6 sm:px-7 text-sm sm:text-base font-semibold gap-2 shadow-sm hover:bg-primary/90">
                <span>{tCommon("learnMore")}</span>
                <Image
                  src={defaultArrow}
                  alt=""
                  className="size-5 rtl:rotate-180"
                  width={20}
                  height={20}
                />
              </Button>
            </Link>
          </div>

          <div className="relative w-full max-w-[620px]">
            <div className="relative aspect-[567/414]">
              <Image
                src={"/images/who-we-are/Group.svg"}
                alt={t("imageAlt")}
                fill
                priority
                sizes="(min-width: 1280px) 620px, (min-width: 1024px) 560px, (min-width: 768px) 640px, 100vw"
                className="object-contain"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}