'use client'

import { Icon } from '@iconify/react'

type FaqItemType = {
  id: number
  question: string
  answer: string
  controlsId: string
  headingId: string
  active?: boolean
}

const faqsData: FaqItemType[] = [
  {
    id: 1,
    question: 'What is eco-supply transportation?',
    answer: 'Eco-supply transportation refers to environmentally sustainable methods of transporting goods within the supply chain. The goal is to reduce the carbon footprint, energy consumption, and environmental impact associated with logistics and distribution.',
    controlsId: 'faq-collapse-one',
    headingId: 'faq-heading-one',
    active: true,
  },
  {
    id: 2,
    question: 'How does Eco-Supply reduce environmental impact?',
    answer: 'Eco-supply transportation reduces environmental impact by making the entire logistics process more sustainable, from how goods are packaged and shipped to how vehicles are powered and routes are planned.',
    controlsId: 'faq-collapse-two',
    headingId: 'faq-heading-two',
  },
  {
    id: 3,
    question: 'Do you offer customized supply chain solutions?',
    answer: 'Yes, every business has unique needs. We provide tailor-made logistics strategies designed to maximize efficiency, reduce costs, and support your sustainability goals.',
    controlsId: 'faq-collapse-three',
    headingId: 'faq-heading-three',
  },
  {
    id: 4,
    question: 'What areas do you currently serve?',
    answer: 'We proudly provide eco-friendly supply chain solutions across a growing network of regions, focusing on sustainability, efficiency, and impact.',
    controlsId: 'faq-collapse-four',
    headingId: 'faq-heading-four',
  },
  {
    id: 5,
    question: 'Can Eco-Supply handle large-scale industrial logistics?',
    answer: 'Eco-Supply can handle large-scale industrial logistics—and it's becoming increasingly common for major industries to adopt sustainable logistics solutions without compromising on scale, speed, or efficiency.',
    controlsId: 'faq-collapse-five',
    headingId: 'faq-heading-five',
  },
]

const Faqs = () => {
  return (
    <section className="bg-default-50 py-20 md:py-25 lg:py-32">
      <div className="container">
        <div className="mx-auto mb-6 max-w-2xl text-center lg:mb-17.5">
          <div className="border-default-200 mb-2.5 inline-flex rounded-full border px-3.75 py-1.25">
            <span className="text-default-500 text-sm font-normal tracking-tight uppercase">FAQs</span>
          </div>
          <h2 className="text-default-900 text-3xl leading-[1.2] font-medium md:text-[40px]">
            Clearing <span className="text-default-400">doubts</span> about our <span className="text-default-400">eco-friendly</span> transport services
          </h2>
        </div>

        <div className="hs-accordion-group mx-auto max-w-6xl space-y-4">
          {faqsData.map((item) => (
            <div key={item.id} className={`hs-accordion ${item.active ? 'active' : ''} hs-accordion-active:bg-default-100/30 border-default-300 rounded-xl border border-dashed bg-white p-3.75 transition-all duration-300 md:p-5`} id={item.headingId}>
              <button className="hs-accordion-toggle group text-default-950 flex w-full items-center justify-between text-start font-normal transition-colors md:text-lg lg:text-xl" aria-controls={item.controlsId}>
                {item.question}
                <div className="relative ms-4 flex shrink-0 items-center justify-center">
                  <Icon icon="lucide:plus" className="text-default-600 hs-accordion-active:hidden block size-5" />
                  <Icon icon="lucide:minus" className="text-default-600 hs-accordion-active:block hidden size-5" />
                </div>
              </button>
              <div id={item.controlsId} className={`hs-accordion-content w-full overflow-hidden transition-[height] duration-300 ${item.active ? '' : 'hidden'}`} aria-labelledby={item.headingId}>
                <p className="text-default-500 pt-3.75 text-base leading-relaxed font-normal">{item.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

export default Faqs