"use client";

import { useState } from "react";
import Image from "next/image";

const faqs = [
    {
        question: "What types of properties do you offer?",
        answer: "We offer a wide range of properties including luxury apartments, premium villas, and sustainable eco-homes designed to blend with nature."
    },
    {
        question: "How can I book a site visit?",
        answer: "You can book a site visit by clicking the 'Book a Visit' button on our website or by contacting our sales team directly through the contact form."
    },
    {
        question: "Do you provide assistance with home loans?",
        answer: "Yes, we have tie-ups with leading banks and financial institutions to help you secure the best home loan rates and assist with the documentation process."
    },
    {
        question: "Are your projects RERA registered?",
        answer: "Absolutely. All our projects are fully compliant with RERA regulations and we ensure complete transparency in all our dealings."
    },
    {
        question: "What amenities are included in your projects?",
        answer: "Our projects feature world-class amenities such as swimming pools, clubhouses, landscaped gardens, 24/7 security, and dedicated fitness centers."
    }
];

const carouselImages = [
    { src: "/1-f63fe3ad.png", label: "Building Exterior" },
    { src: "/hero-image.jpg", label: "Luxury Amenities" },
    { src: "/1-f63fe3ad.png", label: "Modern Architecture" }
];

export default function FAQ() {
    const [openIndex, setOpenIndex] = useState<number | null>(null);
    const [activeCard, setActiveCard] = useState(0);
    const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
    const [isHovering, setIsHovering] = useState(false);

    const toggleFAQ = (index: number) => {
        setOpenIndex(openIndex === index ? null : index);
    };

    const nextCard = () => {
        setActiveCard((prev) => (prev + 1) % carouselImages.length);
    };

    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const centerX = rect.width / 2;

        // Calculate offset: negative for left, positive for right
        const offsetX = (x - centerX) / centerX; // Range: -1 to 1

        setMousePosition({ x: offsetX * 30, y: 0 }); // Move up to 30px left or right
    };

    const handleMouseEnter = () => {
        setIsHovering(true);
    };

    const handleMouseLeave = () => {
        setIsHovering(false);
        setMousePosition({ x: 0, y: 0 });
    };

    return (
        <section className="py-24 bg-gray-50 dark:bg-gray-900 overflow-hidden">
            <div className="max-w-7xl mx-auto px-6">
                <div className="grid md:grid-cols-2 gap-12 items-start">
                    {/* Left Column: Stacked Card Carousel */}
                    <div
                        className="relative h-[600px] hidden md:flex items-center justify-center"
                        onMouseMove={handleMouseMove}
                        onMouseEnter={handleMouseEnter}
                        onMouseLeave={handleMouseLeave}
                    >
                        <div className="relative w-full max-w-md h-[500px]">
                            {carouselImages.map((image, index) => {
                                const offset = index - activeCard;
                                const isActive = index === activeCard;

                                return (
                                    <div
                                        key={index}
                                        onClick={nextCard}
                                        className={`absolute inset-0 transition-all duration-500 ease-out cursor-pointer ${isActive ? 'z-30' : offset > 0 ? 'z-20' : 'z-10'
                                            }`}
                                        style={{
                                            transform: `
                                                translateY(${offset * 20}px) 
                                                translateX(${offset * 10 + (isActive && isHovering ? mousePosition.x : 0)}px) 
                                                scale(${isActive ? 1 : 0.9 - Math.abs(offset) * 0.05})
                                                rotateZ(${offset * 2}deg)
                                            `,
                                            opacity: Math.abs(offset) > 1 ? 0 : 1 - Math.abs(offset) * 0.3,
                                            pointerEvents: isActive ? 'auto' : 'none',
                                            transition: isHovering ? 'transform 0.2s ease-out' : 'transform 0.5s ease-out'
                                        }}
                                    >
                                        <div className="relative w-full h-full rounded-3xl overflow-hidden shadow-2xl border-4 border-white dark:border-gray-800">
                                            <Image
                                                src={image.src}
                                                alt={image.label}
                                                fill
                                                className="object-cover"
                                            />
                                            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
                                            <div className="absolute bottom-6 left-6 right-6">
                                                <h3 className="text-white text-2xl font-bold mb-2">{image.label}</h3>
                                                <p className="text-white/80 text-sm">Click to explore more</p>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>

                        {/* Navigation Dots */}
                        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2 z-40">
                            {carouselImages.map((_, index) => (
                                <button
                                    key={index}
                                    onClick={() => setActiveCard(index)}
                                    className={`w-2 h-2 rounded-full transition-all duration-300 ${index === activeCard
                                            ? 'bg-primary w-8'
                                            : 'bg-gray-400 hover:bg-gray-600'
                                        }`}
                                    aria-label={`Go to slide ${index + 1}`}
                                />
                            ))}
                        </div>
                    </div>

                    {/* Right Column: FAQ Content */}
                    <div>
                        <div className="mb-12">
                            <h2 className="text-3xl md:text-4xl font-bold tracking-tight text-foreground mb-4">
                                Frequently Asked Questions
                            </h2>
                            <p className="text-lg text-gray-600 dark:text-gray-400">
                                Everything you need to know about our properties and services.
                            </p>
                        </div>

                        <div className="space-y-4">
                            {faqs.map((faq, index) => (
                                <div
                                    key={index}
                                    className="bg-white dark:bg-black border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden transition-all duration-300 hover:shadow-md"
                                >
                                    <button
                                        onClick={() => toggleFAQ(index)}
                                        className="w-full flex items-center justify-between p-6 text-left focus:outline-none"
                                    >
                                        <span className="text-lg font-semibold text-foreground">
                                            {faq.question}
                                        </span>
                                        <span
                                            className={`ml-6 flex-shrink-0 transition-transform duration-300 ${openIndex === index ? "rotate-180" : "rotate-0"
                                                }`}
                                        >
                                            <svg
                                                xmlns="http://www.w3.org/2000/svg"
                                                fill="none"
                                                viewBox="0 0 24 24"
                                                strokeWidth={2}
                                                stroke="currentColor"
                                                className="w-5 h-5 text-primary"
                                            >
                                                <path
                                                    strokeLinecap="round"
                                                    strokeLinejoin="round"
                                                    d="M19.5 8.25l-7.5 7.5-7.5-7.5"
                                                />
                                            </svg>
                                        </span>
                                    </button>
                                    <div
                                        className={`px-6 transition-all duration-300 ease-in-out overflow-hidden ${openIndex === index ? "max-h-48 pb-6 opacity-100" : "max-h-0 opacity-0"
                                            }`}
                                    >
                                        <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
                                            {faq.answer}
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}