"use client";

import { useState } from "react";
import { ChevronDown, ArrowRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { cn } from "@/lib/utils";

const faqs = [
    {
        question: "What is i-Roof?",
        answer: "i-roof is a revolutionary polymer based roofing sheet introduced to Sri Lanka. This Spanish style roofing sheet is unique, strong and consists of 4 special layers."
    },
    {
        question: "What is special in ASA?",
        answer: "The ASA (Acrylonitrile Styrene Acrylate) is a high tech formula that has higher resistance towards sun heat. This special material is used even on satellites to avoid heat and UV rays in the space."
    },
    {
        question: "What is ASA doing in i-Roof?",
        answer: "The ASA layer of the i-roof reduces the heat inside the home and cuts off harmful UV rays. So that it preserves the roof colour as well as provides further durability to the roof (Extended life time) while maintaining a cool and comfortable environment inside the home."
    },
    {
        question: "Is it a noisy rain roof?",
        answer: "No. i-Roof is a perfect sound insulation roofing solution. The special ASA layer with other three layers function as a sound barrier and lower the noise of the rain falling on the roof. So a calm and quiet environment is maintained inside the home during the rainy seasons."
    }
];

export default function FAQ() {
    const [activeFaq, setActiveFaq] = useState<number | null>(null);

    return (
        <section id="faqs" className="py-12 md:pt-20">
            <div className="max-w-[1400px] mx-auto px-8 md:px-16 lg:px-32 xl:px-40 ">
                <div className="grid grid-cols-1 xl:grid-cols-12 gap-16 md:gap-24 ">
                    <div className="xl:col-span-5 reveal-up ">
                        <div className="flex items-center gap-6 mb-8 group">
                            <div className="h-[1.5px] w-12 bg-brand-accent group-hover:w-20 transition-all duration-700" />
                            <span className="text-[11px] font-bold text-brand-accent uppercase tracking-[0.4em]">Customer Support</span>
                        </div>
                        <h2 className="text-3xl md:text-5xl font-semibold text-brand-dark tracking-tight leading-none mb-8">
                            Frequently <br />
                            <span className="text-brand-accent">Asked Questions</span>
                        </h2>
                        <p className="text-base text-brand-dark/40 font-medium italic mb-10">
                            Everything you need to know about Sri Lanka&apos;s leading roofing technology.
                        </p>

                        <div className="reveal-up">
                            <div className="relative w-full max-w-[400px] ">
                                <Image
                                    src="/images/i-roof-cerificate-logos.webp"
                                    alt="i-Roof Certifications"
                                    width={600}
                                    height={100}
                                    className="w-full h-auto "
                                    priority={false}
                                />
                            </div>
                        </div>
                    </div>

                    <div className="xl:col-span-7 space-y-4 stagger-group">
                        {faqs.map((faq, i) => (
                            <div
                                key={i}
                                className={cn(
                                    "stagger-item border bg-white transition-all duration-500 overflow-hidden shadow-sm rounded-xl",
                                    activeFaq === i ? "border-brand-accent/30 shadow-xl shadow-brand-accent/5" : "border-brand-dark/5 hover:border-brand-accent/20"
                                )}
                            >
                                <button
                                    className="w-full px-8 py-8 flex items-center justify-between text-left"
                                    onClick={() => setActiveFaq(activeFaq === i ? null : i)}
                                >
                                    <span className={cn(
                                        "text-sm md:text-base font-semibold tracking-tight transition-colors duration-500 font-heading",
                                        activeFaq === i ? "text-brand-accent" : "text-brand-dark"
                                    )}>
                                        {faq.question}
                                    </span>
                                    <ChevronDown className={cn(
                                        "w-5 h-5 transition-transform duration-500",
                                        activeFaq === i ? "rotate-180 text-brand-accent" : "text-brand-dark/20"
                                    )} />
                                </button>
                                <div className={cn(
                                    "px-8 overflow-hidden transition-all duration-500 ease-in-out",
                                    activeFaq === i ? "max-h-[300px] pb-8 opacity-100" : "max-h-0 opacity-0"
                                )}>
                                    <p className="text-brand-dark/50 text-sm leading-relaxed font-medium italic font-sans">
                                        {faq.answer}
                                    </p>
                                </div>
                            </div>
                        ))}

                        <div className="flex justify-end pt-4 reveal-up">
                            <Link
                                href="/faq"
                                className="inline-flex items-center gap-2 bg-[#b12028] hover:bg-[#8e1a20] text-white px-8 py-3.5 rounded-xl text-xs font-normal uppercase tracking-wider transition-all duration-300 shadow-lg shadow-brand-accent/15 hover:-translate-y-0.5 active:scale-95 cursor-pointer font-sans"
                            >
                                <span>View All FAQs</span>
                                <ArrowRight className="w-4 h-4" />
                            </Link>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}