import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { Star, CheckCircle } from "lucide-react";

function FadeIn({ children, delay = 0, className = "" }: { children: React.ReactNode; delay?: number; className?: string }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-40px" });
  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 24 }}
      animate={inView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.65, delay, ease: [0.22, 1, 0.36, 1] }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

const REVIEWS = [
  { id: "r1", author: "R. Mehta", role: "CEO, Technology Enterprise", city: "Mumbai", content: "The level of sophistication is unmatched. Aanya was the perfect companion for our annual corporate gala. Intelligent, discreet, and utterly charming. Every colleague assumed she was a long-time acquaintance of mine.", rating: 5, date: "October 2024", service: "Corporate Event Partner", verified: true },
  { id: "r2", author: "S. Singhania", role: "Private Investor", city: "Delhi", content: "I required a companion for a weekend wine-tasting tour in Nashik. Vikram's knowledge of viticulture and his easy, sophisticated demeanor transformed an already good trip into something truly extraordinary. Elite Companions delivers exactly what they promise.", rating: 5, date: "November 2024", service: "Travel Companion", verified: true },
  { id: "r3", author: "Anonymous Client", role: "International Diplomat", city: "Bangalore", content: "Discretion was my highest priority. The team handled my request with absolute professionalism. Diya was a graceful and intellectually brilliant conversationalist throughout my week-long stay. No detail was overlooked.", rating: 5, date: "January 2025", service: "Travel Companion", verified: true },
  { id: "r4", author: "K. Agarwal", role: "Managing Director", city: "Hyderabad", content: "Aryan accompanied me to three consecutive evenings of client entertainment. His business acumen and social poise were exactly what I needed. Clients were impressed, and I could focus on the conversations that mattered.", rating: 5, date: "March 2025", service: "Corporate Event Partner", verified: true },
  { id: "r5", author: "P. Nair", role: "Creative Director", city: "Pune", content: "Booked Kavya for a gallery opening and subsequent dinner. Her knowledge of contemporary art elevated the entire experience. She was articulate, confident, and knew when to speak and when to simply be present. Rare quality.", rating: 5, date: "February 2025", service: "Event Companion", verified: true },
  { id: "r6", author: "Anonymous", role: "High Court Advocate", city: "Indore", content: "I was skeptical initially, but the reality far exceeded my expectations. The inquiry process was handled with complete professionalism. The experience itself was exactly as promised — refined, discreet, and utterly enjoyable.", rating: 5, date: "April 2025", service: "Dinner Companion", verified: true },
];

const STORIES = [
  { title: "A Night at the Opera", excerpt: "When our client required a companion for the opening night of the Mumbai Symphony Orchestra's season, we matched him with Meera — a classically trained musician with a deep appreciation for the art form. What followed was an evening of genuine connection, shared passion, and the kind of conversation rarely found in modern life.", companion: "Meera", city: "Mumbai" },
  { title: "Tokyo, for Business", excerpt: "A senior executive travelling to Tokyo for a week of client meetings requested company for evening engagements. Our travel companion provided not only graceful social presence but genuine insights into Japanese business culture that proved invaluable. The client reported it was the most successful trip of his career.", companion: "Rhea", city: "Delhi" },
  { title: "The Annual Gala", excerpt: "At the most prestigious charity gala of the Bangalore season, one of our corporate clients arrived with Diya. Photographs from the evening circulated on social pages for weeks. More importantly, the client secured three significant business introductions that evening — effortlessly facilitated by an exceptional companion.", companion: "Diya", city: "Bangalore" },
];

