"use client";

import { ChevronDown } from "lucide-react";
import { useState } from "react";
import { useRouter } from "next/navigation";
import Email2 from "./svgComponents/Email2";
import { motion } from "motion/react";

export const questions = [
  {
    question: "What is Lodging System?",
    answer:
      "Lodging System is an all-in-one hospitality management platform that helps hotels, motels, small hotels manage reservations, guest experiences, payments, housekeeping, and daily operations from one centralized system.",
  },

  {
    question: "Is Lodging System suitable for all property types?",
    answer:
      "Yes. Lodging System is designed for hotels, motels, small hotels, vacation rentals, and multi-property hospitality businesses.",
  },

  {
    question: "Can I manage multiple properties from one dashboard?",
    answer:
      "Absolutely. Lodging System allows you to manage multiple properties, users, reservations, rates, and operational workflows from a single centralized dashboard with real-time visibility.",
  },

  {
    question:
      "Does Lodging System support direct bookings and OTA integrations?",
    answer:
      "Yes. Lodging System includes a direct booking engine and channel management tools that synchronize rates, availability, and reservations across major booking platforms in real time.",
  },

  {
    question: "Can guests check in online or use contactless features?",
    answer:
      "Yes. Guests can enjoy digital-first experiences including online check-in, automated communication, contactless workflows, and mobile-friendly booking interactions.",
  },

  {
    question: "Is Lodging System cloud-based?",
    answer:
      "Yes. Lodging System is fully cloud-based, allowing you to securely access and manage your operations anytime from desktop, tablet, or mobile devices.",
  },

  {
    question: "How secure is guest and business data?",
    answer:
      "We use secure cloud infrastructure, controlled access permissions, and modern security practices to help protect guest information, payments, and operational data.",
  },

  {
    question: "Is the platform easy for hotel staff to learn?",
    answer:
      "Yes. Lodging System is designed with a modern and intuitive interface that helps hotel teams get started quickly with minimal training and simplified workflows.",
  },
];

