"use client";

import { motion } from "framer-motion";
import { Star, Quote, Play } from "lucide-react";
import Image from "next/image";

const testimonials = [
  {
    name: "Ayşe Y.",
    platform: "Google Yorumu",
    text: "Ege'de gördüğüm en kaliteli mekanlardan biri. Yemekler harika, denizi zaten muhteşem. Özellikle kokteyllerini denemelisiniz.",
    rating: 5,
  },
  {
    name: "David M.",
    platform: "TripAdvisor",
    text: "Mükemmel bir deneyimdi. Ailece geldik ve çocuklar da biz de çok eğlendik. Personel çok ilgili ve güler yüzlüydü.",
    rating: 5,
  },
  {
    name: "Caner K.",
    platform: "Google Yorumu",
    text: "Harika bir atmosfer. Akşam yemeği için tercih ettik, gün batımı manzarası eşliğinde unutulmaz bir anı oldu.",
    rating: 4,
  },
];

export default function VideoTestimonials() {
  return (
    <section className="bg-sea-dark text-white overflow-hidden relative">
      <div className="grid lg:grid-cols-2">

        {/* Video / Image Panel */}
        <div className="relative h-[50vh] lg:h-auto min-h-[500px] overflow-hidden">
          <Image
            src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=80&w=1200"
            alt="Moy Beach Video"
            fill
            className="object-cover"
            sizes="(max-width: 1024px) 100vw, 50vw"
          />
          <div className="absolute inset-0 bg-sea-dark/50 z-10" />

          {/* Play button overlay */}
          <div className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-6 p-8 text-center">
            <a
              href="https://www.youtube.com/@moybeach"
              target="_blank"
              rel="noreferrer"
              className="group w-20 h-20 bg-white/15 hover:bg-white/25 border-2 border-white/60 hover:border-white rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 backdrop-blur-sm"
              aria-label="Videoyu izle"
            >
              <Play className="w-7 h-7 text-white ml-1 group-hover:scale-110 transition-transform" fill="white" />
            </a>
            <p className="text-sand/80 text-sm tracking-wide">Moy Beach&apos;i Keşfedin</p>
          </div>
        </div>

        {/* Testimonials Panel */}
        <div className="py-20 px-8 lg:px-14 flex flex-col justify-center">
          <div className="flex items-center gap-3 mb-4">
            <span className="w-8 h-px bg-coral" />
            <h2 className="text-sm font-bold tracking-widest uppercase text-coral">Referanslar</h2>
          </div>
          <h3 className="text-4xl md:text-5xl font-serif mb-10">Misafirlerimiz<br />Ne Diyor?</h3>

          <div className="space-y-6">
            {testimonials.map((testimonial, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: 40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, delay: index * 0.15 }}
                className="bg-white/6 hover:bg-white/10 p-6 rounded-2xl relative border border-white/5 hover:border-white/10 transition-colors duration-300"
              >
                <Quote className="absolute top-5 right-6 text-coral/20 w-10 h-10" />

                {/* Stars */}
                <div className="flex text-coral mb-3">
                  {[...Array(5)].map((_, i) => (
                    <Star
                      key={i}
                      className={`w-3.5 h-3.5 ${i < testimonial.rating ? "fill-current" : "opacity-25"}`}
                    />
                  ))}
                </div>

                <p className="text-base italic text-sand-light/90 mb-5 leading-relaxed">
                  &quot;{testimonial.text}&quot;
                </p>

                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 bg-coral rounded-full flex items-center justify-center font-bold text-sm shrink-0">
                    {testimonial.name.charAt(0)}
                  </div>
                  <div>
                    <p className="font-medium text-sm">{testimonial.name}</p>
                    <p className="text-xs text-gray-400">{testimonial.platform}</p>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>

          {/* Aggregate rating */}
          <div className="mt-8 flex items-center gap-4 pt-6 border-t border-white/10">
            <div className="flex items-baseline gap-1">
              <span className="text-3xl font-bold font-serif">4.8</span>
              <span className="text-coral text-lg">/ 5</span>
            </div>
            <p className="text-sm text-gray-400 leading-snug">
              Google &amp; TripAdvisor değerlendirmelerine göre
              <br />
              <span className="text-sand/60">(150+ Yorum)</span>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}