import React, { useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { PlusIcon } from 'lucide-react';
import { Reveal } from '../Reveal';
import { SectionHeading } from '../SectionHeading';
import { FAQS } from '../../data/site';

export function Faq() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <section className="bg-ink py-24 lg:py-32" aria-labelledby="faq-title">
      <div className="mx-auto grid max-w-site gap-14 px-6 lg:grid-cols-12 lg:px-10">
        <div className="lg:col-span-4">
          <SectionHeading
            title="سوالات متداول"
            lead="پاسخ کوتاه به پرتکرارترین پرسش‌های سرمایه‌گذاران و خریداران." />
          
        </div>

        <div className="lg:col-span-8">
          <ul>
            {FAQS.map((faq, i) => {
              const isOpen = open === i;
              return (
                <Reveal key={faq.q} delay={0.04 * i}>
                  <li className="border-b border-ivory/10">
                    <button
                      type="button"
                      onClick={() => setOpen(isOpen ? null : i)}
                      aria-expanded={isOpen}
                      className="flex w-full items-center justify-between gap-6 py-6 text-right transition-colors duration-200 ease-lux hover:text-copper">
                      
                      <span className={`text-base font-bold md:text-lg ${isOpen ? 'text-copper' : 'text-ivory'}`}>
                        {faq.q}
                      </span>
                      <PlusIcon
                        className={`h-5 w-5 shrink-0 text-copper transition-transform duration-300 ease-lux ${
                        isOpen ? 'rotate-45' : ''}`
                        } />
                      
                    </button>
                    <AnimatePresence initial={false}>
                      {isOpen &&
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: 'auto', opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
                        className="overflow-hidden">
                        
                          <p className="pb-7 pl-10 text-sm font-light leading-9 text-ivory/60">{faq.a}</p>
                        </motion.div>
                      }
                    </AnimatePresence>
                  </li>
                </Reveal>);

            })}
          </ul>
        </div>
      </div>
    </section>);

}