import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
import { Star, Quote } from "lucide-react";

const TestimonialsPage = () => {
  const testimonials = [
    {
      quote: "Greg's expertise saved us thousands during our audit. His calm approach and deep knowledge gave us complete confidence throughout the process. We couldn't have asked for better representation.",
      initials: "M.R.",
      name: "Michael R.",
      role: "Small Business Owner",
      business: "Construction Company",
      rating: 5,
      featured: true
    },
    {
      quote: "Twenty years of working with Greg, and he still finds new ways to optimize our tax strategy. Truly a partner in our business success. His proactive approach has saved us countless hours and dollars.",
      initials: "D.S.",
      name: "David S.",
      role: "Real Estate Developer",
      business: "Property Development",
      rating: 5,
      featured: true
    },
    {
      quote: "Professional, responsive, and incredibly thorough. Greg handles our family's complex tax situation with expertise we trust completely. He explains everything clearly and makes tax season stress-free.",
      initials: "L.T.",
      name: "Linda T.",
      role: "Family Client",
      business: "Personal Taxes",
      rating: 5,
      featured: true
    },
    {
      quote: "When the IRS came knocking, Greg was our knight in shining armor. His representation was exceptional, and he negotiated a settlement we never thought possible.",
      initials: "R.M.",
      name: "Robert M.",
      role: "Restaurant Owner",
      business: "Food Service",
      rating: 5
    },
    {
      quote: "Greg helped us choose the right business structure from day one. His guidance on entity selection and tax planning set us up for success from the start.",
      initials: "S.P.",
      name: "Sarah P.",
      role: "Tech Entrepreneur",
      business: "Software Startup",
      rating: 5
    },
    {
      quote: "The monthly bookkeeping service has been a game-changer for our practice. Clean books, timely reports, and valuable insights that help us make better business decisions.",
      initials: "J.H.",
      name: "Dr. Jennifer H.",
      role: "Medical Practice Owner",
      business: "Healthcare",
      rating: 5
    },
    {
      quote: "Greg's payroll service is seamless and reliable. Never a missed deadline, always compliant, and frees us to focus on growing our business instead of paperwork.",
      initials: "T.W.",
      name: "Thomas W.",
      role: "Manufacturing Manager",
      business: "Manufacturing",
      rating: 5
    },
    {
      quote: "After years of doing our own taxes, switching to Greg was the best decision we made. His attention to detail caught deductions we'd been missing for years.",
      initials: "A.K.",
      name: "Andrea K.",
      role: "Retired Couple",
      business: "Personal Taxes",
      rating: 5
    },
    {
      quote: "Greg's business consulting helped us navigate a complex acquisition. His financial analysis and strategic advice were invaluable throughout the entire process.",
      initials: "M.D.",
      name: "Mark D.",
      role: "Business Owner",
      business: "Retail Chain",
      rating: 5
    }
  ];

  const featuredTestimonials = testimonials.filter(t => t.featured);
  const regularTestimonials = testimonials.filter(t => !t.featured);

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section className="py-24 bg-gradient-subtle">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-display-xl font-display font-bold text-forest mb-6">
              Client Success Stories
            </h1>
            <p className="text-body-lg text-sage max-w-3xl mx-auto mb-8">
              For over 20 years, we've helped Corpus Christi families and businesses achieve financial clarity and success. Here's what our clients have to say about their experience.
            </p>
            
            {/* Trust Stats */}
            <div className="flex flex-col sm:flex-row gap-8 justify-center items-center text-center">
              <div>
                <div className="text-4xl font-display font-bold text-brass mb-1">500+</div>
                <div className="text-sage">Happy Clients</div>
              </div>
              <div>
                <div className="text-4xl font-display font-bold text-brass mb-1">99%</div>
                <div className="text-sage">Client Retention</div>
              </div>
              <div>
                <div className="text-4xl font-display font-bold text-brass mb-1">20+</div>
                <div className="text-sage">Years Experience</div>
              </div>
            </div>
          </div>
        </section>

        {/* Featured Testimonials */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
              Featured Client Stories
            </h2>
            
            <div className="grid lg:grid-cols-3 gap-8 mb-16">
              {featuredTestimonials.map((testimonial, index) => (
                <Card key={index} className="rounded-2xl card-elevation hover:shadow-lg gentle-transition">
                  <CardContent className="p-8">
                    {/* Quote Icon */}
                    <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center mb-6">
                      <Quote className="w-6 h-6 text-brass" strokeWidth={1.5} />
                    </div>
                    
                    {/* Stars */}
                    <div className="flex gap-1 mb-6">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star key={i} className="w-5 h-5 fill-brass text-brass" />
                      ))}
                    </div>
                    
                    {/* Quote */}
                    <blockquote className="text-sage mb-6 leading-relaxed italic">
                      "{testimonial.quote}"
                    </blockquote>
                    
                    {/* Attribution */}
                    <div className="flex items-center gap-4">
                      <div className="w-12 h-12 bg-brass/20 rounded-full flex items-center justify-center">
                        <span className="font-display font-semibold text-brass">
                          {testimonial.initials}
                        </span>
                      </div>
                      <div>
                        <div className="font-medium text-forest">{testimonial.name}</div>
                        <div className="text-sm text-sage">{testimonial.role}</div>
                        <div className="text-xs text-sage/70">{testimonial.business}</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* All Testimonials Grid */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <h2 className="text-display-lg font-display font-semibold text-forest mb-12 text-center">
              More Client Reviews
            </h2>
            
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
              {regularTestimonials.map((testimonial, index) => (
                <Card key={index} className="rounded-2xl card-elevation bg-card">
                  <CardContent className="p-6">
                    {/* Stars */}
                    <div className="flex gap-1 mb-4">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star key={i} className="w-4 h-4 fill-brass text-brass" />
                      ))}
                    </div>
                    
                    {/* Quote */}
                    <blockquote className="text-sage mb-4 leading-relaxed text-sm italic">
                      "{testimonial.quote}"
                    </blockquote>
                    
                    {/* Attribution */}
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 bg-brass/20 rounded-full flex items-center justify-center">
                        <span className="font-display font-semibold text-brass text-sm">
                          {testimonial.initials}
                        </span>
                      </div>
                      <div>
                        <div className="font-medium text-forest text-sm">{testimonial.name}</div>
                        <div className="text-xs text-sage">{testimonial.role}</div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-24 bg-gradient-hero">
          <div className="container mx-auto px-4 text-center">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-display-lg font-display font-semibold text-cream mb-6">
                Ready to Join Our Success Stories?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Experience the same level of professional service and personalized attention that has earned us these testimonials for over 20 years.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <button className="bg-cream text-forest hover:bg-cream/90 btn-shadow text-lg px-8 py-3 rounded-2xl gentle-transition font-medium">
                  Schedule Free Consultation
                </button>
                
                <button 
                  className="border border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl gentle-transition"
                  onClick={() => window.open('tel:+13618543711')}
                >
                  Call (361) 854-3711
                </button>
              </div>
              
              <p className="text-cream/70 text-sm mt-6">
                Join hundreds of satisfied clients • Same-day response guaranteed
              </p>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default TestimonialsPage;