"use client";

import { useEffect, useRef } from "react";
import {
  type Variants,
  motion,
  useInView,
  useMotionValue,
  useSpring,
} from "motion/react";
import { cn } from "@/lib/utils";

/* ------------------------------------------------------------------ */
/*  Data                                                               */
/* ------------------------------------------------------------------ */

const stats = [
  { value: 50_000, suffix: "+", label: "Developers", decimals: 0 },
  { value: 99.9, suffix: "%", label: "Uptime", decimals: 1 },
  { value: 4.9, suffix: "/5", label: "Avg Rating", decimals: 1 },
  { value: 150, suffix: "+", label: "Countries", decimals: 0 },
];

const testimonials = [
  {
    quote:
      "This platform completely transformed how our team ships. We went from monthly releases to daily deploys without breaking a sweat.",
    author: "Sarah Kim",
    role: "VP Engineering, Acme Corp",
    initials: "SK",
    gradient: "bg-gradient-to-br from-emerald-400 to-teal-500",
  },
  {
    quote:
      "The collaboration tools are unreal. It feels like it was built by someone who actually understands what engineering teams need day-to-day.",
    author: "James Doe",
    role: "CTO, Wavelength",
    initials: "JD",
    gradient: "bg-gradient-to-br from-amber-400 to-orange-500",
  },
  {
    quote:
      "We evaluated every tool on the market. Nothing else came close in terms of developer experience and attention to detail.",
    author: "Alex Lin",
    role: "Head of Product, NovaTech",
    initials: "AL",
    gradient: "bg-gradient-to-br from-blue-400 to-indigo-500",
  },
];

const companies = [
  "Vercel",
  "Stripe",
  "Linear",
  "Notion",
  "Figma",
  "Raycast",
];

/* ------------------------------------------------------------------ */
/*  Motion presets                                                     */
/* ------------------------------------------------------------------ */

const ease: [number, number, number, number] = [0.22, 1, 0.36, 1];

const statsContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.1 },
  },
};

const cardsContainerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.15, delayChildren: 0.1 },
  },
};

const itemVariants: Variants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.7, ease },
  },
};

/* ------------------------------------------------------------------ */
/*  AnimatedCounter                                                    */
/* ------------------------------------------------------------------ */

function AnimatedCounter({
  value,
  suffix = "",
  decimals = 0,
}: {
  value: number;
  suffix?: string;
  decimals?: number;
}) {
  const ref = useRef<HTMLSpanElement>(null);
  const motionValue = useMotionValue(0);
  const spring = useSpring(motionValue, { stiffness: 75, damping: 25 });
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  useEffect(() => {
    if (isInView) {
      motionValue.set(value);
    }
  }, [isInView, motionValue, value]);

  useEffect(() => {
    const unsubscribe = spring.on("change", (v) => {
      if (ref.current) {
        const formatted =
          decimals > 0
            ? v.toFixed(decimals)
            : Math.round(v).toLocaleString();
        ref.current.textContent = `${formatted}${suffix}`;
      }
    });
    return unsubscribe;
  }, [spring, suffix, decimals]);

  const initial =
    decimals > 0 ? `${(0).toFixed(decimals)}${suffix}` : `0${suffix}`;

  return (
    <span ref={ref} className="tabular-nums">
      {initial}
    </span>
  );
}

/* ------------------------------------------------------------------ */
/*  StarRating                                                         */
/* ------------------------------------------------------------------ */

