"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";

/* ---------------------------
   Animated Counter Hook
---------------------------- */
function useCountUp(target: number, duration = 2000) {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    let started = false;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !started) {
          started = true;
          let start = 0;
          const step = Math.ceil(target / (duration / 16));

          const interval = setInterval(() => {
            start += step;
            if (start >= target) {
              setCount(target);
              clearInterval(interval);
            } else {
              setCount(start);
            }
          }, 16);
        }
      },
      { threshold: 0.5 }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, [target, duration]);

  return { count, ref };
}

export default function WhoWeAre() {
  return (
    <section className="bg-[#101010] relative py-16 lg:py-28 text-white overflow-hidden">
      
      {/* Background Image */}
      {/* <div className="absolute inset-0 -z-10">
        <Image
          src="/who-we-are-bg.webp"
          alt="Who we are background"
          fill
          className="object-cover"
        />
      </div> */}

      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-6">

          {/* LEFT VISUAL */}
          <div className="relative text-center lg:text-left">
            <h2 className="text-2xl sm:text-3xl tracking-wide font-mono font-medium mb-6">
              Who we are?
            </h2>
            <Image
              src="/who-we-are.webp"
              alt="Togwe Team"
              width={450}
              height={450}
              className="object-contain mx-auto lg:mx-0 max-w-[280px] sm:max-w-[360px] lg:max-w-none"
            />

            
          </div>

          {/* RIGHT CONTENT */}
          <div className="text-center lg:text-left">
            <p className="text-white/70 text-base sm:text-lg">
            Togwe is a global services company operating at the intersection of <i className="font-bold text-white">gaming, technology, marketing, operations, and sports</i>. We partner with platforms, organizations, and enterprises to deliver practical, scalable, and performance-focused solutions that support long-term growth.</p>

            <p className="text-white/70 text-base sm:text-lg">
              We don’t offer generic services — we build systems, execution models, and partnerships that scale.
            </p>

            <h3 className="mt-8 text-2xl md:text-[32px] font-mono font-medium uppercase">
              Our Values
            </h3>

            <ul className="mt-4 space-y-3 text-white/80">
              <li>
                <div className="flex flex-row align-center gap-4">
                    <div>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
                        <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="white"/>
                        </svg>
                    </div> 
                    <div className="text-left">
                        <h3 className="font-mono font-medium text-lg md:text-2xl text-white">Transparency</h3>
                        <p className="text-sm md:text-lg">Clear communication, honest execution, and measurable outcomes</p>
                    </div>   
                </div> 
              </li>
              <li>
                <div className="flex flex-row align-center gap-4">
                    <div>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
                        <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="white"/>
                        </svg>
                    </div> 
                    <div className="text-left">
                        <h3 className="font-mono font-medium text-lg md:text-2xl text-white">Performance</h3>
                        <p className="text-sm md:text-lg">Every solution is designed to drive efficiency, growth, or engagement</p>
                    </div>   
                </div>
              </li>
              <li>
                <div className="flex flex-row align-center gap-4">
                    <div>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
                        <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="white"/>
                        </svg>
                    </div> 
                    <div className="text-left">
                        <h3 className="font-mono font-medium text-lg md:text-2xl text-white">Accountability</h3>
                        <p className="text-sm md:text-lg">Ownership of execution, delivery, and results</p>
                    </div>   
                </div>
              </li>
              <li>
                <div className="flex flex-row align-center gap-4">
                    <div>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
                        <path d="M20.79 5.72003C20.4076 5.33516 19.9525 5.03004 19.4513 4.82233C18.9501 4.61463 18.4126 4.50847 17.87 4.51003H8.66001C8.1169 4.51088 7.57932 4.61911 7.0782 4.82849C6.57707 5.03786 6.12229 5.34425 5.74001 5.73003C5.7121 5.75231 5.68839 5.77941 5.67001 5.81003L2.59001 10.02C2.20357 10.6154 1.99859 11.3103 2.00001 12.02C2.00906 12.7311 2.22066 13.4249 2.61001 14.02L5.67001 18.19L5.74001 18.28C6.12245 18.6649 6.57748 18.97 7.07872 19.1777C7.57996 19.3854 8.11744 19.4916 8.66001 19.49H17.87C18.9654 19.49 20.0158 19.0549 20.7904 18.2804C21.5649 17.5059 22 16.4554 22 15.36V8.59003C21.9899 7.51144 21.5552 6.48028 20.79 5.72003ZM17.23 10.66L13.31 14.58C13.15 14.741 12.96 14.87 12.75 14.96C12.5388 15.0526 12.3106 15.1003 12.08 15.1003C11.8494 15.1003 11.6213 15.0526 11.41 14.96C11.1974 14.871 11.0039 14.742 10.84 14.58L8.90001 12.64C8.7117 12.4517 8.60592 12.1963 8.60592 11.93C8.60592 11.6637 8.7117 11.4083 8.90001 11.22C9.08831 11.0317 9.34371 10.9259 9.61001 10.9259C9.87631 10.9259 10.1317 11.0317 10.32 11.22L12.08 12.99L15.82 9.25003C15.9097 9.14534 16.02 9.06032 16.144 9.0003C16.2681 8.94028 16.4032 8.90655 16.541 8.90123C16.6787 8.89591 16.816 8.91911 16.9443 8.96939C17.0727 9.01966 17.1892 9.09592 17.2867 9.19338C17.3841 9.29083 17.4604 9.40738 17.5106 9.5357C17.5609 9.66403 17.5841 9.80136 17.5788 9.93908C17.5735 10.0768 17.5398 10.2119 17.4797 10.336C17.4197 10.4601 17.3347 10.5704 17.23 10.66Z" fill="white"/>
                        </svg>
                    </div> 
                    <div className="text-left">
                        <h3 className="font-mono font-medium text-lg md:text-2xl text-white">Long-Term Growth</h3>
                        <p className="text-sm md:text-lg">We focus on sustainable partnerships, not short-term wins</p>
                    </div>   
                </div>
              </li>
            </ul>
            <Link
              href="/about-us"
              className="mt-10 mx-auto lg:mx-0 group inline-flex items-center gap-2
                border border-white/50 px-6 py-3 rounded text-sm md:text-lg font-medium
                hover:bg-white text-white hover:text-[#202020] transition
              "
            >
              Learn More
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.67188 0.5L17.3026 8.73842L8.67188 16.9768" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M17.2999 8.73828L0.5 8.73828" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </Link>
          </div>
        </div>

        {/* STATS COUNTERS */}
        <div className="mt-14 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4 text-center lg:pt-10 gap-y-8">
          <Stat label="Growth" value={200} suffix="%" />
          <Stat label="Established" value={2021} />
          <Stat label="Successful Projects" value={100} suffix="+" />
          <Stat label="Users Impacted" value={10} suffix="M+" />
        </div>
      </div>
    </section>
  );
}

/* ---------------------------
   Stat Component
---------------------------- */
function Stat({
  label,
  value,
  suffix = "",
}: {
  label: string;
  value: number;
  suffix?: string;
}) {
  const { count, ref } = useCountUp(value);

  return (
    <div
      ref={ref}
      className="
        px-5
        border-white
        border-b-0 sm:border-b-0
        lg:border-r
        last:border-0
      "
    >
      <p className="text-md md:text-lg text-white font-medium">{label}</p>
      <p className="mt-2 text-3xl md:text-[48px] font-mono font-semibold">
        {count}
        {suffix}
      </p>
    </div>
  );
}
