"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Quote, ChevronLeft, ChevronRight } from "lucide-react";
import { testimonials } from "@/lib/content";
import { SectionHeading, Reveal } from "@/components/ui-stratops/reveal";
import { cn } from "@/lib/utils";

export function TestimonialsSection() {
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => {
      setIndex((i) => (i + 1) % testimonials.length);
    }, 6000);
    return () => clearInterval(t);
  }, [paused]);

  const go = (dir: 1 | -1) => {
    setIndex((i) => (i + dir + testimonials.length) % testimonials.length);
  };

  const current = testimonials[index];

  return (
    <section
      id="clients"
      className="relative overflow-hidden border-t border-border/60 py-20 sm:py-28 lg:py-32"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-40"
        style={{
          background:
            "radial-gradient(40% 50% at 50% 50%, oklch(0.30 0.08 55 / 0.15) 0%, transparent 70%)",
        }}
      />
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading
          eyebrow="What clients say"
          title={
            <>
              Don't take{" "}
              <span className="text-brand italic">our word for it.</span>
            </>
          }
          align="center"
          className="mb-14"
        />

        <Reveal>
          <div className="relative mx-auto max-w-4xl">
            <Quote
              className="mx-auto mb-8 h-10 w-10 text-brand"
              strokeWidth={1.2}
            />

            <div className="relative min-h-[200px] sm:min-h-[180px]">
              <AnimatePresence mode="wait">
                <motion.figure
                  key={index}
                  initial={{ opacity: 0, y: 16 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -16 }}
                  transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1] }}
                  className="flex flex-col items-center text-center"
                >
                  <blockquote className="font-display text-2xl font-medium leading-relaxed text-foreground sm:text-[1.7rem] sm:leading-[1.4]">
                    “{current.quote}”
                  </blockquote>
                  <figcaption className="mt-7 flex flex-col items-center gap-1">
                    <span className="font-semibold text-foreground">
                      {current.role}
                    </span>
                    <span className="font-mono-num text-[11px] uppercase tracking-[0.24em] text-gold">
                      {current.organisation}
                    </span>
                  </figcaption>
                </motion.figure>
              </AnimatePresence>
            </div>

            {/* Controls */}
            <div className="mt-10 flex items-center justify-center gap-4">
              <button
                type="button"
                onClick={() => go(-1)}
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/60 text-muted-foreground transition-colors hover:border-brand hover:text-brand"
                aria-label="Previous testimonial"
              >
                <ChevronLeft className="h-4 w-4" />
              </button>

              <div className="flex items-center gap-2">
                {testimonials.map((_, i) => (
                  <button
                    key={i}
                    type="button"
                    onClick={() => setIndex(i)}
                    className={cn(
                      "h-1.5 rounded-full transition-all duration-300",
                      i === index
                        ? "w-8 bg-brand"
                        : "w-1.5 bg-muted-foreground/40 hover:bg-muted-foreground/70",
                    )}
                    aria-label={`Go to testimonial ${i + 1}`}
                  />
                ))}
              </div>

              <button
                type="button"
                onClick={() => go(1)}
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border/60 text-muted-foreground transition-colors hover:border-brand hover:text-brand"
                aria-label="Next testimonial"
              >
                <ChevronRight className="h-4 w-4" />
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}