'use client';

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';

const frequentlyAskedQuestions = [
  {
    q: 'Where Can I Sell My Old Phone Online?',
    a: 'You can sell your old phone directly on our platform. Select your brand and model, get an instant quote, ship it for free, and receive payment within 24 hours of inspection.',
  },
  {
    q: 'How Much Can I Sell My Old Phone For?',
    a: 'The price depends on your device model, condition, storage, and current market demand. Use our smart price calculator to get a transparent, fair estimate in under 60 seconds.',
  },
  {
    q: 'Can I Sell A Broken Or Damaged Phone?',
    a: 'Yes. We accept devices in all conditions, including broken or damaged phones. Select the "Broken" condition during valuation to get an accurate quote.',
  },
  {
    q: 'How Do I Sell My Old Phone Without Visiting A Shop?',
    a: 'The entire process is online. Get your quote, print the prepaid shipping label, pack your device, and drop it off. We handle inspection and payment remotely.',
  },
  {
    q: 'Is It Safe To Sell My Phone To You?',
    a: 'Absolutely. We perform a certified factory reset and data wipe on every device, and our pickup partners are ID-verified. Your personal data never leaves the device.',
  },
  {
    q: 'When Will I Get Paid After Selling My Phone?',
    a: 'Payment is sent within 24 hours of your device passing inspection. Choose bank transfer, PayPal, or store credit — whichever works best for you.',
  },
];

export function FrequentlyAskedQuestions() {
  return (
    <section
      aria-labelledby="frequently-asked-questions-title"
      className="flex w-full flex-col items-center justify-center gap-16 bg-white px-6 py-24 sm:px-10 lg:px-16"
    >
      <div className="flex w-full max-w-screen-lg flex-col items-center justify-center gap-16">
        <header className="flex w-full max-w-2xl flex-col items-center justify-center gap-4">
          <h2
            id="frequently-asked-questions-title"
            className="font-satoshi text-center text-4xl font-bold leading-normal text-main"
          >
            Frequently Asked Questions
          </h2>
          <p className="font-satoshi text-center text-base font-medium leading-normal text-mtext">
            Find clear answers to all your questions, from device pricing to pickup and secure
            payments.
          </p>
        </header>

        <Accordion
          type="single"
          collapsible
          className="flex w-full flex-col gap-6"
        >
          {frequentlyAskedQuestions.map((item, index) => (
            <AccordionItem
              key={item.q}
              value={`question-${index + 1}`}
              className="rounded-lg border border-app bg-bg px-6 py-0"
            >
              <AccordionTrigger className="gap-4 py-6 text-left hover:no-underline [&>svg]:h-auto [&>svg]:w-auto [&>svg]:shrink-0">
                <span className="font-satoshi flex-1 text-lg font-bold leading-7 text-main">
                  {item.q}
                </span>
              </AccordionTrigger>
              <AccordionContent className="font-satoshi text-base font-medium leading-6 text-mtext">
                {item.a}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}