export default function Reviews() {
  return (
    <div className="pt-20 min-h-screen">
      <div className="py-20 text-center border-b border-border bg-card">
        <FadeIn>
          <span className="text-xs tracking-[0.35em] uppercase text-primary mb-3 block">Social Proof</span>
          <h1 className="font-serif text-5xl sm:text-6xl text-foreground mb-4">Reviews & Experiences</h1>
          <p className="text-muted-foreground max-w-xl mx-auto text-base">
            Words from those who have experienced the art of Elite Companions. All reviews are from verified bookings.
          </p>
        </FadeIn>
      </div>

      {/* Stats */}
      <section className="py-12 border-b border-border">
        <div className="max-w-4xl mx-auto px-6 grid grid-cols-3 gap-8 text-center">
          {[["4.96", "Average Rating"], ["1,200+", "Verified Reviews"], ["98%", "Repeat Clients"]].map(([val, label]) => (
            <FadeIn key={label}>
              <p className="font-serif text-4xl text-primary mb-1">{val}</p>
              <p className="text-xs tracking-[0.2em] uppercase text-muted-foreground">{label}</p>
            </FadeIn>
          ))}
        </div>
      </section>

      {/* Reviews grid */}
      <section className="max-w-7xl mx-auto px-6 py-20">
        <FadeIn className="mb-12">
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-2 block">Client Testimonials</span>
          <h2 className="font-serif text-3xl text-foreground">What Our Clients Say</h2>
        </FadeIn>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {REVIEWS.map((r, i) => (
            <FadeIn key={r.id} delay={i * 0.06}>
              <div className="p-7 border border-border hover:border-primary/20 transition-colors bg-card h-full flex flex-col">
                <div className="flex items-start justify-between mb-4">
                  <div className="flex gap-0.5">
                    {Array.from({ length: r.rating }).map((_, j) => (
                      <Star key={j} size={12} fill="hsl(var(--primary))" className="text-primary" />
                    ))}
                  </div>
                  {r.verified && (
                    <div className="flex items-center gap-1 border border-primary/20 px-2 py-0.5">
                      <CheckCircle size={10} className="text-primary" />
                      <span className="text-[9px] tracking-wider uppercase text-primary/60">Verified</span>
                    </div>
                  )}
                </div>
                <p className="text-sm text-muted-foreground leading-relaxed italic mb-6 flex-1">"{r.content}"</p>
                <div className="flex items-end justify-between mt-auto pt-4 border-t border-border/50">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center">
                      <span className="text-xs text-primary font-serif">{r.author[0]}</span>
                    </div>
                    <div>
                      <p className="text-xs text-foreground">{r.author}</p>
                      <p className="text-[10px] text-muted-foreground">{r.role}</p>
                    </div>
                  </div>
                  <div className="text-right">
                    <p className="text-[9px] text-muted-foreground/60 mb-0.5">{r.service}</p>
                    <p className="text-[9px] text-muted-foreground/40">{r.date}</p>
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </section>

      {/* Experience stories */}
      <section className="py-20 bg-card border-y border-border">
        <div className="max-w-5xl mx-auto px-6">
          <FadeIn className="mb-12">
            <span className="text-xs tracking-[0.3em] uppercase text-primary mb-2 block">Experience Stories</span>
            <h2 className="font-serif text-3xl text-foreground">Curated Moments</h2>
          </FadeIn>
          <div className="space-y-px bg-border">
            {STORIES.map((s, i) => (
              <FadeIn key={s.title} delay={i * 0.1}>
                <div className="bg-card p-10">
                  <div className="flex items-start justify-between mb-4">
                    <span className="text-xs tracking-[0.25em] uppercase text-primary">{s.companion} · {s.city}</span>
                  </div>
                  <h3 className="font-serif text-2xl text-foreground mb-4">{s.title}</h3>
                  <p className="text-muted-foreground leading-relaxed">{s.excerpt}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 text-center px-6">
        <FadeIn>
          <h2 className="font-serif text-4xl text-foreground mb-4">Add Your Own Experience</h2>
          <p className="text-muted-foreground mb-8 max-w-md mx-auto text-sm">After your first engagement, our team will invite you to share your experience confidentially.</p>
          <a href="/contact" className="inline-block px-10 py-4 border border-primary/40 text-primary text-xs tracking-[0.3em] uppercase hover:bg-primary hover:text-background transition-all duration-300">
            Book Your First Experience
          </a>
        </FadeIn>
      </section>
    </div>
  );
}