function StarRating({ count = 5 }: { count?: number }) {
  return (
    <div className="flex items-center gap-0.5">
      {Array.from({ length: count }).map((_, i) => (
        <svg
          className="size-3.5 fill-current text-amber-400"
          key={i}
          viewBox="0 0 20 20"
        >
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
        </svg>
      ))}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  SocialProofApple                                                   */
/* ------------------------------------------------------------------ */

export function SocialProofApple() {
  const statsRef = useRef(null);
  const cardsRef = useRef(null);
  const logosRef = useRef(null);

  const statsInView = useInView(statsRef, { once: true, margin: "-100px" });
  const cardsInView = useInView(cardsRef, { once: true, margin: "-100px" });
  const logosInView = useInView(logosRef, { once: true, margin: "-50px" });

  return (
    <section className="relative w-full overflow-hidden border-border/40 border-t bg-background py-24 sm:py-32">
      {/* Background — noise texture + dot grid (lighter than the hero) */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div
          className="absolute inset-0 opacity-[0.015] dark:opacity-[0.03]"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
          }}
        />
        <div
          className="absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
          style={{
            backgroundImage:
              "radial-gradient(circle at center, hsl(var(--foreground) / 0.08) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }}
        />
      </div>

      <div className="relative z-10 mx-auto flex max-w-6xl flex-col items-center gap-20 px-6">
        {/* ── Block 1: Metrics ── */}
        <motion.div
          ref={statsRef}
          variants={statsContainerVariants}
          initial="hidden"
          animate={statsInView ? "visible" : "hidden"}
          className="grid w-full max-w-4xl grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-4 sm:gap-x-0"
        >
          {stats.map((stat, i) => (
            <motion.div
              key={stat.label}
              variants={itemVariants}
              className={cn(
                "flex flex-col items-center gap-2 text-center",
                i !== 0 && "sm:border-border/40 sm:border-l"
              )}
            >
              <span className="font-semibold text-3xl text-foreground tracking-tight sm:text-4xl md:text-5xl">
                <AnimatedCounter
                  value={stat.value}
                  suffix={stat.suffix}
                  decimals={stat.decimals}
                />
              </span>
              <span className="text-muted-foreground text-sm">
                {stat.label}
              </span>
            </motion.div>
          ))}
        </motion.div>

        {/* ── Block 2: Testimonials ── */}
        <div
          ref={cardsRef}
          className="flex w-full flex-col items-center gap-10"
        >
          <motion.span
            initial={{ opacity: 0, y: 16 }}
            animate={
              cardsInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }
            }
            transition={{ duration: 0.6, ease }}
            className="font-medium text-muted-foreground/60 text-xs uppercase tracking-widest"
          >
            What our customers say
          </motion.span>

          <motion.div
            variants={cardsContainerVariants}
            initial="hidden"
            animate={cardsInView ? "visible" : "hidden"}
            className="grid w-full grid-cols-1 gap-6 md:grid-cols-3"
          >
            {testimonials.map((t) => (
              <motion.div
                key={t.author}
                variants={itemVariants}
                className={cn(
                  "flex flex-col gap-5 rounded-[calc(var(--radius)+4px)] bg-background/80 p-6 backdrop-blur-sm transition-shadow duration-200",
                  "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]",
                  "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_4px_8px_0px_rgba(0,0,0,0.06)]",
                  "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)]",
                  "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.05),0px_4px_8px_0px_rgba(0,0,0,0.25)]"
                )}
              >
                <StarRating />

                <p className="text-pretty font-normal text-foreground/90 text-sm leading-relaxed sm:text-base">
                  &ldquo;{t.quote}&rdquo;
                </p>

                <div className="mt-auto flex items-center gap-3">
                  <div
                    className={cn(
                      "flex size-10 shrink-0 items-center justify-center rounded-full font-semibold text-white text-xs shadow-sm",
                      t.gradient
                    )}
                  >
                    {t.initials}
                  </div>
                  <div className="flex flex-col">
                    <span className="font-semibold text-foreground text-sm">
                      {t.author}
                    </span>
                    <span className="text-muted-foreground text-xs">
                      {t.role}
                    </span>
                  </div>
                </div>
              </motion.div>
            ))}
          </motion.div>
        </div>

        {/* ── Block 3: Logo strip ── */}
        <motion.div
          ref={logosRef}
          initial={{ opacity: 0 }}
          animate={logosInView ? { opacity: 1 } : { opacity: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="flex w-full flex-col items-center gap-6 border-border/40 border-t pt-10"
        >
          <span className="font-medium text-muted-foreground/60 text-xs uppercase tracking-widest">
            Trusted by industry leaders
          </span>
          <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6 opacity-50 dark:opacity-40">
            {companies.map((company) => (
              <span
                className="font-semibold text-foreground text-lg tracking-tight"
                key={company}
              >
                {company}
              </span>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}
Social Proof Apple

Social Proof Apple
