"use client";

import { Star, Quote } from "lucide-react";

interface Review {
  name: string;
  title?: string;
  content: string;
  rating: number;
  date: string;
}

const reviews: Review[] = [
  {
    name: "Martha S.",
    title: "Customer Review",
    content: "Best electricians in South Texas! We won't use anyone else. Quality service and their prices were fair. We were able to schedule the service right away and didn't have to waste time waiting around. Great to find a company we can trust.",
    rating: 5,
    date: "Verified Customer"
  },
  {
    name: "Ann Major",
    title: "Local Guide · 206 Reviews",
    content: "I've been a Budd Electric believer for over 30 years and have found them to be reliable and competent. I never hire anyone else.",
    rating: 5,
    date: "1 year ago"
  },
  {
    name: "Bill Hall",
    title: "Contractor · 5 Reviews",
    content: "I use Budd Electric exclusively for all my electrical work. Before moving to Corpus Christi eight years ago, I was a general contractor in the greater Dallas area for 20 years. Budd Electric is the only company I trust completely.",
    rating: 5,
    date: "2 years ago"
  },
  {
    name: "Mitchell Engle",
    title: "8 Reviews",
    content: "Outstanding service and total integrity. Highly recommend!",
    rating: 5,
    date: "1 year ago"
  },
  {
    name: "Michael Bellipanni",
    title: "Local Guide · 130 Reviews",
    content: "They donated the labor for my Habitat for Humanity home. They did great work. I was back for a small issue. They fixed a likely faulty outlet. Everything was perfect.",
    rating: 5,
    date: "5 years ago"
  },
  {
    name: "Pam Holloway",
    title: "9 Reviews",
    content: "When I called for service, staff was very polite and responded right away when I needed the service work done. Costs were in line with others in the city. Service team was very polite and cleaned up after service.",
    rating: 5,
    date: "7 years ago"
  },
  {
    name: "Lisa Ayala",
    title: "7 Reviews",
    content: "Very professional and fair pricing. They did a good job.",
    rating: 5,
    date: "4 years ago"
  },
  {
    name: "J. Oden",
    title: "Local Guide · 16 Reviews",
    content: "We've used Budd Electric for some small house jobs we didn't feel comfortable doing ourselves. They always do good work. Yes it may seem expensive, but I find it reassuring to know something as important as electrical work is done professionally.",
    rating: 5,
    date: "7 years ago"
  }
];

export default function ReviewCarousel() {
  // Duplicate reviews for seamless infinite scrolling
  const duplicatedReviews = [...reviews, ...reviews];

  const renderStars = (rating: number) => {
    return (
      <div className="flex gap-1">
        {[...Array(5)].map((_, i) => (
          <Star
            key={i}
            size={16}
            className={i < rating ? "text-[color:var(--brand)] fill-current" : "text-gray-300"}
          />
        ))}
      </div>
    );
  };

  return (
    <section className="py-20 bg-white overflow-hidden">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="text-center max-w-2xl mx-auto mb-12">
          <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">
            Client Testimonials
          </p>
          <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display">
            Trusted by Our Community
          </h2>
          <p className="text-[color:var(--muted)] mt-4">
            Over 50 years of excellence, backed by hundreds of satisfied customers
          </p>
        </div>

        {/* Infinite Scrolling Container with Fade Edges */}
        <div className="relative overflow-hidden pb-16">
          {/* Left Fade */}
          <div className="absolute left-0 top-0 bottom-16 w-48 bg-gradient-to-r from-white/95 via-white/60 to-transparent z-10 pointer-events-none" />
          {/* Right Fade */}
          <div className="absolute right-0 top-0 bottom-16 w-48 bg-gradient-to-l from-white/95 via-white/60 to-transparent z-10 pointer-events-none" />

          <div className="flex gap-8 animate-scroll">
            {duplicatedReviews.map((review, index) => (
              <div
                key={index}
                className="w-[450px] flex-shrink-0"
              >
                <div className="bg-white rounded-lg p-6 h-full relative border border-gray-100 transition-all duration-300 hover:scale-105 hover:-translate-y-2 cursor-pointer shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)] hover:shadow-[0_20px_40px_-8px_rgba(0,0,0,0.15)]">
                  {/* Quote Icon */}
                  <div className="absolute top-4 right-4 opacity-5">
                    <Quote size={50} className="text-[color:var(--brand)]" />
                  </div>

                  <div className="relative z-10">
                    {/* Rating */}
                    <div className="flex justify-center mb-3">
                      {renderStars(review.rating)}
                    </div>

                    {/* Review Content */}
                    <blockquote className="text-sm text-[color:var(--ink)] text-center mb-4 leading-relaxed font-medium min-h-[90px] flex items-center justify-center">
                      "{review.content}"
                    </blockquote>

                    {/* Reviewer Info */}
                    <div className="text-center">
                      <p className="font-bold text-[color:var(--ink)] text-sm">
                        {review.name}
                      </p>
                      {review.title && (
                        <p className="text-xs text-[color:var(--muted)] mt-1">
                          {review.title}
                        </p>
                      )}
                      <p className="text-xs text-gray-400 mt-1">
                        {review.date}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Google Reviews Link */}
        <div className="text-center mt-12">
          <p className="text-[color:var(--muted)] mb-4">
            See more reviews on Google
          </p>
          <a
            href="https://www.google.com/search?q=budd+electric+corpus+christi+reviews"
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center gap-2 text-[color:var(--brand)] font-bold uppercase text-sm tracking-widest hover:underline"
          >
            View All Reviews
            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
            </svg>
          </a>
        </div>
      </div>
    </section>
  );
}
