"use client";

import { motion, useInView } from "framer-motion";
import { useRef, useState } from "react";
import { Quote, ChevronLeft, ChevronRight, Play } from "lucide-react";

const testimonials = [
  {
    name: "Dr. Peter Njoroge",
    role: "Investor, London UK",
    quote:
      "Diaspora Property made it incredibly easy to invest in Kenyan real estate from London. The vetting process gave me confidence that my money was safe. I now own two properties in Karen and Kilimani.",
    image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1974&auto=format&fit=crop",
  },
  {
    name: "Mary Wambui",
    role: "Business Owner, Toronto CA",
    quote:
      "As someone who had been scammed before, I was hesitant to invest back home. Diaspora Property connected me with verified companies and I could track my investment every step of the way.",
    image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?q=80&w=1976&auto=format&fit=crop",
  },
  {
    name: "Samuel Otieno",
    role: "Engineer, Houston USA",
    quote:
      "The magazine articles helped me understand the Kenyan property market better. I made my first investment within a month of joining and the returns have been incredible.",
    image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?q=80&w=2070&auto=format&fit=crop",
  },
  {
    name: "Angela Muthoni",
    role: "Nurse, Dubai UAE",
    quote:
      "What I love most is the transparency. I can see everything about a property before committing. The team even arranged virtual tours for me. Absolutely brilliant service.",
    image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=1961&auto=format&fit=crop",
  },
];

export function Testimonials() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });
  const [active, setActive] = useState(0);

  const next = () => setActive((prev) => (prev + 1) % testimonials.length);
  const prev = () =>
    setActive((prev) => (prev - 1 + testimonials.length) % testimonials.length);

  return (
    <section className="py-24 lg:py-32 bg-obsidian-700 relative overflow-hidden" ref={ref}>
      {/* Background */}
      <div className="absolute inset-0 opacity-5">
        <div
          className="absolute inset-0"
          style={{
            backgroundImage: `radial-gradient(circle at 1px 1px, white 1px, transparent 0)`,
            backgroundSize: "80px 80px",
          }}
        />
      </div>

      <div className="relative mx-auto max-w-7xl px-6 lg:px-8">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7 }}
          className="text-center mb-16"
        >
          <p className="text-xs text-primary uppercase tracking-[0.2em] font-semibold mb-4">
            //CLIENT FEEDBACK
          </p>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
            OUR HAPPY CLIENTS
            <br />
            <span className="text-primary">TESTIMONIALS</span>
          </h2>
        </motion.div>

        {/* Testimonial Card */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.7, delay: 0.2 }}
          className="max-w-4xl mx-auto"
        >
          <div className="grid lg:grid-cols-[280px_1fr] gap-8 items-center">
            {/* Image */}
            <div className="relative aspect-square max-w-[280px] mx-auto lg:mx-0 overflow-hidden">
              <img
                src={testimonials[active].image}
                alt={testimonials[active].name}
                className="h-full w-full object-cover transition-all duration-500"
              />
              <button className="absolute inset-0 flex items-center justify-center bg-obsidian-900/30 hover:bg-obsidian-900/50 transition-colors">
                <div className="w-14 h-14 bg-primary flex items-center justify-center">
                  <Play size={20} className="text-white ml-0.5" fill="white" />
                </div>
              </button>
            </div>

            {/* Quote */}
            <div className="text-center lg:text-left">
              <Quote size={40} className="text-primary/30 mb-4 mx-auto lg:mx-0" />
              <p className="text-white/80 text-base sm:text-lg leading-relaxed italic">
                &ldquo;{testimonials[active].quote}&rdquo;
              </p>
              <div className="mt-6">
                <h4 className="font-display text-lg font-bold text-white">
                  {testimonials[active].name}
                </h4>
                <p className="text-sm text-white/50 mt-1">
                  {testimonials[active].role}
                </p>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <div className="flex items-center justify-center lg:justify-end gap-4 mt-10">
            <button
              onClick={prev}
              className="w-12 h-12 border border-white/20 flex items-center justify-center text-white hover:bg-primary hover:border-primary transition-all"
            >
              <ChevronLeft size={20} />
            </button>
            <span className="text-white/50 text-sm font-medium">
              {String(active + 1).padStart(2, "0")} /{" "}
              {String(testimonials.length).padStart(2, "0")}
            </span>
            <button
              onClick={next}
              className="w-12 h-12 border border-white/20 flex items-center justify-center text-white hover:bg-primary hover:border-primary transition-all"
            >
              <ChevronRight size={20} />
            </button>
          </div>
        </motion.div>
      </div>
    </section>
  );
}