"use client";

import { useEffect, useRef, useState } from 'react';

type WhyChooseUsStat = {
  value: string;
  label: string;
};

export type WhyChooseUsData = {
  title?: string;
  description?: string;
  stats?: WhyChooseUsStat[];
};

const WhyChooseUs = ({ data }: { data?: WhyChooseUsData }) => {
  const sectionRef = useRef<HTMLElement>(null);
  const [inView, setInView] = useState(false);
  const statsToRender = data?.stats ?? [];

  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const observer = new IntersectionObserver(
      (entries) => setInView(entries[0]?.isIntersecting ?? false),
      { threshold: 0.15 }
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <section ref={sectionRef} className={`py-[50px] sm:py-12 md:py-14 lg:py-16 xl:py-[70px] px-[20px] md:px-[40px] xl:px-[60px] font-outfit ${inView ? "why-choose-us-in" : ""}`}>
      <style dangerouslySetInnerHTML={{ __html: `
        .why-choose-us-step { opacity: 0; }
        .why-choose-us-in .why-choose-us-step {
          animation: why-choose-us-fade-up 0.6s ease-out forwards;
        }
        @keyframes why-choose-us-fade-up {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}} />
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-[60px] md:mb-[40px]">
          <h2 className="font-extralight text-black mb-[10px] font-lexend">
            {(() => {
              const title = (data?.title ?? "").trim();
              const words = title ? title.split(/\s+/) : [];
              return (
                <>
                  {words[0] ?? ""}
                  {words.length > 1 ? <span className="font-medium"> {" "}{words.slice(1).join(" ")}</span> : null}
                </>
              );
            })()}
          </h2>
          <p className="text-[#424242] font-light">
            {data?.description ?? ""}
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-[50px] gap-x-8">
          {statsToRender.map((stat, index) => (
            <div
              key={index}
              className={`why-choose-us-step flex justify-center max-h-[174px] ${index % 2 !== 0 ? "md:mt-[40px]" : ""}`}
              style={{ animationDelay: `${index * 0.1}s` }}
            >

              <div className="relative w-[259px] ps-[10px] pb-[50px] ">
                <div className="absolute top-[-10px] right-[-0px] w-[112px] h-[174px] bg-[#D9E5DB] rounded-[10px] pointer-events-none"></div>
                <div className="relative z-10 flex flex-col pt-8 pl-[4px]">
                  <span className="pe-[10px] font-normal text-[#053F31] leading-none mb-4 font-lexend text-right" style={{ fontSize: '64px' }}>
                    {stat.value}
                  </span>
                  <div className="w-full h-[1px] bg-[#053F31]/20 mb-[10px]"></div>
                  <p className="relative text-[#424242] font-light leading-tight text-left">
                    {stat.label}
                  </p>
                </div>
              </div>

            </div>
          ))}
        </div>

      </div>
    </section>
  );
};

export default WhyChooseUs;