import { useState, useRef } from "react";
import { motion, useInView } from "framer-motion";
import { ChevronDown, ChevronUp, Check } from "lucide-react";
import InquiryModal from "@/components/InquiryModal";

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 SERVICES = [
  {
    id: "dinner",
    title: "Dinner Companion",
    category: "Dining",
    description: "Impeccable company for Michelin-starred dining, private culinary experiences, or intimate restaurant evenings. Our companions excel in engaging conversation, culinary appreciation, and sophisticated table etiquette.",
    durations: [
      { label: "3 Hours", price: "₹15,000" },
      { label: "5 Hours", price: "₹22,000" },
    ],
    features: ["Restaurant Selection Assistance", "Chauffeur Coordination", "Flawless Etiquette", "Multilingual Conversation", "Pre-event Briefing"],
    faqs: [
      { q: "Can I select a specific restaurant?", a: "Absolutely. You may suggest any restaurant. Our companion can also recommend venues fitting your preferences and arrange reservations." },
      { q: "Is advance booking required?", a: "We recommend at least 48 hours notice to ensure the best match for your occasion." },
    ],
  },
  {
    id: "travel",
    title: "Travel Companion",
    category: "Travel",
    description: "Discreet and cultured companionship for international or domestic travel. Ensuring your journey is seamless, stimulating, and utterly luxurious. From business-class flights to five-star resorts, your companion adapts effortlessly.",
    durations: [
      { label: "Weekend (2 nights)", price: "₹1,00,000" },
      { label: "Week-long", price: "₹3,50,000" },
      { label: "Extended (Custom)", price: "On Request" },
    ],
    features: ["Itinerary Planning Assistance", "Language & Cultural Guidance", "VIP Access Coordination", "24/7 Availability", "Hotel Discretion Protocol"],
    faqs: [
      { q: "Does the companion arrange their own travel?", a: "Travel and accommodation for the companion are to be arranged by the client, following our standard protocol provided upon booking." },
      { q: "Is international travel available?", a: "Yes. Our companions hold valid passports and are experienced with international travel. Select destinations only." },
    ],
  },
  {
    id: "event",
    title: "Event Companion",
    category: "Social Events",
    description: "The perfect plus-one for galas, charity balls, film premieres, weddings, and high-society gatherings. Elegant, socially adept, and completely at ease in elite crowds.",
    durations: [
      { label: "4 Hours", price: "₹20,000" },
      { label: "Full Evening (7 hrs)", price: "₹32,000" },
    ],
    features: ["Red Carpet Ready Grooming", "Social Navigation", "Photography Etiquette", "Guest Introduction Skills", "After-party Availability"],
    faqs: [
      { q: "Will my companion know how to conduct themselves at formal events?", a: "All our companions are trained in formal etiquette, social navigation, and public decorum. They are accustomed to high-profile environments." },
    ],
  },
  {
    id: "corporate",
    title: "Corporate Event Partner",
    category: "Professional",
    description: "A polished professional to accompany you to business dinners, award ceremonies, board networking events, and international client entertainment. Reflects your high standards at every moment.",
    durations: [
      { label: "Half Day (4 hrs)", price: "₹18,000" },
      { label: "Full Day (8 hrs)", price: "₹32,000" },
    ],
    features: ["Business Acumen", "Discreet Networking Support", "Professional Grooming", "Confidential Briefing Accepted", "NDA Signing Available"],
    faqs: [
      { q: "Can the companion be briefed on my business context?", a: "Yes. We offer confidential pre-event briefings. Your companion can be made aware of key business context, relevant names, and protocol requirements." },
    ],
  },
  {
    id: "movie",
    title: "Movie & Entertainment Companion",
    category: "Entertainment",
    description: "Enjoy premieres, private screenings, theatre performances, stand-up shows, and live concerts with a companion who shares your cultural interests and brings genuine enthusiasm to every experience.",
    durations: [
      { label: "3 Hours", price: "₹12,000" },
      { label: "5 Hours", price: "₹18,000" },
    ],
    features: ["Cultural Appreciation", "Flexible Scheduling", "Post-event Dinner Optional", "Private Screening Access", "Concert & Theatre Etiquette"],
    faqs: [
      { q: "Can we attend multiple events in one booking?", a: "Yes, multi-event evenings are available under extended duration packages. Please specify this in your inquiry." },
    ],
  },
  {
    id: "city",
    title: "City Guide Companion",
    category: "Exploration",
    description: "Discover Mumbai, Delhi, Bangalore, and other cities through the eyes of a local connoisseur. From hidden culinary gems to exclusive art spaces, your companion curates an insider experience.",
    durations: [
      { label: "Half Day (4 hrs)", price: "₹14,000" },
      { label: "Full Day (8 hrs)", price: "₹25,000" },
    ],
    features: ["Insider City Knowledge", "Hidden Venue Access", "Curated Itinerary", "Transport Coordination", "Photography Assistance"],
    faqs: [
      { q: "Is this available in all cities you operate in?", a: "Yes. We have local companions available across Mumbai, Delhi, Bangalore, Hyderabad, Pune, and Indore." },
    ],
  },
  {
    id: "weekend",
    title: "Weekend Experience Partner",
    category: "Lifestyle",
    description: "Transform your weekend into a curated luxury experience. Spa retreats, hill stations, beach resorts, or city staycations — your companion ensures every moment is refined and memorable.",
    durations: [
      { label: "1 Night / 2 Days", price: "₹75,000" },
      { label: "2 Nights / 3 Days", price: "₹1,25,000" },
    ],
    features: ["Resort & Spa Access", "Activity Planning", "Personalized Itinerary", "Meals Included", "Complete Privacy Protocol"],
    faqs: [
      { q: "Can I request a specific destination?", a: "Yes. We accept requests for specific destinations across India. Some exotic locations may require additional notice." },
    ],
  },
];

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

