"use client";

import { useState } from "react";
import { AestheticHesitationsProps } from "@/types/about-aesthetic";

export default function AestheticHesitations({ heading, description, accordion }: AestheticHesitationsProps) {
    // State to track which accordion item is expanded (first item open by default)
    const [activeIndex, setActiveIndex] = useState<number | null>(0);

    const toggleAccordion = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };

    // Helper to clean up typographic curly quotes returned from CMS database fields
    const formatText = (text: string) => {
        return text?.trim().replace(/^[“”"'««]/g, "").replace(/[“”"'»»]$/g, "") || "";
    };

    return (
        <section className="py-16 md:py-24 xl:py-30 mb-16 md:mb-24 xl:mb-30 bg-[#F2F4F6]">
            <div className="container">
                <div className="grid grid-cols-12 gap-y-10 md:gap-x-12 lg:gap-x-16">
                    {/* Left Column: Heading & Description (Spans 12 columns on mobile, 5 on desktop) */}
                    <div className="col-span-12 md:col-span-5">
                        <h2 className="text-[32px] xl:text-[40px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-4 md:mb-6">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] leading-relaxed max-w-[480px]">
                            {description}
                        </p>
                    </div>

                    {/* Right Column: Dynamic Accordions (Spans 12 columns on mobile, 7 on desktop) */}
                    <div className="col-span-12 md:col-span-7">
                        <div className="flex flex-col gap-4">
                            {accordion?.map((item, index) => {
                                const isOpen = activeIndex === index;
                                const cleanedQuestion = formatText(item.questions);
                                const cleanedAnswer = formatText(item.answers);

                                return (
                                    <div
                                        key={index}
                                        className="bg-white rounded-[16px] p-5 md:p-6 shadow-sm border border-gray-100/50 cursor-pointer transition-all duration-300 hover:shadow-md"
                                        onClick={() => toggleAccordion(index)}
                                    >
                                        {/* Question Header */}
                                        <div className="flex items-center justify-between gap-4 w-full text-left">
                                            <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold leading-tight">
                                                {cleanedQuestion}
                                            </h3>
                                            <figure className="shrink-0">
                                                <svg
                                                    className={`w-5 h-5 text-[#1718F5] transition-transform duration-300 ${isOpen ? "transform rotate-180" : ""
                                                        }`}
                                                    fill="none"
                                                    viewBox="0 0 24 24"
                                                    stroke="currentColor"
                                                    strokeWidth="2.5"
                                                >
                                                    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                                                </svg>
                                            </figure>
                                        </div>

                                        {/* Answer Content Wrapper (Smooth Height Transition) */}
                                        <div
                                            className={`grid transition-all duration-300 ease-in-out ${isOpen
                                                ? "grid-rows-[1fr] opacity-100 mt-4 pt-4 border-t border-gray-100"
                                                : "grid-rows-[0fr] opacity-0"
                                                }`}
                                        >
                                            <div className="overflow-hidden">
                                                <p className="text-[14px] md:text-[16px] text-[#334D72] leading-relaxed">
                                                    {cleanedAnswer}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}