"use client";

import { useEffect, useState } from "react";
import { useInView } from "react-intersection-observer";

import { useLanguage } from "@/app/context/LanguageContext";

interface CounterProps {
  end: number;
  decimal?: boolean;
  suffix?: string;
}

function AnimatedCounter({
  end,
  decimal = false,
  suffix = "",
}: CounterProps) {
  const [count, setCount] = useState(0);

  const { ref, inView } = useInView({
    triggerOnce: true,
    threshold: 0.5,
  });

  useEffect(() => {
    if (!inView) return;

    let current = 0;
    const increment = end / 120;

    const updateCounter = () => {
      current += increment;

      if (current >= end) {
        setCount(end);
      } else {
        setCount(current);
        requestAnimationFrame(updateCounter);
      }
    };

    updateCounter();
  }, [inView, end]);

  return (
    <span ref={ref}>
      {decimal ? count.toFixed(1) : Math.floor(count)}
      {suffix}
    </span>
  );
}

export default function Counter() {
  const { t } = useLanguage();

  return (
    <section className="counter-section">
      <div className="container">
        <div className="row text-center">
          <div className="col-lg-4 col-md-4">
            <div className="counter-box d-flex align-items-center">
              <div className="counter-icon">
                <svg
                  width="56"
                  height="56"
                  viewBox="0 0 56 56"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <foreignObject x="-24" y="-24" width="104" height="104"
                    ></foreignObject>
                  <g data-figma-bg-blur-radius="24">
                    <rect
                      x="0.5"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      fill="white"
                      fill-opacity="0.08"
                    />
                    <rect
                      x="0.5"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      stroke="#FCD400"
                    />
                    <g filter="url(#filter1_d_2_202)">
                      <path
                        d="M24.0625 34.506L28 32.131L31.9375 34.5373L30.9062 30.0373L34.375 27.0373L29.8125 26.631L28 22.381L26.1875 26.5998L21.625 27.006L25.0937 30.0373L24.0625 34.506V34.506M21.2188 38.4266L23.0097 30.7151L17.0266 25.5301L24.9207 24.845L28 17.5734L31.0793 24.845L38.9734 25.5301L32.9903 30.7151L34.7812 38.4266L28 34.3353L21.2188 38.4266V38.4266M28 28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873V28.7873"
                        fill="#FCD400"
                      />
                    </g>
                  </g>
                  <defs>
                    <clipPath
                      id="bgblur_0_2_202_clip_path"
                      transform="translate(24 24)"
                    >
                      <rect x="0.5" y="0.5" width="55" height="55" rx="27.5" />
                    </clipPath>
                    <filter
                      id="filter1_d_2_202"
                      x="2.02655"
                      y="2.57343"
                      width="51.9469"
                      height="50.8531"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="7.5" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0.988235 0 0 0 0 0.831373 0 0 0 0 0 0 0 0 0.3 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_2_202"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_2_202"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>

              <div className="ms-3 text-start">
                <h2>
                  <AnimatedCounter
                    end={4.7}
                    decimal
                  />★
                </h2>
                <p>{t("home.counter.averageRating", "AVERAGE RATING")}</p>
              </div>
            </div>
          </div>

          <div className="col-lg-4 col-md-4">
            <div
              className="counter-box d-flex align-items-center justify-content-start justify-content-md-center"
            >
              <div className="counter-icon">
                <svg
                  width="59"
                  height="56"
                  viewBox="0 0 59 56"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <foreignObject x="-22.6251" y="-24" width="104" height="104"
                    ></foreignObject>
                  <g data-figma-bg-blur-radius="24">
                    <rect
                      x="1.87494"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      fill="white"
                      fill-opacity="0.08"
                    />
                    <rect
                      x="1.87494"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      stroke="#FCD400"
                    />
                    <g filter="url(#filter1_d_2_211)">
                      <path
                        d="M15 34.5504V33.0264C15 32.1947 15.4343 31.5116 16.3029 30.9771C17.1715 30.4427 18.3037 30.1755 19.6995 30.1755C19.9303 30.1755 20.1626 30.1827 20.3966 30.1971C20.6306 30.2115 20.8662 30.2396 21.1033 30.2812C20.8598 30.6706 20.6791 31.0749 20.5613 31.494C20.4435 31.913 20.3846 32.3429 20.3846 32.7836V34.5504H15V34.5504M22.5 34.5504V32.8317C22.5 32.2465 22.6643 31.7115 22.9928 31.2269C23.3213 30.7423 23.7949 30.3197 24.4134 29.9591C25.032 29.5985 25.7628 29.3281 26.6057 29.1478C27.4487 28.9675 28.3702 28.8774 29.3701 28.8774C30.3894 28.8774 31.3205 28.9675 32.1634 29.1478C33.0063 29.3281 33.7371 29.5985 34.3557 29.9591C34.9743 30.3197 35.4446 30.7423 35.7667 31.2269C36.0889 31.7115 36.2499 32.2465 36.2499 32.8317V34.5504H22.5V34.5504M38.3653 34.5504V32.7872C38.3653 32.317 38.3096 31.8739 38.1982 31.458C38.0869 31.0421 37.9198 30.6498 37.6971 30.2812C37.9422 30.2396 38.1766 30.2115 38.4002 30.1971C38.6237 30.1827 38.8445 30.1755 39.0624 30.1755C40.4583 30.1755 41.5885 30.4395 42.453 30.9675C43.3176 31.4956 43.7499 32.1819 43.7499 33.0264V34.5504H38.3653V34.5504M24.4711 32.6755H34.298V32.5432C34.1698 32.0384 33.6378 31.6137 32.7019 31.2692C31.766 30.9246 30.657 30.7523 29.375 30.7523C28.0929 30.7523 26.9839 30.9246 26.048 31.2692C25.1121 31.6137 24.5865 32.0384 24.4711 32.5432V32.6755V32.6755M19.6963 28.9615C19.1071 28.9615 18.6038 28.752 18.1863 28.3331C17.7688 27.9141 17.5601 27.4105 17.5601 26.8221C17.5601 26.226 17.7696 25.7224 18.1885 25.3113C18.6075 24.9003 19.1112 24.6947 19.6995 24.6947C20.2956 24.6947 20.8012 24.9003 21.2163 25.3113C21.6314 25.7224 21.8389 26.2272 21.8389 26.8257C21.8389 27.4066 21.6336 27.9078 21.2229 28.3293C20.8122 28.7508 20.3034 28.9615 19.6963 28.9615V28.9615M39.0624 28.9615C38.4791 28.9615 37.9767 28.7508 37.5552 28.3293C37.1338 27.9078 36.923 27.4066 36.923 26.8257C36.923 26.2272 37.1338 25.7224 37.5552 25.3113C37.9767 24.9003 38.4799 24.6947 39.0648 24.6947C39.6674 24.6947 40.1742 24.9003 40.5852 25.3113C40.9963 25.7224 41.2018 26.226 41.2018 26.8221C41.2018 27.4105 40.9968 27.9141 40.5868 28.3331C40.1767 28.752 39.6686 28.9615 39.0624 28.9615V28.9615M29.3792 27.9399C28.4789 27.9399 27.7123 27.6244 27.0793 26.9934C26.4463 26.3624 26.1298 25.5962 26.1298 24.6947C26.1298 23.7753 26.4453 23.0046 27.0763 22.3826C27.7073 21.7606 28.4735 21.4496 29.375 21.4496C30.2944 21.4496 31.0651 21.7602 31.6871 22.3813C32.3091 23.0025 32.6201 23.7722 32.6201 24.6905C32.6201 25.5908 32.3095 26.3574 31.6883 26.9904C31.0672 27.6234 30.2975 27.9399 29.3792 27.9399V27.9399M29.381 26.0649C29.7632 26.0649 30.0861 25.9311 30.3497 25.6635C30.6133 25.3959 30.7452 25.0709 30.7452 24.6887C30.7452 24.3065 30.6138 23.9836 30.3512 23.72C30.0886 23.4564 29.7632 23.3245 29.375 23.3245C28.9967 23.3245 28.6738 23.4558 28.4062 23.7185C28.1386 23.9811 28.0048 24.3065 28.0048 24.6947C28.0048 25.0729 28.1386 25.3959 28.4062 25.6635C28.6738 25.9311 28.9988 26.0649 29.381 26.0649V26.0649M29.3942 32.6755V32.6755V32.6755V32.6755V32.6755V32.6755V32.6755V32.6755V32.6755M29.375 24.6947V24.6947V24.6947V24.6947V24.6947V24.6947V24.6947V24.6947V24.6947V24.6947"
                        fill="#FCD400"
                      />
                    </g>
                  </g>
                  <defs>
                    <clipPath
                      id="bgblur_0_2_211_clip_path"
                      transform="translate(22.6251 24)"
                    >
                      <rect
                        x="1.87494"
                        y="0.5"
                        width="55"
                        height="55"
                        rx="27.5"
                      />
                    </clipPath>
                    <filter
                      id="filter1_d_2_211"
                      x="0"
                      y="6.44958"
                      width="58.7499"
                      height="43.1008"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="7.5" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0.988235 0 0 0 0 0.831373 0 0 0 0 0 0 0 0 0.3 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_2_211"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_2_211"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>

              <div className="ms-3 text-start">
                <h2><AnimatedCounter
                    end={120}
                    suffix="M+"
                  /></h2>
                <p>{t("home.counter.customers", "CUSTOMERS")}</p>
              </div>
            </div>
          </div>

          <div className="col-lg-4 col-md-4">
            <div
              className="counter-box d-flex align-items-center justify-content-start justify-content-md-end"
            >
              <div className="counter-icon">
                <svg
                  width="56"
                  height="56"
                  viewBox="0 0 56 56"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <foreignObject x="-24" y="-24" width="104" height="104"
                    ></foreignObject>
                  <g data-figma-bg-blur-radius="24">
                    <rect
                      x="0.5"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      fill="white"
                      fill-opacity="0.08"
                    />
                    <rect
                      x="0.5"
                      y="0.5"
                      width="55"
                      height="55"
                      rx="27.5"
                      stroke="#FCD400"
                    />
                    <g filter="url(#filter1_d_2_220)">
                      <path
                        d="M24.4904 17.2188V15.3438H31.5096V17.2188H24.4904V17.2188M27.0625 31.0409H28.9374V24.0217H27.0625V31.0409V31.0409M28 40.6562C26.5384 40.6562 25.1634 40.3774 23.875 39.8197C22.5865 39.262 21.4599 38.5008 20.4952 37.5361C19.5304 36.5713 18.7692 35.4447 18.2115 34.1563C17.6538 32.8678 17.375 31.4928 17.375 30.0313C17.375 28.5698 17.6538 27.1948 18.2115 25.9063C18.7692 24.6178 19.5304 23.4913 20.4952 22.5265C21.4599 21.5618 22.5865 20.8006 23.875 20.2429C25.1634 19.6852 26.5384 19.4063 28 19.4063C29.2516 19.4063 30.4571 19.6187 31.6165 20.0434C32.776 20.468 33.8525 21.0762 34.8461 21.8679L36.4038 20.3102L37.721 21.6275L36.1634 23.1852C36.955 24.1787 37.5632 25.2553 37.9879 26.4147C38.4126 27.5742 38.6249 28.7797 38.6249 30.0313C38.6249 31.4928 38.3461 32.8678 37.7884 34.1563C37.2307 35.4447 36.4695 36.5713 35.5047 37.5361C34.54 38.5008 33.4134 39.262 32.1249 39.8197C30.8365 40.3774 29.4615 40.6562 28 40.6562V40.6562M28 38.7813C30.4166 38.7813 32.4791 37.9271 34.1875 36.2188C35.8958 34.5105 36.75 32.448 36.75 30.0313C36.75 27.6146 35.8958 25.5521 34.1875 23.8438C32.4791 22.1355 30.4166 21.2813 28 21.2813C25.5833 21.2813 23.5208 22.1355 21.8125 23.8438C20.1041 25.5521 19.25 27.6146 19.25 30.0313C19.25 32.448 20.1041 34.5105 21.8125 36.2188C23.5208 37.9271 25.5833 38.7813 28 38.7813V38.7813M28 30.0313V30.0313V30.0313V30.0313V30.0313V30.0313V30.0313V30.0313V30.0313V30.0313"
                        fill="#FCD400"
                      />
                    </g>
                  </g>
                  <defs>
                    <clipPath
                      id="bgblur_0_2_220_clip_path"
                      transform="translate(24 24)"
                    >
                      <rect x="0.5" y="0.5" width="55" height="55" rx="27.5" />
                    </clipPath>
                    <filter
                      id="filter1_d_2_220"
                      x="2.375"
                      y="0.343811"
                      width="51.2499"
                      height="55.3124"
                      filterUnits="userSpaceOnUse"
                      color-interpolation-filters="sRGB"
                    >
                      <feFlood flood-opacity="0" result="BackgroundImageFix" />
                      <feColorMatrix
                        in="SourceAlpha"
                        type="matrix"
                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                        result="hardAlpha"
                      />
                      <feOffset />
                      <feGaussianBlur stdDeviation="7.5" />
                      <feComposite in2="hardAlpha" operator="out" />
                      <feColorMatrix
                        type="matrix"
                        values="0 0 0 0 0.988235 0 0 0 0 0.831373 0 0 0 0 0 0 0 0 0.3 0"
                      />
                      <feBlend
                        mode="normal"
                        in2="BackgroundImageFix"
                        result="effect1_dropShadow_2_220"
                      />
                      <feBlend
                        mode="normal"
                        in="SourceGraphic"
                        in2="effect1_dropShadow_2_220"
                        result="shape"
                      />
                    </filter>
                  </defs>
                </svg>
              </div>

              <div className="ms-3 text-start">
                <h2><AnimatedCounter
                    end={1326}
                    suffix="M+"
                  /></h2>
                <p>{t("home.counter.minutesServed", "MINUTES SERVED")}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}