KLC-Website-Frontend/src/components/StatsSection.tsx

import { Button } from "./ui/button";
import { useAnimatedCounter } from "./hooks/useAnimatedCounter";
import { ArrowUpRight } from "lucide-react";
import { useState, useEffect } from "react";
import { BrandedTag } from "./about/BrandedTag";
import { PrimaryCTAButton } from "./PrimaryCTAButton";

interface StatItemProps {
  end: number;
  suffix: string;
  label: string;
  duration?: number;
}

function StatItem({ end, suffix, label, duration = 2000 }: StatItemProps) {
  const { count, ref } = useAnimatedCounter({ end, suffix, duration });

  return (
    <div className="mb-0">
      {/* Top line */}
      <div 
        className="w-full h-[1px] mb-4"
        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
      />
      
      {/* Large number */}
      <span
        ref={ref}
        className="stats-number mb-3 leading-none"
        style={{ 
          color: 'var(--color-brand-primary)',
          fontFamily: 'var(--font-family-base)'
        }}
      >
        {count}
      </span>
      
      {/* Yellow square and label */}
      <div className="flex items-center mb-4">
        <div 
          className="w-2 h-2 mr-3 flex-shrink-0"
          style={{ backgroundColor: 'var(--color-brand-accent)' }}
        />
        <span 
          className="text-eyebrow"
          style={{ color: 'var(--color-brand-black)' }}
        >
          {label}
        </span>
      </div>
      
      {/* Bottom line */}
      <div 
        className="w-full h-[1px]"
        style={{ backgroundColor: 'var(--color-brand-gray-muted)' }}
      />
    </div>
  );
}

export function StatsSection() {
  return (
    <section 
      className="py-20"
      style={{ backgroundColor: 'var(--color-brand-bg-light)' }}
    >
      <div className="section-margin-x">
        <div className="max-w-7xl mx-auto">
          <div className="mb-12 lg:mb-16 md:mb-12 sm:mb-8">
            {/* Branded Tag */}
            <BrandedTag 
              text="Serving Leaders Across Industries" 
            />

            {/* Main Heading */}
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
              <div className="lg:col-span-6 md:col-span-8 sm:col-span-12">
                <h2 className="text-h2 mb-8">
                 Your Partner in Leadership, Culture, and Capability Building
                </h2>
                {/* CTA Button */}
                <PrimaryCTAButton 
                  text="About Us"
                  onClick={() => console.log('About us clicked')}
                  ariaLabel="Learn more about KLC"
                />
              </div>

              {/* Desktop Statistics */}
              <div className="hidden lg:block lg:col-start-9 lg:col-end-13">
                <div className="space-y-6">
                  <StatItem 
                    end={27000} 
                    suffix="+" 
                    label="LEADERS DEVELOPED"
                    duration={2500}
                  />
                  <StatItem 
                    end={150} 
                    suffix="+" 
                    label="CORPORATES"
                    duration={2000}
                  />
                  <StatItem 
                    end={5000} 
                    suffix="+" 
                    label="ROOM NIGHTS UTILISED"
                    duration={1800}
                  />
                </div>
              </div>
            </div>

            {/* Mobile Statistics - Show below content on mobile/tablet */}
            <div className="block lg:hidden mt-12">
              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 sm:gap-8">
                <StatItem 
                  end={27000} 
                  suffix="+" 
                  label="LEADERS DEVELOPED"
                  duration={2500}
                />
                <StatItem 
                  end={150} 
                  suffix="+" 
                  label="CORPORATE CLIENTS"
                  duration={2000}
                />
                <StatItem 
                  end={20} 
                  suffix="+" 
                  label="COUNTRIES SERVED"
                  duration={1800}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}