"use client";

import * as React from "react";
import { motion, useScroll, useTransform, useReducedMotion } from "framer-motion";
import { headlineStats } from "@/lib/content";
import { CountUp } from "@/components/ui-stratops/reveal";

export function StatsTicker() {
  const ref = React.useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const x = useTransform(scrollYProgress, [0, 1], ["-2%", "2%"]);

  return (
    <section
      ref={ref}
      className="relative border-y border-border/60 bg-card/40 py-12 sm:py-16"
      aria-label="Key credentials"
    >
      {/* Subtle brand glow backdrop */}
      <div
        className="pointer-events-none absolute inset-0 opacity-30"
        style={{
          background:
            "radial-gradient(60% 80% at 50% 50%, oklch(0.30 0.12 252 / 0.08) 0%, transparent 70%)",
        }}
      />
      <motion.div
        style={{ x }}
        className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
      >
        <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:gap-x-8 lg:grid-cols-4">
          {headlineStats.map((stat, i) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-40px" }}
              transition={{ duration: 0.6, delay: i * 0.08, ease: [0.16, 1, 0.3, 1] }}
              className="flex flex-col gap-2"
            >
              <span
                className="font-display text-[clamp(2rem,4vw,3.2rem)] font-semibold leading-none text-gold"
                style={
                  !reduce
                    ? {
                        textShadow:
                          "0 0 24px oklch(0.82 0.08 70 / 0.30), 0 0 48px oklch(0.82 0.08 70 / 0.12)",
                      }
                    : undefined
                }
              >
                <CountUp value={stat.value} />
              </span>
              <span className="text-xs leading-relaxed text-muted-foreground sm:text-sm">
                {stat.label}
              </span>
            </motion.div>
          ))}
        </div>
      </motion.div>
    </section>
  );
}