import { useState, useRef } from "react";
import { Link } from "wouter";
import { motion, useInView } from "framer-motion";
import { Star, Shield, Eye, Award, ChevronDown, ChevronUp, Heart } from "lucide-react";
import { COMPANIONS, REVIEWS } from "@/lib/mock-data";
import InquiryModal from "@/components/InquiryModal";

const FAQS = [
  { q: "What is Elite Companions?", a: "Elite Companions is India's premier social concierge agency, connecting cultivated adults with verified companions for fine dining, travel, events, and meaningful social experiences." },
  { q: "Are your companions verified?", a: "Yes. Every companion undergoes a rigorous identity verification, background review, and personal interview process before joining our network." },
  { q: "How is my privacy protected?", a: "We maintain absolute confidentiality. Client identities are never shared, all communications are encrypted, and our team operates under strict non-disclosure protocols." },
  { q: "How do I make a booking?", a: "Submit an inquiry through our website or contact us directly via WhatsApp. Our concierge team will respond within 24 hours to arrange the details." },
  { q: "What cities do you serve?", a: "We currently operate in Mumbai, Delhi, Bangalore, Hyderabad, Pune, and Indore, with expansion planned to additional cities." },
];

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-border">
      <button
        className="w-full flex items-center justify-between py-5 text-left group"
        onClick={() => setOpen(v => !v)}
      >
        <span className="text-sm tracking-wide text-foreground group-hover:text-primary transition-colors">{q}</span>
        {open ? <ChevronUp size={16} className="text-primary shrink-0" /> : <ChevronDown size={16} className="text-muted-foreground shrink-0" />}
      </button>
      {open && (
        <motion.div
          initial={{ opacity: 0, height: 0 }}
          animate={{ opacity: 1, height: "auto" }}
          exit={{ opacity: 0, height: 0 }}
          className="pb-5"
        >
          <p className="text-sm text-muted-foreground leading-relaxed">{a}</p>
        </motion.div>
      )}
    </div>
  );
}

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

function CompanionCard({ c }: { c: typeof COMPANIONS[0] }) {
  const [fav, setFav] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const initials = c.name.slice(0, 2).toUpperCase();
  const gradients = [
    "from-amber-900/60 to-stone-900",
    "from-rose-900/40 to-stone-900",
    "from-emerald-900/40 to-stone-900",
    "from-indigo-900/40 to-stone-900",
    "from-amber-800/50 to-stone-900",
    "from-purple-900/40 to-stone-900",
    "from-teal-900/40 to-stone-900",
    "from-orange-900/40 to-stone-900",
  ];
  const grad = gradients[parseInt(c.id) % gradients.length];

  return (
    <>
      <InquiryModal open={modalOpen} onClose={() => setModalOpen(false)} companionName={c.name} />
      <motion.div
        whileHover={{ y: -4 }}
        transition={{ duration: 0.3 }}
        className="group relative bg-card border border-border overflow-hidden"
      >
        <div className={`relative h-64 bg-gradient-to-b ${grad} flex items-end justify-start p-5`}>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-24 h-24 rounded-full bg-primary/10 border border-primary/20 flex items-center justify-center">
              <span className="font-serif text-3xl text-primary/60">{initials}</span>
            </div>
          </div>
          <button
            className="absolute top-4 right-4 z-10 p-1.5 transition-colors"
            onClick={() => setFav(v => !v)}
          >
            <Heart size={16} fill={fav ? "hsl(var(--primary))" : "none"} className="text-primary transition-all" />
          </button>
          <div className="absolute bottom-4 left-4 z-10 flex items-center gap-2">
            <span
              className="w-1.5 h-1.5 rounded-full"
              style={{ backgroundColor: c.availability === "Online" ? "#4ade80" : "#6b7280" }}
            />
            <span className="text-xs text-muted-foreground">{c.availability}</span>
          </div>
        </div>
        <div className="p-5">
          <div className="flex items-start justify-between mb-2">
            <div>
              <h3 className="font-serif text-xl text-foreground">{c.name}</h3>
              <p className="text-xs tracking-wider text-muted-foreground uppercase mt-0.5">{c.city} · {c.age} yrs</p>
            </div>
            <div className="flex items-center gap-1 mt-1">
              <Star size={11} fill="hsl(var(--primary))" className="text-primary" />
              <span className="text-xs text-muted-foreground">{c.rating}</span>
            </div>
          </div>
          <p className="text-sm text-muted-foreground leading-relaxed mb-4">{c.snippet}</p>
          <div className="flex flex-wrap gap-1.5 mb-5">
            {c.interests.slice(0, 3).map(i => (
              <span key={i} className="text-[10px] tracking-widest uppercase px-2 py-0.5 border border-primary/20 text-primary/70">{i}</span>
            ))}
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm text-primary font-medium">{c.pricing}</span>
            <button
              onClick={() => setModalOpen(true)}
              className="text-[10px] tracking-[0.2em] uppercase px-4 py-2 border border-primary/40 text-primary hover:bg-primary hover:text-background transition-all duration-300"
            >
              Inquire
            </button>
          </div>
        </div>
      </motion.div>
    </>
  );
}

