"use client";

import { useInView } from "@/hooks/use-in-view";
import { Card, CardContent } from "@/components/ui/card";
import { Quote } from "lucide-react";

const testimonials = [
  {
    quote:
      "I pitched 'poop-powered main stage' to our board. Dead silence. Then I showed them the energy bill comparison. Now it's the centerpiece of our sustainability report.",
    name: "Sarah Chen",
    role: "Director, SunBurst Music Festival",
  },
  {
    quote:
      "Our attendees kept asking where the diesel generators were. When we told them the toilets were generating the electricity, it became the most-shared story of the entire weekend.",
    name: "Marcus Johnson",
    role: "Operations Lead, GreenFields Festival",
  },
  {
    quote:
      "Cleanest festival bathrooms I've ever experienced in 15 years of event production. The fact that they also powered our food court is a genuinely brilliant bonus.",
    name: "Priya Patel",
    role: "Founder, EchoVibe Music Fest",
  },
  {
    quote:
      "We cut from 14 diesel generators to 3. The noise reduction alone transformed the attendee experience. Our sustainability sponsors couldn't write checks fast enough.",
    name: "Jake Morrison",
    role: "Festival Manager, ToneFest",
  },
];

export function TestimonialsSection() {
  const { ref, isInView } = useInView(0.1);

  return (
    <section className="py-24 px-4" ref={ref}>
      <div className="mx-auto max-w-6xl">
        <div className="text-center mb-16">
          <h2
            className={`text-3xl sm:text-4xl md:text-5xl font-bold mb-4 ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
          >
            What Festival Organizers{" "}
            <span className="text-neon">Say</span>
          </h2>
          <p
            className={`text-cream-dim text-lg max-w-2xl mx-auto ${
              isInView ? "animate-fade-in-up" : "opacity-0"
            }`}
            style={{ animationDelay: "0.1s" }}
          >
            Don&apos;t just take our word for it. Here&apos;s what festival
            organizers say after making the switch.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {testimonials.map((testimonial, index) => (
            <Card
              key={testimonial.name}
              className={`card-hover ${
                isInView ? "animate-fade-in-up" : "opacity-0"
              }`}
              style={{ animationDelay: `${0.2 + index * 0.1}s` }}
            >
              <CardContent className="pt-6">
                <Quote className="h-8 w-8 text-neon/40 mb-4" />
                <p className="text-cream-dim leading-relaxed mb-6 italic">
                  &ldquo;{testimonial.quote}&rdquo;
                </p>
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-neon/20 flex items-center justify-center text-neon font-bold text-sm">
                    {testimonial.name
                      .split(" ")
                      .map((n) => n[0])
                      .join("")}
                  </div>
                  <div>
                    <p className="font-bold text-cream text-sm">
                      {testimonial.name}
                    </p>
                    <p className="text-cream-dim text-xs">
                      {testimonial.role}
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}