export default function Faq() {
  const router = useRouter();
  const [email, setEmail] = useState("");

  const [openQuestionIndex, setOpenQuestionIndex] = useState<number | null>(
    null,
  );

  const toggleQuestionCards = (index: number) => {
    setOpenQuestionIndex((prev) => (prev === index ? null : index));
  };

  const handleSendEmail = () => {
    if (!email.trim()) return;

    router.push(
      `/contact-us?email=${encodeURIComponent(email)}#contact-us-form`,
    );
  };

  return (
    <div className="px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] py-[40px] lg:py-[80px] xl:py-[100px] flex flex-col md:flex-row justify-between gap-[20px] md:gap-[40px] lg:gap-[100px] xl:gap-[200px] bg-white relative overflow-hidden">
      <div className="flex flex-col gap-[25px] sm:gap-[32px] md:gap-[36px] lg:gap-[56px] xl:gap-[62px] w-full lg:w-[50%] xl:w-[45%] justify-start">
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.5,
          }}
          transition={{
            duration: 0.75,
            ease: "easeOut",
          }}
          className="flex flex-col gap-3 sm:gap-4 md:gap-4.5 lg:gap-5.5 xl:gap-6.5"
        >
          <div className="text-[28px] sm:text-[32px] md:text-[40px] lg:text-[48px] leading-[32px] sm:leading-[36px] md:leading-[50px] lg:leading-[54px] font-semibold figtree text-center md:text-left">
            Frequently Asked Questions
          </div>
          <div className="text-sm sm:text-base md:text-base lg:text-lg leading-[18px] sm:leading-[20px] md:leading-[20px] lg:leading-[24px] text-[#444444] figtree text-center md:text-left">
            Find answers to common questions about Lodging System, including
            platform features, integrations, security, onboarding, and hotel
            management capabilities.
          </div>
        </motion.div>
        <div className="hidden md:flex flex-col gap-4 bg-white relative overflow-hidden px-5 lg:px-6.5 py-[16px] sm:py-[26px] md:py-[32px] lg:py-[36px] xl:py-[46px] rounded-[16px] md:rounded-[24px] pr-4">
          <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[-45%] left-[-10%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
          <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[90%] left-[10%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
          <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[20%] left-[60%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
          <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[-80%] left-[40%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
          <div className="flex flex-col gap-2 md:gap-4 z-1">
            <div className="text-[14px] sm:text-[16px] md:text-[18px] lg:text-[22px] xl:text-[24px] leading-[16px] sm:leading-[18px] md:leading-[20px] lg:leading-[22px] xl:leading-[26px] font-semibold figtree text-center md:text-left">
              Still Have a Question?
            </div>
            <div className="text-[12px] sm:text-[14px] md:text-base lg:text-lg leading-[16px] sm:leading-[20px] md:leading-[22px] lg:leading-[24px] text-[#444444] figtree text-center md:text-left">
              Our team is here to help you explore features, integrations,
              pricing, and everything you need to simplify your hotel operations
              with Lodging System.
            </div>
          </div>
          <div className="flex flex-row justify-center lg:justify-start gap-[8px] md:gap-[10px] lg:gap-[30px] z-1">
            <div className="w-[70%] h-[32px] sm:h-[38px] md:h-[48px] lg:h-full rounded-[24px] lg:rounded-[36px] overflow-hidden relative bg-[#FFFFFF6B]">
              <Email2 className="absolute left-4 top-1/2 -translate-y-1/2 text-[#676767] w-4 h-4 sm:w-5 sm:h-5" />
              <input
                type="text"
                placeholder="Enter your email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className="w-full h-full px-4 lg:px-6.5 py-1 md:py-4 focus-visible:ring-0 pl-[40px] lg:pl-[45px] relative figtree text-[14px] lg:text-sm focus:outline-none focus-visible:outline-none"
                name="email"
                id="email"
              />
            </div>
            <button
              onClick={handleSendEmail}
              className="relative overflow-hidden px-5 py-0 md:px-6 md:py-3 bg-[#2c2c2c] text-white lg:rounded-full rounded-[24px] text-[12px] sm:text-[14px] lg:text-base font-semibold leading-[100%] transition-all duration-500 group cursor-pointer w-auto xl:w-fit whitespace-nowrap figtree"
            >
              <span className="relative z-10">Send Email</span>

              <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-500 ease-in-out group-hover:left-[95%]" />
            </button>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-2 w-full lg:w-[50%] xl:w-[55%] lg:mt-0">
        {questions.map((question, index) => (
          <div key={index} className="flex flex-col gap-2">
            {/* Question */}
            <div className="flex flex-col justify-between py-[8px] md:py-[12px] lg:py-[16px] xl:py-[18px] px-[16px] md:px-[20px] lg:px-[24px] xl:px-[24px] rounded-[16px] md:rounded-[20px] bg-[#F5F6FA]">
              <div
                className="flex flex-row justify-between items-center cursor-pointer"
                onClick={() => toggleQuestionCards(index)}
              >
                <div className="text-[14px] md:text-base lg:text-lg xl:text-xl leading-[18px] md:leading-[22px] lg:leading-[25px] xl:leading-[30px] font-semibold text-[#180D03] figtree pr-4">
                  {question.question}
                </div>
                <div className="bg-white p-[6px] lg:p-[9px] rounded-[8px] cursor-pointer shrink-0">
                  <ChevronDown
                    className={`w-4 h-4 lg:w-5 lg:h-5 transition-transform duration-300 ${openQuestionIndex === index
                      ? "rotate-180 text-[#F58220]"
                      : "text-[#8D8D8D]"
                      }`}
                  />
                </div>
              </div>
              {/* Answer */}
              <div
                className={`transition-all duration-300 overflow-hidden ${openQuestionIndex === index
                  ? "max-h-[500px] opacity-100 pt-[16px] md:pt-[18px] xl:pt-[20px]"
                  : "max-h-0 opacity-0 pt-0"
                  }`}
              >
                <div className="text-[#444444] text-[12px] sm:text-sm md:text-base xl:text-lg leading-[16px] md:leading-5 xl:leading-6 figtree">
                  {question.answer}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className="md:hidden flex flex-col gap-4 bg-white relative overflow-hidden px-5 lg:px-6.5 py-[16px] sm:py-[26px] md:py-[32px] lg:py-[36px] xl:py-[46px] rounded-[16px] md:rounded-[24px] pr-4">
        <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[-45%] left-[-10%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
        <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[90%] left-[10%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
        <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[20%] left-[60%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
        <div className="w-[200px] lg:w-[322px] h-[200px] lg:h-[322px] absolute bottom-[-80%] left-[40%] bg-[#EBE7F6] rounded-full z-0 blur-[50px] lg:blur-[70px]" />
        <div className="flex flex-col gap-2 md:gap-4 z-1">
          <div className="text-[14px] sm:text-[16px] md:text-[18px] lg:text-[22px] xl:text-[24px] leading-[16px] sm:leading-[18px] md:leading-[20px] lg:leading-[22px] xl:leading-[26px] font-semibold figtree text-center md:text-left">
            Still Have a Question?
          </div>
          <div className="text-[12px] sm:text-[14px] md:text-base lg:text-lg leading-[16px] sm:leading-[20px] md:leading-[22px] lg:leading-[24px] text-[#444444] figtree text-center md:text-left">
            Our team is here to help you explore features, integrations,
            pricing, and everything you need to simplify your hotel operations
            with Lodging System.
          </div>
        </div>
        <div className="flex flex-row justify-center lg:justify-start gap-[8px] md:gap-[10px] lg:gap-[30px] z-1">
          <div className="w-[70%] h-[32px] sm:h-[38px] md:h-[48px] lg:h-full rounded-[24px] lg:rounded-[36px] overflow-hidden relative bg-[#FFFFFF6B]">
            <Email2 className="absolute left-4 top-1/2 -translate-y-1/2 text-[#676767] w-4 h-4 sm:w-5 sm:h-5" />
            <input
              type="text"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full h-full px-4 lg:px-6.5 py-1 md:py-4 focus-visible:ring-0 pl-[40px] lg:pl-[45px] relative figtree text-[14px] lg:text-sm focus:outline-none focus-visible:outline-none"
              name="email"
              id="email"
            />
          </div>
          <button
            onClick={handleSendEmail}
            className="relative overflow-hidden px-5 py-0 md:px-6 md:py-3 bg-[#2c2c2c] text-white lg:rounded-full rounded-[24px] text-[12px] sm:text-[14px] lg:text-base font-semibold leading-[100%] transition-all duration-500 group cursor-pointer w-auto xl:w-fit whitespace-nowrap figtree"
          >
            <span className="relative z-10">Send Email</span>

            <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-500 ease-in-out group-hover:left-[95%]" />
          </button>
        </div>
      </div>
    </div>
  );
}