"use client";

import { useTranslations } from "next-intl";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { FaRegStar } from "react-icons/fa";

export default function HeroStats() {
  const t = useTranslations("heroSection.stats");

  return (
    <div className="px-5 md:px-10 lg:px-20 pb-30">
      <div className="bg-primary-48 rounded-[16px] p-2.5 md:p-6 lg:max-w-[50%] w-full flex justify-between items-center">
        <div className="flex flex-col items-center justify-center gap-6">
          <div className="flex flex-col items-center justify-center gap-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="22"
              viewBox="0 0 20 22"
              fill="none"
            >
              <path
                d="M4.944 10.9452C4.944 9.62597 5.1453 8.48354 5.5475 7.51766L5.63049 7.32692C6.05954 6.38456 6.65079 5.65055 7.40472 5.12583L7.55781 5.02377C8.38499 4.47559 9.35295 4.20144 10.4617 4.20139C11.6585 4.20139 12.6533 4.51206 13.4453 5.13336C14.2043 5.69871 14.6854 6.47287 14.8876 7.45576L14.9239 7.6557H18.9896C18.8576 6.40491 18.4474 5.29856 17.7584 4.33692L17.6166 4.14701C16.907 3.1875 15.9812 2.42035 14.8384 1.84637L14.6072 1.73427C13.4521 1.186 12.15 0.894294 10.701 0.860022L10.4093 0.856676C8.50844 0.856676 6.83608 1.28616 5.3928 2.14504L5.12932 2.31068C3.82874 3.15559 2.79841 4.29729 2.03932 5.73655C1.22971 7.25336 0.825107 9.017 0.825075 11.0272C0.825075 13.0558 1.22148 14.8286 2.01354 16.3454C2.82314 17.8622 3.96683 19.0411 5.44517 19.8817C6.83133 20.6699 8.47312 21.0891 10.3698 21.1383L10.7526 21.1433C12.5347 21.1433 14.0694 20.9024 15.3565 20.4205L15.6103 20.3209C16.8811 19.7898 18.0048 19.0413 18.9815 18.0764L19.1749 17.8806V10.0676H10.9105V13.3027H15.1092V16.5278C14.7378 16.908 14.246 17.214 13.6306 17.4422L13.3454 17.5384C12.6639 17.7483 11.8611 17.8538 10.9371 17.8538V16.9971C11.9291 16.9971 12.7273 16.8676 13.3527 16.6357C13.7372 16.4931 14.0426 16.3229 14.2841 16.1363V14.1594H10.0854V9.21094H20V17.2992V18.2353L19.5085 18.7373C18.4652 19.7579 17.2673 20.552 15.9189 21.1157L15.9133 21.1174C14.4536 21.7156 12.7256 22 10.7526 22C8.58512 22 6.67371 21.5565 5.04955 20.633C3.43555 19.7153 2.17765 18.4211 1.2916 16.7612L1.28757 16.7537C0.419534 15.0912 0 13.1731 0 11.0272C3.22903e-05 8.89657 0.429533 6.98692 1.31577 5.32494C2.19601 3.656 3.41969 2.34389 4.97865 1.40465L4.98268 1.40214C6.56778 0.458859 8.38533 0 10.4093 0C12.0739 1.76269e-05 13.5915 0.311056 14.9456 0.952884C16.3064 1.58969 17.4236 2.47819 18.2717 3.62498C19.1421 4.75968 19.6533 6.07931 19.8098 7.562L19.9106 8.51238H14.2269L14.1109 7.79876C13.9689 6.92902 13.5864 6.2928 12.9643 5.82941L12.9562 5.82355L12.9482 5.81686C12.3269 5.32949 11.517 5.05807 10.4617 5.05807C9.48929 5.05812 8.67968 5.29653 8.00177 5.74575L7.99613 5.7491L7.9913 5.75328C7.31359 6.18745 6.77321 6.82153 6.3766 7.69251C5.98301 8.55699 5.76908 9.63198 5.76908 10.9452C5.76908 12.3146 5.98272 13.4373 6.37821 14.3401C6.76975 15.2157 7.32906 15.8657 8.05656 16.3203C8.7997 16.7558 9.74709 16.9971 10.9371 16.9971V17.8538L10.4585 17.8413C9.36295 17.7833 8.4223 17.522 7.63677 17.0582C6.75679 16.51 6.0881 15.7241 5.63049 14.7007C5.23011 13.7893 5.00456 12.7171 4.95448 11.484L4.944 10.9452Z"
                fill="#FEFEFE"
              />
            </svg>
            <div className="flex items-center justify-center gap-1">
              <FaRegStar className="size-5 text-white" />
              <FaRegStar className="size-5 text-white" />
              <FaRegStar className="size-5 text-white" />
            </div>
          </div>
          <h3 className="text-white font-bold text-[12px] md:text-[16px]">
            {t("rating")}
          </h3>
        </div>

        <div className="self-stretch w-px bg-primary-lighter"></div>

        <div className="flex flex-col items-center justify-center gap-6">
          <div className="flex items-center justify-center -space-x-3 md:-space-x-3">
            <Avatar className="w-10 h-10 md:w-12 md:h-12 border-2 border-white">
              <AvatarImage
                src="https://i.pravatar.cc/150?img=1"
                alt="Avatar 1"
              />
            </Avatar>
            <Avatar className="w-10 h-10 md:w-12 md:h-12 border-2 border-white">
              <AvatarImage
                src="https://i.pravatar.cc/150?img=2"
                alt="Avatar 2"
              />
            </Avatar>
            <Avatar className="w-10 h-10 md:w-12 md:h-12 border-2 border-white">
              <AvatarImage
                src="https://i.pravatar.cc/150?img=3"
                alt="Avatar 3"
              />
            </Avatar>
          </div>
          <h3 className="text-white font-bold text-[12px] md:text-[16px]">
            {t("clients")}
          </h3>
        </div>

        <div className="self-stretch w-px bg-primary-lighter"></div>

        <div className="flex flex-col items-center justify-center gap-6">
          <h3 className="text-white font-bold text-[24px] md:text-[32px]">
            98%
          </h3>
          <h3 className="text-white font-bold text-[12px] md:text-[16px]">
            {t("satisfaction")}
          </h3>
        </div>
      </div>
    </div>
  );
}