'use client';

import { Fragment } from 'react';
import { X } from 'lucide-react';
import Link from 'next/link';

import * as Accordion from '@/components/ui/accordion';
import * as Badge from '@/components/ui/badge';
import * as Divider from '@/components/ui/divider';
const faqSections = [
  {
    id: 'account',
    title: 'Account',
    items: [
      {
        id: 'account-1',
        question: 'How do I change my email address?',
        answer:
          "Go to your account settings, click on 'Personal Info,' and update your email address. A verification link will be sent to your new email to confirm the change.",
      },
      {
        id: 'account-2',
        question: 'Can I update my payment details online?',
        answer:
          'Yes, you can update your payment method anytime from the Billing section in your account settings. We support all major credit cards and bank transfers.',
      },
      {
        id: 'account-3',
        question: 'What should I do if I forget my password?',
        answer:
          "Click the 'Forgot Password' link on the login page and enter your registered email. You'll receive a reset link within minutes to create a new password.",
      },
    ],
  },
  {
    id: 'support',
    title: 'Support',
    items: [
      {
        id: 'support-1',
        question: 'How can I contact customer support?',
        answer:
          'You can reach our support team via live chat, email at hello@alignui.com, or by submitting a request through the Help Center.',
      },
      {
        id: 'support-2',
        question: 'Do you provide weekend assistance?',
        answer:
          'We use bank-level encryption, two-factor authentication, and comply with major global standards such as PSD2, GDPR, and SOC 2.\n\nYour financial data is encrypted both at rest and in transit, and our systems are monitored 24/7 for unusual activity. We also undergo regular third-party audits to ensure the highest level of security and compliance.',
      },
      {
        id: 'support-3',
        question: 'Is live chat support available?',
        answer:
          'Yes, live chat is available 24/7 for all users. Premium plan members also get priority routing to senior support agents.',
      },
      {
        id: 'support-4',
        question: 'Where can I find detailed guides?',
        answer:
          'Visit our Knowledge Base for step-by-step guides, video tutorials, and best practices covering every feature of the platform.',
      },
    ],
  },
  {
    id: 'payments',
    title: 'Payments',
    items: [
      {
        id: 'payment-1',
        question: 'How long does it take to process a payment?',
        answer:
          'Most payments are processed instantly. Bank transfers may take 1–3 business days depending on your financial institution and region.',
      },
      {
        id: 'payment-2',
        question: 'Are refunds handled automatically?',
        answer:
          'Refunds are reviewed and processed within 5–7 business days. Once approved, the amount will be credited back to your original payment method.',
      },
    ],
  },
];

export default function CustomerSupportFaqGuide() {
  return (
    <div className='bg-bg-white-0 w-full py-10 lg:py-24'>
      <div className='mx-auto w-full max-w-7xl px-6 md:px-7'>
        <div className='mx-auto flex w-full max-w-[808px] flex-col gap-6 lg:gap-10'>
          <div className='flex w-full flex-col gap-4'>
            <div className='flex flex-col gap-3'>
              <Badge.Root
                variant='lighter'
                className='bg-bg-weak-50 text-label-sm text-text-sub-600 h-7 w-fit rounded-[9px] px-2.5 normal-case'
              >
                FAQ guide
              </Badge.Root>
              <h2 className='text-title-h4 lg:text-title-h3 text-text-strong-950 font-[550]'>
                Get quick answers to common questions
              </h2>
            </div>
            <p className='text-paragraph-md text-text-sub-600'>
              Find solutions, explore resources, and resolve issues faster.
            </p>
          </div>

          <div className='mx-[-8px] flex w-[calc(100%+16px)] flex-col gap-2 lg:mx-0 lg:w-full'>
            {faqSections.map((section) => (
              <div
                key={section.id}
                className='bg-bg-weak-25 flex w-full flex-col gap-5 rounded-[20px] p-5 lg:p-6'
              >
                <div className='text-label-sm text-text-soft-400'>
                  {section.title}
                </div>
                <Accordion.Root
                  type='single'
                  collapsible
                  className='flex flex-col gap-4'
                >
                  {section.items.map((item, idx) => (
                    <Fragment key={item.id}>
                      {idx > 0 && <Divider.Root />}
                      <Accordion.Item
                        value={item.id}
                        className='rounded-none bg-transparent p-0 ring-0 ring-transparent hover:bg-transparent has-[:focus-visible]:bg-transparent has-[:focus-visible]:ring-transparent data-[state=open]:bg-transparent data-[state=open]:ring-transparent'
                      >
                        <Accordion.Trigger className='text-label-sm lg:text-label-md text-text-sub-600 group-data-[state=open]/accordion:text-text-strong-950 m-0 flex w-full cursor-pointer items-center gap-4 p-0 text-left'>
                          <span className='flex-1'>{item.question}</span>
                          <Accordion.Arrow
                            closeIcon={X}
                            className='size-5 shrink-0'
                          />
                        </Accordion.Trigger>
                        <Accordion.Content className='text-paragraph-xs lg:text-paragraph-sm text-text-sub-600 pt-3 lg:pt-4'>
                          {item.answer.split('\n\n').map((paragraph, i) => (
                            <p key={i} className={i > 0 ? 'mt-3' : ''}>
                              {paragraph}
                            </p>
                          ))}
                        </Accordion.Content>
                      </Accordion.Item>
                    </Fragment>
                  ))}
                </Accordion.Root>
              </div>
            ))}
          </div>

          <p className='text-label-sm lg:text-label-md text-text-soft-400 w-full'>
            <span>Looking for something else?</span>{' '}
            <Link
              href='mailto:hello@alignui.com'
              className='text-text-sub-600 hover:text-text-strong-950 transition-colors'
            >
              hello@alignui.com
            </Link>
          </p>
        </div>
      </div>
    </div>
  );
}