import { useState } from "react";
import { createFileRoute, Link } from "@tanstack/react-router";
import { PageHero } from "@/components/site/PageHero";
import { Reveal } from "@/components/site/Reveal";
import { SectionHeading } from "@/components/site/SectionHeading";
import { MagneticButton } from "@/components/site/MagneticButton";
import { QuoteModal } from "@/components/site/QuoteModal";
import { TESTIMONIALS } from "@/lib/site-data";
import { Star, CheckCircle2, Quote, ArrowUpRight, Sparkles, MessageSquare } from "lucide-react";

export const Route = createFileRoute("/testimonials")({
  component: Testimonials,
  head: () => ({
    meta: [
      { title: "Testimonials & Reviews — Create it Simple Technologies Pvt Ltd" },
      { name: "description", content: "Read real client reviews and testimonials from business owners, founders, and enterprise teams who built digital experiences with Create it Simple Technologies Pvt Ltd." },
      { property: "og:title", content: "Testimonials & Reviews — Create it Simple Technologies Pvt Ltd" },
      { property: "og:description", content: "Read real client reviews and testimonials from business owners, founders, and enterprise teams." },
      { property: "og:url", content: "https://createitsimple.com/testimonials" },
    ],
    links: [{ rel: "canonical", href: "https://createitsimple.com/testimonials" }],
  }),
});

