"use client";

import { useState, useEffect } 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: "/assets/images/home/faq.webp", label: "Building Exterior" },
    { src: "/assets/images/home/faq-2.webp", label: "Luxury Amenities" },
    { src: "/assets/images/home/faq-3.webp", 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);

    // Derive activeTab from activeCard to ensure sync
    const activeTab = carouselImages[activeCard].label;

    // Reset open FAQ when active card changes
    useEffect(() => {
        setOpenIndex(null);
    }, [activeCard]);

    const faqs = [
        // Building Exterior
        {
            category: "Building Exterior",
            question: "What materials are used for the exterior?",
            answer: "We use high-grade, weather-resistant materials including natural stone cladding and premium texture paints to ensure durability and elegance."
        },
        {
            category: "Building Exterior",
            question: "Is the building earthquake resistant?",
            answer: "Yes, all our structures are RCC framed and designed to be earthquake resistant, adhering to the highest safety standards and seismic zones."
        },
        {
            category: "Building Exterior",
            question: "How is the exterior maintenance handled?",
            answer: "The society association manages exterior maintenance, including regular cleaning and painting, ensuring the building retains its pristine look for years."
        },
        {
            category: "Building Exterior",
            question: "Are there eco-friendly features in the design?",
            answer: "Absolutely. We incorporate vertical gardens, solar reflective paints, and rainwater harvesting systems into the building's exterior design."
        },

        // Luxury Amenities
        {
            category: "Luxury Amenities",
            question: "What recreational facilities are available?",
            answer: "Residents enjoy access to a fully equipped clubhouse, temperature-controlled swimming pool, indoor games room, and a dedicated yoga deck."
        },
        {
            category: "Luxury Amenities",
            question: "Is there a gym within the premises?",
            answer: "Yes, we provide a state-of-the-art gymnasium with modern cardio and strength training equipment, open 24/7 for residents."
        },
        {
            category: "Luxury Amenities",
            question: "Are there play areas for children?",
            answer: "We have safe, designated play zones for children of all ages, featuring modern play equipment and soft flooring for safety."
        },
        {
            category: "Luxury Amenities",
            question: "Do you offer concierge services?",
            answer: "Yes, our premium properties feature a concierge desk to assist residents with daily tasks, guest management, and facility bookings."
        },

        // Modern Architecture
        {
            category: "Modern Architecture",
            question: "What is the architectural style of the project?",
            answer: "Our projects feature contemporary architecture with clean lines, open floor plans, and large windows to maximize natural light and ventilation."
        },
        {
            category: "Modern Architecture",
            question: "Who are the architects behind the design?",
            answer: "We collaborate with award-winning international architects who specialize in creating sustainable and aesthetically stunning living spaces."
        },
        {
            category: "Modern Architecture",
            question: "Are the homes Vastu compliant?",
            answer: "Yes, the majority of our units are designed in accordance with Vastu Shastra principles to ensure harmony and positive energy flow."
        },
        {
            category: "Modern Architecture",
            question: "How is privacy ensured in the design?",
            answer: "The layout is thoughtfully designed to ensure no two apartments look into each other, providing maximum privacy for all residents."
        }
    ];

    const categories = carouselImages.map(img => img.label);
    const filteredFaqs = faqs.filter(faq => faq.category === activeTab);

    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-8">
                            <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 mb-8">
                                Everything you need to know about our properties and services.
                            </p>

                            {/* Tabs */}
                            <div className="flex flex-wrap gap-2 mb-8">
                                {categories.map((category) => (
                                    <button
                                        key={category}
                                        onClick={() => {
                                            const index = categories.indexOf(category);
                                            setActiveCard(index);
                                        }}
                                        className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 ${activeTab === category
                                            ? "bg-primary text-white shadow-lg scale-105"
                                            : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700"
                                            }`}
                                    >
                                        {category}
                                    </button>
                                ))}
                            </div>
                        </div>

                        <div className="space-y-4">
                            {filteredFaqs.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>
    );
}
