import { Link } from 'react-router-dom';
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';

export function ContactFAQ() {
  const faqs = [
    {
      question: 'How do I submit a new park or ride?',
      answer: (
        <>
          You can submit new parks and rides through our submission system. Simply navigate to the{' '}
          <Link to="/parks" className="text-primary hover:underline">
            Parks
          </Link>{' '}
          or{' '}
          <Link to="/rides" className="text-primary hover:underline">
            Rides
          </Link>{' '}
          page and click the "Add" button. All submissions go through our moderation queue to ensure quality and accuracy.
        </>
      ),
    },
    {
      question: 'How long does moderation take?',
      answer:
        'Most submissions are reviewed within 24-48 hours. Complex submissions or those requiring additional verification may take slightly longer. You can track the status of your submissions in your profile.',
    },
    {
      question: 'Can I edit my submissions?',
      answer:
        'Yes! You can edit any information you\'ve submitted. All edits also go through moderation to maintain data quality. We track all changes in our version history system.',
    },
    {
      question: 'How do I report incorrect information?',
      answer: (
        <>
          If you notice incorrect information, you can either submit an edit with the correct data or contact us using the form above with category "Report an Issue". Please include the page URL and describe what needs to be corrected.
        </>
      ),
    },
    {
      question: 'What if I forgot my password?',
      answer: (
        <>
          Use the "Forgot Password" link on the{' '}
          <Link to="/auth" className="text-primary hover:underline">
            login page
          </Link>
          . We'll send you a password reset link via email. If you don't receive it, check your spam folder or contact us for assistance.
        </>
      ),
    },
    {
      question: 'How do I delete my account?',
      answer: (
        <>
          You can request account deletion from your{' '}
          <Link to="/settings" className="text-primary hover:underline">
            Settings page
          </Link>
          . For security, we require confirmation before processing deletion requests. Please note that some anonymized data (like submissions) may be retained for database integrity.
        </>
      ),
    },
    {
      question: 'Do you have a community Discord or forum?',
      answer:
        'We\'re planning to launch community features soon! For now, you can connect with other enthusiasts through reviews and comments on park and ride pages.',
    },
    {
      question: 'Can I contribute photos?',
      answer:
        'Absolutely! You can upload photos to any park or ride page. Photos go through moderation and must follow our content guidelines. High-quality photos are greatly appreciated!',
    },
  ];

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-2xl font-bold mb-2">Frequently Asked Questions</h2>
        <p className="text-muted-foreground">
          Find answers to common questions. If you don't see what you're looking for, feel free to contact us.
        </p>
      </div>

      <Accordion type="single" collapsible className="w-full">
        {faqs.map((faq, index) => (
          <AccordionItem key={index} value={`item-${index}`}>
            <AccordionTrigger className="text-left">
              {faq.question}
            </AccordionTrigger>
            <AccordionContent className="text-muted-foreground">
              {faq.answer}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}
