import { createFileRoute, Link } from "@tanstack/react-router";
import { Button } from "@/components/ui/button";
import { AnimatedSection } from "@/components/AnimatedSection";
import { SectionHeading } from "@/components/SectionHeading";

export const Route = createFileRoute("/testimonials")({
  head: () => ({
    meta: [
      { title: "Testimonials — SKS Associates | Client Reviews Coimbatore" },
      { name: "description", content: "Read what our clients say about SKS Associates. Trusted by 50+ businesses in Coimbatore for accounting and tax services." },
      { property: "og:title", content: "Client Testimonials — SKS Associates" },
      { property: "og:description", content: "Trusted by 50+ businesses in Coimbatore. Read our client reviews." },
    ],
  }),
  component: TestimonialsPage,
});

const testimonials = [
  {
    name: "Pranav Jewels",
    business: "Jewellery Business",
    text: "SKS Associates has been instrumental in managing our jewellery business accounts. Their precision with high-value transactions and GST compliance is unmatched.",
    rating: 5,
  },
  {
    name: "Swagath Enterprise",
    business: "Business Enterprise",
    text: "Excellent support for our enterprise. They handle all our tax filings and business registrations efficiently, allowing us to focus on growth.",
    rating: 5,
  },
  {
    name: "GV Nagarajan BPCL Dealers",
    business: "Fuel Station Dealer",
    text: "As a BPCL dealer, our accounting needs are specific and complex. SKS Associates understands the fuel sector perfectly and ensures 100% compliance.",
    rating: 5,
  },
  {
    name: "NT Industries",
    business: "Industrial Manufacturing",
    text: "Professional industrial accounting services. They manage our manufacturing accounts and inventory audits with great attention to detail.",
    rating: 5,
  },
  {
    name: "Karthika Printing Press",
    business: "Printing Services",
    text: "Reliable and timely service for our printing press. SKS Associates handles all our GST billing queries and filing on time, every time.",
    rating: 5,
  },
  {
    name: "Dazz Diamond Jewellery",
    business: "Diamond Jewellery",
    text: "Trustworthy partners for our diamond jewellery business. Their advice on tax planning and hallmarking compliance has been invaluable.",
    rating: 5,
  },
];

function Stars({ count }: { count: number }) {
  return (
    <div className="flex gap-1 text-gold">
      {[...Array(count)].map((_, i) => (
        <svg key={i} className="w-5 h-5 fill-current" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
      ))}
    </div>
  );
}

function TestimonialsPage() {
  return (
    <div>
      {/* Hero */}
      <section className="gradient-hero py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnimatedSection>
            <span className="inline-block px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase gradient-gold text-gold-foreground mb-4">
              Testimonials
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold font-heading text-primary-foreground leading-tight max-w-3xl">
              Trusted by <span className="text-gradient-gold">50+ Businesses</span>
            </h1>
            <p className="mt-6 text-lg text-primary-foreground/70 max-w-2xl">
              Hear from our satisfied clients across various industries in Coimbatore.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* Testimonials Grid */}
      <section className="py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {testimonials.map((t, i) => (
              <AnimatedSection key={t.name} delay={i * 0.06}>
                <div className="glass-card rounded-xl p-6 hover-lift h-full flex flex-col">
                  <Stars count={t.rating} />
                  <p className="mt-4 text-muted-foreground leading-relaxed flex-1">"{t.text}"</p>
                  <div className="mt-4 pt-4 border-t border-border flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full gradient-navy flex items-center justify-center text-sm font-bold text-primary-foreground">
                      {t.name.split(" ").map(n => n[0]).join("")}
                    </div>
                    <div>
                      <p className="font-semibold text-foreground text-sm">{t.name}</p>
                      <p className="text-xs text-muted-foreground">{t.business}</p>
                    </div>
                  </div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* More Trusted Clients */}
      <section className="py-16 bg-secondary/30 border-y border-border">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <AnimatedSection className="text-center mb-12">
            <h2 className="text-2xl font-bold font-heading">More Trusted Clients</h2>
            <p className="mt-2 text-muted-foreground text-sm max-w-xl mx-auto">
              Proud to partner with leading businesses across various sectors in Coimbatore.
            </p>
          </AnimatedSection>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
            {[
              "Green Farm",
              "SB Fruits",
              "Goldsmith",
              "Seyon Communication",
              "Meenakshi Trader's",
              "Smart Deals",
            ].map((client, i) => (
              <AnimatedSection key={client} delay={i * 0.05}>
                <div className="glass-card rounded-xl p-5 text-center hover-lift border border-border flex items-center justify-center min-h-[80px]">
                  <span className="font-semibold text-foreground tracking-wide font-heading text-sm">{client}</span>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 md:py-28 bg-secondary/50">
        <div className="mx-auto max-w-4xl px-4 text-center">
          <AnimatedSection>
            <h2 className="text-3xl md:text-4xl font-bold font-heading">
              Join Our Growing Family of <span className="text-gradient-gold">Satisfied Clients</span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg max-w-xl mx-auto">
              Experience the SKS Associates difference. Get started with a free consultation today.
            </p>
            <Link to="/contact" className="inline-block mt-8">
              <Button variant="hero" size="xl">Get Free Consultation</Button>
            </Link>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}