import React from 'react';
import { motion } from 'motion/react';
import { Quote, Star, MapPin, Heart } from 'lucide-react';

interface Review {
  id: string;
  name: string;
  location: string;
  quote: string;
  town: string;
}

const reviews: Review[] = [
  {
    id: 'john-nash',
    name: 'John Nash',
    location: 'Hayle',
    town: 'Hayle',
    quote: "It was great having Paul over to help me sort out internet issues. It's like having your grandkid over, but he makes it easy and fun. Highly recommend!",
  },
  {
    id: 'nancy-reed',
    name: 'Nancy Reed',
    location: 'Penzance',
    town: 'Penzance',
    quote: "Paul makes it look so easy. He stops and takes the time to go through all the steps and helps you make notes. I really recommend him.",
  },
  {
    id: 'simon-bradley',
    name: 'Simon Bradley',
    location: 'Helston',
    town: 'Helston',
    quote: "I can't believe it! He wasn't even here for 15 minutes. He sorted out my printer, my screen, and got my Microsoft Outlook all working again. Watching him is kind of like watching a magician work. You don't know how he's doing it but it's all just happening. Highly recommended.",
  },
];

export const ReviewsSection: React.FC = () => {
  return (
    <section id="reviews" className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8 bg-white border-t border-b border-stone-200/80">
      <div className="max-w-6xl mx-auto">
        {/* Section Header */}
        <div className="text-center max-w-2xl mx-auto mb-12 sm:mb-16">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#56a0ab]/10 text-[#56a0ab] font-montserrat font-bold text-xs uppercase tracking-wider mb-3">
            <Heart className="w-3.5 h-3.5 fill-[#56a0ab]" />
            Local Word of Mouth
          </div>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-montserrat font-black text-[#56a0ab] uppercase tracking-wide mb-3">
            What Local Customers Say
          </h2>
          <p className="font-inter font-light text-stone-600 text-sm sm:text-base">
            Real feedback from neighbours and local residents across Southwest Cornwall.
          </p>
        </div>

        {/* Reviews Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
          {reviews.map((review, index) => (
            <motion.div
              key={review.id}
              initial={{ opacity: 0, y: 25 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.15 }}
              className="bg-[#f4eee1]/60 rounded-2xl p-6 sm:p-8 border border-stone-200/90 shadow-sm hover:shadow-md transition-all flex flex-col justify-between relative"
            >
              {/* Quote Icon Background Accent */}
              <Quote className="w-12 h-12 text-[#56a0ab]/15 absolute top-6 right-6 pointer-events-none" />

              <div>
                {/* 5 Stars */}
                <div className="flex items-center gap-1 mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" />
                  ))}
                </div>

                {/* Quote Text */}
                <p className="font-inter font-normal text-stone-700 text-base sm:text-lg leading-relaxed italic mb-6 relative z-10">
                  "{review.quote}"
                </p>
              </div>

              {/* Author Footer */}
              <div className="pt-4 border-t border-stone-300/60 flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-[#56a0ab] text-white font-montserrat font-bold text-sm flex items-center justify-center shrink-0 shadow-sm">
                  {review.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div>
                  <h3 className="font-montserrat font-bold text-base text-[#2a4a52]">
                    — {review.name}
                  </h3>
                  <p className="font-inter font-light text-xs text-stone-500 flex items-center gap-1">
                    <MapPin className="w-3 h-3 text-[#56a0ab]" />
                    {review.town}, Cornwall
                  </p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};