export default function Services() {
  const [modalOpen, setModalOpen] = useState(false);
  const [active, setActive] = useState<string | null>(null);

  return (
    <div className="pt-20 min-h-screen">
      <InquiryModal open={modalOpen} onClose={() => setModalOpen(false)} />

      <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">What We Offer</span>
          <h1 className="font-serif text-5xl sm:text-6xl text-foreground mb-4">Our Services</h1>
          <p className="text-muted-foreground max-w-xl mx-auto text-base">
            From an intimate dinner to a weekend retreat — every experience is curated to the highest standard.
          </p>
        </FadeIn>
      </div>

      {/* Service nav */}
      <div className="sticky top-20 z-30 bg-background/95 border-b border-border backdrop-blur-sm overflow-x-auto">
        <div className="flex px-6 gap-0">
          {SERVICES.map(s => (
            <button
              key={s.id}
              onClick={() => document.getElementById(s.id)?.scrollIntoView({ behavior: "smooth", block: "start" })}
              className="px-5 py-4 text-xs tracking-widest uppercase text-muted-foreground hover:text-primary transition-colors whitespace-nowrap shrink-0 border-b-2 border-transparent hover:border-primary/40"
            >
              {s.category}
            </button>
          ))}
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-6 py-16 space-y-20">
        {SERVICES.map((svc, idx) => (
          <FadeIn key={svc.id} delay={0.05}>
            <div id={svc.id} className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start scroll-mt-32">
              <div>
                <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">{svc.category}</span>
                <h2 className="font-serif text-3xl sm:text-4xl text-foreground mb-5">{svc.title}</h2>
                <p className="text-muted-foreground leading-relaxed mb-8">{svc.description}</p>
                <ul className="space-y-2 mb-8">
                  {svc.features.map(f => (
                    <li key={f} className="flex items-center gap-3 text-sm text-muted-foreground">
                      <Check size={13} className="text-primary shrink-0" />
                      {f}
                    </li>
                  ))}
                </ul>
                {svc.faqs.length > 0 && (
                  <div>
                    <p className="text-xs tracking-wider uppercase text-primary mb-3">FAQ</p>
                    {svc.faqs.map(f => <FaqItem key={f.q} {...f} />)}
                  </div>
                )}
              </div>
              <div className="space-y-4">
                <p className="text-xs tracking-[0.25em] uppercase text-muted-foreground mb-4">Pricing & Durations</p>
                {svc.durations.map(d => (
                  <div key={d.label} className="flex items-center justify-between p-5 border border-border hover:border-primary/30 transition-colors">
                    <div>
                      <p className="text-sm text-foreground mb-0.5">{d.label}</p>
                      <p className="text-[10px] text-muted-foreground tracking-wider uppercase">All-inclusive package</p>
                    </div>
                    <p className="font-serif text-xl text-primary">{d.price}</p>
                  </div>
                ))}
                <button
                  onClick={() => setModalOpen(true)}
                  className="w-full py-4 bg-primary text-background text-xs tracking-[0.25em] uppercase hover:bg-primary/90 transition-colors mt-4"
                >
                  Request This Service
                </button>
              </div>
            </div>
            {idx < SERVICES.length - 1 && <div className="border-b border-border mt-20" />}
          </FadeIn>
        ))}
      </div>
    </div>
  );
}