function Testimonials() {
  const [isQuoteOpen, setIsQuoteOpen] = useState(false);

  // Extended testimonial details matching 12 site-data entries
  const testimonialsData = TESTIMONIALS.map((t, idx) => {
    const extraInfo = [
      { company: "KMPL Group", service: "Enterprise Website & Portal", bg: "from-blue-600 to-indigo-600" },
      { company: "Aerial Tech", service: "Web Application & UI", bg: "from-emerald-600 to-teal-600" },
      { company: "TurfX Sports", service: "Booking Platform & eCommerce", bg: "from-purple-600 to-pink-600" },
      { company: "LogoV Branding", service: "Brand Identity & Site", bg: "from-amber-500 to-orange-600" },
      { company: "Novaledger SaaS", service: "SaaS Dashboard Development", bg: "from-cyan-600 to-blue-600" },
      { company: "Loom & Fern Store", service: "eCommerce Optimization", bg: "from-rose-600 to-red-600" },
      { company: "TCPL Logistics", service: "Logistics Web Portal", bg: "from-indigo-600 to-blue-700" },
      { company: "Agribari Tech", service: "Agri Marketplace Platform", bg: "from-emerald-500 to-green-600" },
      { company: "Orimet Solutions", service: "Corporate Web Architecture", bg: "from-violet-600 to-purple-600" },
      { company: "CG Ki Awaaz", service: "Welfare & Publishing Portal", bg: "from-amber-600 to-red-600" },
      { company: "Circuitly AI", service: "AI Dashboard & Web App", bg: "from-sky-500 to-indigo-600" },
      { company: "Top Group", service: "Property Showcase Platform", bg: "from-teal-600 to-emerald-700" },
    ][idx % 12];

    return {
      ...t,
      ...extraInfo,
      rating: 5,
      initials: t.name.split(" ").map((n) => n[0]).join(""),
    };
  });

  return (
    <>
      {/* Page Hero */}
      <PageHero
        eyebrow="Client Reviews & Feedback"
        title={
          <>
            Trusted by businesses <span className="text-gradient">with big ambitions.</span>
          </>
        }
        description="Read real experiences and reviews from founders, business leaders, and growing brands who partnered with Create it Simple Technologies Pvt Ltd to build high-performance web systems."
      />

      {/* Social Proof Stats Bar */}
      <section className="px-4 sm:px-6 py-8 border-y border-slate-200/80 dark:border-white/10 glass bg-white/50 dark:bg-slate-900/50">
        <div className="mx-auto max-w-7xl grid grid-cols-2 md:grid-cols-4 gap-6 text-center select-none">
          <div>
            <div className="text-3xl sm:text-4xl font-extrabold text-foreground tracking-tight">4.9 / 5</div>
            <div className="mt-1 text-xs sm:text-sm text-muted-foreground font-medium flex items-center justify-center gap-1">
              <Star className="h-4 w-4 fill-amber-400 text-amber-400" /> Client Rating
            </div>
          </div>
          <div>
            <div className="text-3xl sm:text-4xl font-extrabold text-foreground tracking-tight">180+</div>
            <div className="mt-1 text-xs sm:text-sm text-muted-foreground font-medium">Projects Delivered</div>
          </div>
          <div>
            <div className="text-3xl sm:text-4xl font-extrabold text-foreground tracking-tight">98%</div>
            <div className="mt-1 text-xs sm:text-sm text-muted-foreground font-medium">On-Time Launch Rate</div>
          </div>
          <div>
            <div className="text-3xl sm:text-4xl font-extrabold text-foreground tracking-tight">100%</div>
            <div className="mt-1 text-xs sm:text-sm text-muted-foreground font-medium">Client Satisfaction</div>
          </div>
        </div>
      </section>

      {/* 6 Testimonials Grid */}
      <section className="px-4 sm:px-6 py-20">
        <div className="mx-auto max-w-7xl">
          <SectionHeading
            eyebrow="What Our Clients Say"
            title={
              <>
                Real feedback from <span className="text-gradient">real partnerships.</span>
              </>
            }
            description="Here is what founders and business owners have to say about working with our team."
          />

          <div className="mt-14 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
            {testimonialsData.map((item, index) => (
              <Reveal key={item.name} delay={index * 0.06}>
                <div className="glass bg-white/80 dark:bg-slate-900/80 rounded-3xl p-6 sm:p-8 border border-slate-200/90 dark:border-white/10 hover:border-primary/50 transition-all duration-300 h-full flex flex-col justify-between relative group">
                  {/* Subtle top quote background mark */}
                  <Quote className="absolute top-6 right-6 h-10 w-10 text-slate-200 dark:text-slate-800/60 pointer-events-none group-hover:text-primary/20 transition-colors" />

                  <div className="space-y-4 relative z-10">
                    {/* Star Rating */}
                    <div className="flex items-center gap-1">
                      {[...Array(item.rating)].map((_, i) => (
                        <Star key={i} className="h-4 w-4 fill-amber-400 text-amber-400" />
                      ))}
                    </div>

                    {/* Quote Text */}
                    <p className="text-sm sm:text-base text-foreground leading-relaxed italic">
                      "{item.quote}"
                    </p>
                  </div>

                  {/* Client Info Footer */}
                  <div className="mt-8 pt-6 border-t border-slate-200/70 dark:border-white/10 flex items-center justify-between gap-3 relative z-10">
                    <div className="flex items-center gap-3.5 min-w-0">
                      {/* Avatar Initials Badge */}
                      <div className={`h-11 w-11 rounded-2xl bg-gradient-to-br ${item.bg} text-white flex items-center justify-center font-bold text-sm shadow-md shrink-0`}>
                        {item.initials}
                      </div>

                      <div className="min-w-0">
                        <div className="font-bold text-sm text-foreground truncate flex items-center gap-1.5">
                          <span>{item.name}</span>
                          <CheckCircle2 className="h-3.5 w-3.5 text-blue-500 shrink-0" />
                        </div>
                        <div className="text-xs text-muted-foreground truncate">
                          {item.role} · <span className="font-medium text-foreground/80">{item.company}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Call To Action Section */}
      <section className="px-4 sm:px-6 py-20 relative overflow-hidden">
        <div className="mx-auto max-w-5xl glass-strong bg-white/90 dark:bg-slate-900/90 rounded-3xl p-8 sm:p-14 border border-slate-200/90 dark:border-white/10 glow-ring text-center space-y-6">
          <span className="inline-flex items-center gap-2 rounded-full bg-primary/10 text-primary px-3.5 py-1 text-xs font-mono font-bold uppercase tracking-wider">
            <Sparkles className="h-3.5 w-3.5" /> Start Your Project
          </span>
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight">
            Ready to become our next <span className="text-gradient">success story?</span>
          </h2>
          <p className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
            Let's discuss your project goals, timelines, and technical scope. We'll craft a custom solution designed for real business growth.
          </p>

          <div className="pt-4 flex flex-wrap items-center justify-center gap-4">
            <MagneticButton onClick={() => setIsQuoteOpen(true)}>
              Request a Free Quote <ArrowUpRight className="h-4 w-4" />
            </MagneticButton>

            <Link
              to="/client-stories"
              className="inline-flex items-center justify-center gap-2 rounded-full border border-slate-200 dark:border-slate-800 bg-slate-100/80 dark:bg-slate-800/80 px-6 py-3 text-sm font-semibold text-foreground hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors"
            >
              <MessageSquare className="h-4 w-4 text-primary" /> View Brand Partners
            </Link>
          </div>
        </div>
      </section>

      {/* Quote Modal */}
      <QuoteModal isOpen={isQuoteOpen} onClose={() => setIsQuoteOpen(false)} />
    </>
  );
}