"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Card, CardContent } from "@/components/ui/card";
import { Quote, Star } from "lucide-react";
import { motion } from "framer-motion";

const testimonials = [
  {
    quote: "Alex transformed our growth strategy. We saw a 40% increase in MQLs within the first 3 months of working together.",
    author: "Sarah Chen",
    role: "CEO at TechFlow",
    result: "+40% MQLs"
  },
  {
    quote: "The growth audit was eye-opening. We were wasting thousands on inefficient channels. Now our CAC is down by 25%.",
    author: "Marcus Thorne",
    role: "Founder of SaaSly",
    result: "-25% CAC"
  },
  {
    quote: "Having Alex as a fractional partner is like having a secret weapon. The ROI has been incredible.",
    author: "Elena Rodriguez",
    role: "VP Marketing at ScaleUp",
    result: "3.5x Revenue Growth"
  }
];

export function Testimonials() {
  return (
    <section id="results" className="py-32 bg-neutral-50/50 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.03),transparent)] pointer-events-none" />
      
      <Container>
        <div className="text-center max-w-3xl mx-auto mb-20">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <Heading className="text-4xl md:text-5xl">Proven Results</Heading>
            <Subheading className="mt-6 text-lg text-neutral-600">
              Don't just take my word for it. Here's how I've helped other founders achieve their growth goals.
            </Subheading>
          </motion.div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {testimonials.map((t, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
            >
              <Card className="bg-white border-none shadow-xl shadow-neutral-200/50 h-full flex flex-col relative overflow-hidden group hover:-translate-y-2 transition-all duration-300">
                <div className="absolute top-0 left-0 w-1 h-full bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity" />
                <CardContent className="pt-10 pb-8 px-8 flex flex-col h-full">
                  <div className="flex gap-1 mb-6">
                    {[...Array(5)].map((_, i) => (
                      <Star key={i} className="w-4 h-4 fill-blue-600 text-blue-600" />
                    ))}
                  </div>
                  <Quote className="h-10 w-10 text-blue-600 mb-6 opacity-10 absolute top-8 right-8" />
                  <p className="text-xl text-neutral-800 font-medium leading-relaxed mb-10 flex-grow">"{t.quote}"</p>
                  <div className="flex justify-between items-center pt-6 border-t border-neutral-100">
                    <div>
                      <p className="font-bold text-neutral-900 text-lg">{t.author}</p>
                      <p className="text-sm text-neutral-500 font-medium">{t.role}</p>
                    </div>
                    <div className="bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-black shadow-sm">
                      {t.result}
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </Container>
    </section>
  );
}