'use client';

import { Phone, Mail } from "lucide-react";
import { useState } from "react";
import { Reveal } from "@/components/shared/Reveal"

type FAQItem = {
  question: string;
  answer: React.ReactNode;
};

type FAQSectionProps = {
  faqs?: FAQItem[];
  eyebrow?: string;
  title?: string;
  description?: string;
};

const defaultFaqs: FAQItem[] = [
  {
    question: "Which is the best resort near Pune for weddings, staycations, and celebrations?",
    answer:(
      <>The Grand Heritage Resorts is one of the <strong>best resorts near Pune,</strong> offering luxury accommodations, elegant banquet halls, wedding lawns, destination wedding venues, and premium hospitality for weddings, family vacations, and special events.</>
    ),
  },
  {
    question: "Why choose The Grand Heritage Resorts as a luxury resort near Pune?",
    answer: (
      <>If you're looking for a <strong>luxury resort near Pune,</strong> we offer heritage-inspired architecture, spacious rooms, lush gardens, a swimming pool, multiple event venues, and personalized hospitality for an unforgettable experience.</>
    ),
  },
  {
    question: "Is The Grand Heritage Resorts a wedding venue in Pune with accommodation?",
    answer: (
      <>Yes. We are a premium <strong>wedding venue in Pune</strong> with comfortable accommodation, making us the ideal choice for <strong>destination weddings,</strong> multi-day celebrations, and weddings with out-of-town guests.</>
    ),
  },
  {
    question: "Do you offer destination wedding packages in Pune?",
    answer: (
      <>Yes. <strong>Our destination wedding packages in Pune</strong> include wedding venues, accommodation, catering, decor, entertainment, and event planning, allowing you to celebrate your special day in one beautiful location.</>
    ),
  },
  {
    question: "Do you have a wedding lawn and banquet hall in Pune?",
    answer: (
      <>Yes. The Grand Heritage Resorts features beautifully landscaped <strong> wedding lawns in Pune</strong>  and elegant <strong> banquet halls for weddings,</strong> receptions, engagements, sangeet, haldi ceremonies, and private celebrations.</>
    ),
  },
  {
    question: "Is The Grand Heritage Resorts suitable for corporate events and team outings near Pune?",
    answer: (
      <>Absolutely. We are a preferred <strong>corporate event venue in Pune</strong> offering conference spaces, banquet halls, meeting rooms, team-building activities, and customized <strong>corporate outing</strong> and <strong>team outing</strong> packages.</>
    ),
  },
  {
    question: "Can I book the resort for conferences, seminars, and business meetings?",
    answer: (
      <>Yes. We host <strong>conference venues in Pune,</strong> corporate meetings, seminars, training programs, product launches, dealer meets, annual meetings, and business conferences with modern facilities and catering services.</>
    ),
  },
  {
    question: "Is your resort suitable for weekend staycations near Pune?",
    answer: (
      <>Yes. Whether you're planning a <strong>weekend getaway near Pune,</strong> a <strong>family staycation,</strong> or a <strong>couple staycation,</strong> our luxury rooms, peaceful surroundings, swimming pool, and premium amenities provide the perfect escape.</>
    ),
  },
  {
    question: "Do you have a swimming pool at your resort near Pune?",
    answer: (
      <>Yes. Our <strong>resort near Pune with a swimming pool</strong> is perfect for relaxing staycations, family holidays, poolside celebrations, and weekend vacations.</>
    ),
  },
  {
    question: "Can I book your resort for birthday parties and family celebrations?",
    answer: (
      <>Yes. We host <strong>birthday parties,</strong> first birthday celebrations, anniversaries, baby showers, naming ceremonies, family gatherings, private parties, and social events with customized event packages.</>
    ),
  },
  {
    question: "Is The Grand Heritage Resorts one of the best pre-wedding shoot locations near Pune?",
    answer: (
      <>Yes. Our heritage architecture, landscaped gardens, elegant courtyards, and scenic outdoor spaces make us one of the most sought-after <strong>pre-wedding shoot locations near Pune</strong> and an ideal destination for couple, fashion, maternity, and portfolio photoshoots.</>
    ),
  },
  {
    question:"Where is The Grand Heritage Resorts located?",
    answer:(
      <>The Grand Heritage Resorts is conveniently located on <strong>Pune Nagar Road,</strong> with easy access from <strong>Wagholi, Kharadi, Viman Nagar, Hadapsar, Magarpatta, Shirur, Ranjangaon MIDC, Pune Airport,</strong> and nearby areas, making it an ideal resort near Pune for weddings, corporate events, and weekend stays.</>
    ),
  },
  {
    question:"What events can I host at The Grand Heritage Resorts?",
    answer:"You can host destination weddings, wedding receptions, engagements, haldi ceremonies, mehendi, sangeet, birthday parties, anniversaries, baby showers, corporate events, conferences, team outings, family reunions, and private celebrations at our luxury resort near Pune.",
  },
  {
    question:"Is The Grand Heritage Resorts suitable for destination weddings near Pune?",
    answer:(<>Yes. As a leading <strong>destination wedding resort in Pune,</strong> we provide elegant venues, luxurious stays, customized wedding packages, catering, decor, and complete event management for intimate and grand celebrations.</>),
  },
  {
    question:"How can I book The Grand Heritage Resorts?",
    answer:(
      <>
      You can contact our team through the enquiry form or call us directly to check availability, schedule a venue visit, and receive a customized quote for your wedding, staycation, corporate event, or celebration.
      <br />
      <br />
      <strong><Phone className="inline-block align-middle mr-2" />Call: 
        +91 74472 74472
      {" | "}
        +91 74477 84778
      </strong>
              <br/><br/>
              <strong><Mail className="inline-block align-middle mr-2"/>Email:
        <span>{"booking"}</span>
        <span>{"@"}</span>
        <span>{"thegrandheritageresorts.com"}</span>
        </strong>
      </>
    ),
  },
];

