'use client'

import { useState } from 'react'
import { ChevronDown } from 'lucide-react'

interface FAQItem {
  id: string
  question: string
  answer: string
}

interface FAQProps {
  items?: FAQItem[]
}

const defaultFAQs: FAQItem[] = [
  {
    id: 'faq-1',
    question: 'How do I upload my portfolio?',
    answer:
      'Navigate to your dashboard and click "Create New Portfolio". Fill in your portfolio details, then upload a ZIP file containing your website files. Our system will automatically extract and deploy your portfolio.',
  },
  {
    id: 'faq-2',
    question: 'What file formats are supported?',
    answer:
      'We support ZIP files containing standard web files (HTML, CSS, JavaScript, images). The root of your ZIP should contain an index.html file as the entry point.',
  },
  {
    id: 'faq-3',
    question: 'Can I use a custom domain?',
    answer:
      'Yes! You can connect your custom domain during portfolio creation. Simply point your domain\'s DNS records to our servers, and we\'ll handle the rest.',
  },
  {
    id: 'faq-4',
    question: 'Is SSL/HTTPS included?',
    answer:
      'Absolutely! All portfolios hosted on Portfolio Host include free SSL certificates. Your site will automatically be served over HTTPS for security and SEO benefits.',
  },
  {
    id: 'faq-5',
    question: 'How do I update my portfolio?',
    answer:
      'Simply upload a new ZIP file for your portfolio. The system will automatically replace the old version while keeping your custom domain and settings intact.',
  },
  {
    id: 'faq-6',
    question: 'What happens if I delete my portfolio?',
    answer:
      'Deleted portfolios are permanently removed and cannot be recovered. Your custom domain will become available for reassignment. Please download any important files before deletion.',
  },
]

export default function FAQ({ items = defaultFAQs }: FAQProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null)

  const toggleExpand = (id: string) => {
    setExpandedId(expandedId === id ? null : id)
  }

  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">Frequently Asked Questions</h2>
          <p className="text-lg text-muted-foreground">
            Find answers to common questions about Portfolio Host
          </p>
        </div>

        <div className="max-w-2xl mx-auto space-y-4">
          {items.map((item) => (
            <div key={item.id} className="border rounded-lg overflow-hidden">
              <button
                onClick={() => toggleExpand(item.id)}
                className="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition"
                aria-expanded={expandedId === item.id}
                aria-controls={`faq-answer-${item.id}`}
              >
                <span className="font-semibold text-left text-foreground">{item.question}</span>
                <ChevronDown
                  size={20}
                  className={`text-muted-foreground transition-transform flex-shrink-0 ml-4 ${
                    expandedId === item.id ? 'rotate-180' : ''
                  }`}
                />
              </button>

              {expandedId === item.id && (
                <div
                  id={`faq-answer-${item.id}`}
                  className="px-6 py-4 bg-gray-50 border-t text-muted-foreground"
                >
                  {item.answer}
                </div>
              )}
            </div>
          ))}
        </div>

        <div className="text-center mt-12">
          <p className="text-muted-foreground mb-4">Still have questions?</p>
          <a
            href="mailto:support@portfoliohost.com"
            className="text-primary hover:underline font-medium"
          >
            Contact our support team
          </a>
        </div>
      </div>
    </section>
  )
}