'use client';

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

// ─── Data ─────────────────────────────────────────────────────────────────────

const stats = [
  { value: 300, suffix: '+', label: 'Projects Delivered' },
  { value: 50,  suffix: '+', label: 'Happy Clients'      },
  { value: 20,  suffix: '+', label: 'Years of Continued Excellence' },
];

// ─── Count-up ─────────────────────────────────────────────────────────────────

function CountUp({ value, suffix, active }: { value: number; suffix: string; active: boolean }) {
  const [n, setN] = useState(0);
  const raf = useRef<number>(0);

  useEffect(() => {
    if (!active) return;
    const duration = 1600;
    const start    = performance.now();
    const tick     = (now: number) => {
      const t = Math.min((now - start) / duration, 1);
      // ease-out cubic
      const eased = 1 - Math.pow(1 - t, 3);
      setN(Math.round(eased * value));
      if (t < 1) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf.current);
  }, [active, value]);

  return <>{n}{suffix}</>;
}

// ─── Section ──────────────────────────────────────────────────────────────────

export default function StatsSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const [active, setActive] = useState(false);

  // Trigger count-up once when section enters viewport
  useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setActive(true); obs.disconnect(); } },
      { threshold: 0.3 },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section
      id="track-record"
      ref={sectionRef}
      style={{
        position: 'relative',
        height: '100vh',
        backgroundColor: '#0d2260',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        overflow: 'hidden',
      }}
    >
      {/* ── Decorative top stripe ── */}
      <div style={{
        position: 'absolute', top: 0, left: '-5%', width: '110%',
        height: 4, backgroundColor: '#d85218', transform: 'skewX(-20deg)',
      }} />

      {/* ── Ambient glow (right) ── */}
      <div style={{
        position: 'absolute', right: '-10%', top: '5%',
        width: '55%', height: '90%',
        background: 'radial-gradient(ellipse at 60% 50%, rgba(31,113,163,0.14) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />
      {/* ── Ambient glow (left) ── */}
      <div style={{
        position: 'absolute', left: '-10%', bottom: '5%',
        width: '45%', height: '70%',
        background: 'radial-gradient(ellipse at 40% 60%, rgba(216,82,24,0.07) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      {/* ── Overline ── */}
      <p style={{
        fontSize: '0.7em',
        fontWeight: 700,
        letterSpacing: '4px',
        textTransform: 'uppercase',
        color: '#1f71a3',
        margin: '0 0 64px',
        textAlign: 'center',
      }}>
        Our Track Record
      </p>

      {/* ── Stats row ── */}
      <div className="stats-row" style={{
        display: 'flex',
        width: '100%',
        maxWidth: 960,
        padding: '0 40px',
        boxSizing: 'border-box',
      }}>
        {stats.map((s, i) => (
          <div
            key={s.label}
            style={{
              flex: 1,
              textAlign: 'center',
              padding: '0 32px',
              borderLeft: i > 0 ? '1px solid rgba(255,255,255,0.1)' : 'none',
            }}
          >
            {/* Number */}
            <div
              className="stats-number"
              style={{
                fontSize: 'clamp(3.5rem, 7vw, 6.5rem)',
                fontWeight: 800,
                color: '#d85218',
                lineHeight: 1,
                letterSpacing: '-2px',
                marginBottom: 20,
                fontFamily: "'canada-type-gibson', Arial, Helvetica, sans-serif",
              }}
            >
              <CountUp value={s.value} suffix={s.suffix} active={active} />
            </div>

            {/* Label */}
            <div
              className="stats-label"
              style={{
                fontSize: '0.813em',
                fontWeight: 700,
                letterSpacing: '2px',
                textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.75)',
                lineHeight: 1.5,
              }}
            >
              {s.label}
            </div>
          </div>
        ))}
      </div>

      {/* ── Tagline ── */}
      <p style={{
        fontSize: '0.938em',
        color: 'rgba(255,255,255,0.4)',
        textAlign: 'center',
        maxWidth: 560,
        lineHeight: '26px',
        margin: '64px 40px 0',
      }}>
        From startups to enterprise — every project handled with the same
        dedication, creativity, and technical precision.
      </p>

      {/* ── Decorative bottom stripe ── */}
      <div style={{
        position: 'absolute', bottom: 0, left: '-5%', width: '110%',
        height: 3, backgroundColor: '#1f71a3', transform: 'skewX(-20deg)',
      }} />
    </section>
  );
}