export function FAQSection({
  faqs: customFaqs,
  eyebrow = "Frequently Asked Questions",
  title = "Everything you need to know before your visit.",
  description,
}: FAQSectionProps) {
  const faqs = customFaqs?.length ? customFaqs : defaultFaqs;
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  const toggleItem = (index: number) => {
    setOpenIndex((current) => (current === index ? null : index));
  };

  return (
    <section className="bg-sand px-12 py-16 md:py-16">
      <div className="mx-auto max-w-5xl">
        <Reveal>
        <div className="mx-auto max-w-3xl text-center">
          <span className="mb-4 block font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold-deep">
            {eyebrow}
          </span>
          <h2 className="font-serif text-3xl font-light italic leading-tight text-espresso md:text-4xl">
            {title}
          </h2>
          {description ? (
            <p className="mt-4 font-sans text-xs font-light leading-relaxed text-mahogany md:text-sm">
              {description}
            </p>
          ) : null}
        </div>
        </Reveal>

        <Reveal>
        <div className="mt-10 space-y-4">
          {faqs.map((item, index) => {
            const isOpen = openIndex === index;

            return (
              <div
                key={index}
                onPointerEnter={(e) => {
                  if (e.pointerType === "mouse") {
                    setOpenIndex(index);
                  }
                }}
                onPointerLeave={(e) => {
                  if (e.pointerType === "mouse") {
                    setOpenIndex(null);
                  }
                }}
                className="rounded-[1rem] border border-espresso/10 bg-ivory/80 px-6 shadow-sm transition-all duration-300 hover:shadow-md"
              >
                <button
                  type="button"
                  onClick={() => toggleItem(index)}
                  className="flex w-full items-center justify-between gap-4 py-6 text-left"
                >
                  <div className="flex gap-4">
                    <span className="mt-1 block font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold-deep">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <span className="font-sans text-sm font-medium text-espresso md:text-base">
                      {item.question}
                    </span>
                  </div>
                  <span
                    className={`inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-gold/40 text-xl leading-none text-gold transition-transform duration-300 ${
                      isOpen ? "rotate-45" : ""
                    }`}
                    style={{ transformOrigin: "center center" }}
                  >
                    +
                  </span>
                </button>

                <div
                  className={`grid transition-all duration-300 ease-out ${
                    isOpen ? "grid-rows-[1fr] pb-6" : "grid-rows-[0fr]"
                  }`}
                >
                  <div className="overflow-hidden">
                    <div className="whitespace-pre-line border-t border-espresso/10 pt-4 font-sans text-xs font-light leading-relaxed text-mahogany md:text-sm">
                      {item.answer}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        </Reveal>
      </div>
      
    </section>
  );
}

export default FAQSection;