export default function Home() {
  const [modalOpen, setModalOpen] = useState(false);
  const featured = COMPANIONS.slice(0, 4);

  return (
    <div className="overflow-x-hidden">
      <InquiryModal open={modalOpen} onClose={() => setModalOpen(false)} />

      {/* HERO */}
      <section className="relative min-h-screen flex items-center justify-center overflow-hidden">
        <div
          className="absolute inset-0"
          style={{
            background: "radial-gradient(ellipse 80% 60% at 50% 80%, rgba(201,169,110,0.07) 0%, transparent 70%), linear-gradient(180deg, #0a0a0a 0%, #0f0f0f 100%)",
          }}
        />
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(201,169,110,0.5) 79px, rgba(201,169,110,0.5) 80px), repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(201,169,110,0.5) 79px, rgba(201,169,110,0.5) 80px)",
          }}
        />
        <div className="relative z-10 text-center px-6 max-w-4xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <span className="text-xs tracking-[0.4em] uppercase text-primary mb-6 block">Est. 2020 · India's Premier Social Concierge</span>
          </motion.div>
          <motion.h1
            className="font-serif text-5xl sm:text-7xl lg:text-8xl text-foreground leading-none mb-6"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 1, delay: 0.4, ease: [0.22, 1, 0.36, 1] }}
          >
            The Art of{" "}
            <em className="text-primary not-italic">Refined</em>
            <br />
            Companionship
          </motion.h1>
          <motion.p
            className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.8, delay: 0.7 }}
          >
            India's most distinguished social concierge agency — curating meaningful, professional companionship for discerning individuals who expect nothing less than exceptional.
          </motion.p>
          <motion.div
            className="flex flex-col sm:flex-row gap-4 justify-center"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.9 }}
          >
            <Link href="/companions">
              <span className="inline-block px-10 py-4 bg-primary text-background text-xs tracking-[0.3em] uppercase hover:bg-primary/90 transition-all duration-300 cursor-pointer">
                Meet Our Companions
              </span>
            </Link>
            <button
              onClick={() => setModalOpen(true)}
              className="px-10 py-4 border border-primary/40 text-primary text-xs tracking-[0.3em] uppercase hover:bg-primary/10 transition-all duration-300"
            >
              Private Inquiry
            </button>
          </motion.div>
        </div>
        <motion.div
          className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1.4 }}
        >
          <span className="text-[10px] tracking-widest uppercase text-muted-foreground/50">Scroll</span>
          <div className="w-px h-10 bg-gradient-to-b from-primary/40 to-transparent" />
        </motion.div>
      </section>

      {/* TRUST BADGES */}
      <section className="py-8 border-y border-border bg-card">
        <div className="max-w-5xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
          {[["500+", "Verified Companions"], ["10,000+", "Curated Experiences"], ["6", "Major Cities"], ["100%", "Confidential"]].map(([val, label]) => (
            <div key={label}>
              <p className="font-serif text-3xl text-primary mb-1">{val}</p>
              <p className="text-xs tracking-[0.2em] uppercase text-muted-foreground">{label}</p>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED COMPANIONS */}
      <section className="py-24 px-6 max-w-7xl mx-auto">
        <FadeIn className="text-center mb-16">
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Our Collection</span>
          <h2 className="font-serif text-4xl sm:text-5xl text-foreground">Featured Companions</h2>
        </FadeIn>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {featured.map((c, i) => (
            <FadeIn key={c.id} delay={i * 0.08}>
              <CompanionCard c={c} />
            </FadeIn>
          ))}
        </div>
        <FadeIn className="text-center mt-12">
          <Link href="/companions">
            <span className="inline-block px-10 py-4 border border-primary/30 text-primary text-xs tracking-[0.3em] uppercase hover:bg-primary hover:text-background transition-all duration-300 cursor-pointer">
              View All Companions
            </span>
          </Link>
        </FadeIn>
      </section>

      {/* WHY CHOOSE US */}
      <section className="py-24 bg-card border-y border-border">
        <div className="max-w-7xl mx-auto px-6">
          <FadeIn className="text-center mb-16">
            <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">The Difference</span>
            <h2 className="font-serif text-4xl sm:text-5xl text-foreground">Why Elite Companions</h2>
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            {[
              { icon: Shield, title: "Rigorous Verification", desc: "Every companion is personally interviewed, identity-verified, and background-checked. We curate a network of genuinely cultivated individuals." },
              { icon: Eye, title: "Absolute Discretion", desc: "Your privacy is our highest priority. All client information is protected by strict NDA protocols and end-to-end encrypted communications." },
              { icon: Award, title: "Concierge-Level Service", desc: "From your first inquiry to the final experience, our team handles every detail with the attentiveness of a five-star personal concierge." },
            ].map(({ icon: Icon, title, desc }, i) => (
              <FadeIn key={title} delay={i * 0.1}>
                <div className="p-8 border border-border hover:border-primary/30 transition-colors group">
                  <Icon size={20} className="text-primary mb-6" />
                  <h3 className="font-serif text-xl text-foreground mb-3">{title}</h3>
                  <p className="text-sm text-muted-foreground leading-relaxed">{desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* SERVICES TEASER */}
      <section className="py-24 px-6 max-w-7xl mx-auto">
        <FadeIn className="text-center mb-16">
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Experiences</span>
          <h2 className="font-serif text-4xl sm:text-5xl text-foreground">Our Services</h2>
        </FadeIn>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-px bg-border">
          {["Fine Dining", "Travel & Exploration", "Corporate Events", "Curated Lifestyle"].map((svc, i) => (
            <FadeIn key={svc} delay={i * 0.06} className="bg-background">
              <Link href="/services">
                <div className="p-8 group cursor-pointer hover:bg-card transition-colors h-full">
                  <div className="w-8 h-px bg-primary mb-6 group-hover:w-16 transition-all duration-500" />
                  <h3 className="font-serif text-lg text-foreground mb-2">{svc}</h3>
                  <span className="text-[10px] tracking-[0.2em] uppercase text-primary/60 group-hover:text-primary transition-colors">Explore</span>
                </div>
              </Link>
            </FadeIn>
          ))}
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="py-24 bg-card border-y border-border">
        <div className="max-w-7xl mx-auto px-6">
          <FadeIn className="text-center mb-16">
            <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Testimonials</span>
            <h2 className="font-serif text-4xl sm:text-5xl text-foreground">Client Experiences</h2>
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {REVIEWS.map((r, i) => (
              <FadeIn key={r.id} delay={i * 0.1}>
                <div className="p-8 border border-border hover:border-primary/20 transition-colors">
                  <div className="flex gap-0.5 mb-6">
                    {Array.from({ length: r.rating }).map((_, j) => (
                      <Star key={j} size={12} fill="hsl(var(--primary))" className="text-primary" />
                    ))}
                  </div>
                  <p className="text-sm text-muted-foreground leading-relaxed italic mb-6">"{r.content}"</p>
                  <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>
                    <span className="ml-auto text-[10px] tracking-wider text-primary/40 border border-primary/20 px-2 py-0.5">Verified</span>
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-24 px-6 max-w-3xl mx-auto">
        <FadeIn className="text-center mb-12">
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">FAQ</span>
          <h2 className="font-serif text-4xl sm:text-5xl text-foreground">Common Questions</h2>
        </FadeIn>
        <FadeIn>
          {FAQS.map(f => <FaqItem key={f.q} {...f} />)}
        </FadeIn>
      </section>

      {/* CTA */}
      <section
        className="py-32 px-6 text-center relative overflow-hidden"
        style={{ background: "radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,169,110,0.06) 0%, transparent 80%)" }}
      >
        <FadeIn>
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-4 block">Begin Your Journey</span>
          <h2 className="font-serif text-4xl sm:text-6xl text-foreground mb-6 leading-tight">
            An Exceptional Experience<br />
            <em className="text-primary not-italic">Awaits You</em>
          </h2>
          <p className="text-muted-foreground text-base mb-10 max-w-xl mx-auto">
            Your inquiry is handled with absolute discretion. Our concierge team responds within 24 hours.
          </p>
          <button
            onClick={() => setModalOpen(true)}
            className="inline-block px-12 py-4 bg-primary text-background text-xs tracking-[0.3em] uppercase hover:bg-primary/90 transition-all duration-300"
          >
            Submit Private Inquiry
          </button>
        </FadeIn>
      </section>
    </div>
  );
}
