"use client";

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

const stats = [
  "Women on ShePays",
  "Monthly transaction value",
  "Cards in force",
  "Brand & merchant partners",
  "Digital gold invested",
  "Repeat transaction rate",
  "New-to-credit share",
  "Cities live",
];

export default function ImpactSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const section = sectionRef.current;

    if (!section) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      {
        threshold: 0.18,
      }
    );

    observer.observe(section);

    return () => observer.disconnect();
  }, []);

  return (
    <section
      ref={sectionRef}
      className="
        relative
        w-full
        overflow-hidden
        bg-[#F4F1FA]
      "
    >
      {/* Soft background glow */}
      <div
        className="
          pointer-events-none
          absolute
          -left-[180px]
          top-[40px]
          h-[440px]
          w-[440px]
          rounded-full
          bg-[#dab5ff]/15
          blur-[130px]
        "
      />

      <div
        className="
          pointer-events-none
          absolute
          -right-[160px]
          top-[80px]
          h-[480px]
          w-[480px]
          rounded-full
          bg-[#f0cbff]/15
          blur-[140px]
        "
      />

      <div
        className="
          relative
          z-10
          mx-auto
          w-full
          max-w-[1180px]
          px-5
          py-16
          sm:px-6
          md:py-20
          lg:px-8
          lg:py-[88px]
        "
      >
        {/* Section label */}
        <div className="flex items-center gap-[10px]">
          <span className="h-px w-[28px] bg-[#ddd3de]" />

          <span className="text-[10px] font-medium tracking-[0.22em] text-[#8d7f90]">
            15
          </span>

          <span className="text-[10px] font-semibold uppercase tracking-[0.26em] text-[#5e4e64]">
            Impact
          </span>
        </div>

        {/* Heading */}
        <div className="mt-[22px] max-w-[660px]">
          <h2
            className="
              text-[40px]
              font-[800]
              leading-[1.02]
              tracking-[-0.05em]
              text-[#250022]
              sm:text-[48px]
              md:text-[54px]
              lg:text-[58px]
            "
          >
            Our growing community.
          </h2>

          <p
            className="
              mt-[16px]
              max-w-[640px]
              text-[15px]
              leading-[1.7]
              text-[#6d6172]
              sm:text-[16px]
            "
          >
            These slots animate the moment verified figures are supplied.
            Nothing here is estimated.
          </p>
        </div>

        {/* Stats grid */}
        <div
          className="
            mt-[70px]
            grid
            grid-cols-1
            gap-x-4
            gap-y-[42px]
            sm:grid-cols-2
            lg:grid-cols-4
            lg:gap-x-[18px]
            lg:gap-y-[38px]
          "
        >
          {stats.map((title, index) => (
            <ImpactItem
              key={title}
              title={title}
              isVisible={isVisible}
              delay={index * 90}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ImpactItem({
  title,
  isVisible,
  delay,
}: {
  title: string;
  isVisible: boolean;
  delay: number;
}) {
  return (
    <div className="min-w-0">
      {/* Animated gradient line */}
      <div className="relative h-[2px] w-full overflow-hidden bg-[#ece5ee]">
        <span
          className={`
            absolute
            inset-y-0
            left-0
            w-full
            origin-left
            bg-gradient-to-r
            from-[#9c24e8]
            via-[#ef1495]
            to-[#ff6c32]
            transition-transform
            duration-700
            ease-out
            ${isVisible ? "scale-x-100" : "scale-x-0"}
          `}
          style={{
            transitionDelay: `${delay}ms`,
          }}
        />
      </div>

      {/* Placeholder bar */}
      <div className="mt-[46px] h-[6px] w-[34px] bg-[#cfa4e7]" />

      {/* Title */}
      <h3
        className="
          mt-[26px]
          text-[15px]
          font-[700]
          leading-[1.35]
          text-[#250022]
          sm:text-[16px]
        "
      >
        {title}
      </h3>

      {/* Awaiting figure */}
      <p
        className="
          mt-[12px]
          text-[8px]
          font-semibold
          uppercase
          tracking-[0.24em]
          text-[#837487]
        "
      >
        Awaiting figure
      </p>
    </div>
  );
}