"use client"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button } from "@/components/ui/button"
import Link from "next/link"

const generalFAQs = [
  {
    question: "How does Euphoria 5 work?",
    answer: "Euphoria 5 works like a personal investment manager and adviser that lives on your smartphone, helping you invest in dollar denominated assets carefully selected to deliver safe, consistent dollar returns over time."
  },
  {
    question: "What kind of investments do I get with Euphoria 5?",
    answer: "Euphoria 5 is the only platform that allows you to allocate capital across a portfolio of US stocks, UAE rental properties and global fixed income assets, all in dollars. We vet the assets for quality, long term potential and their capacity to deliver stable returns for you in all market conditions."
  },
  {
    question: "What is the minimum investment?",
    answer: "You can start investing from just $20 and there is no maximum. Euphoria 5 can invest for you whether you're just starting your journey or you have millions in capital to preserve."
  },
  {
    question: "When can I withdraw my investments?",
    answer: "For real estate and fixed income plans, you can withdraw on maturity, and the shortest duration is 3 months. For stocks plan, there is no lockup period so you can withdraw at any time. All withdrawal requests are processed within 24 hours."
  },
  {
    question: "How is Euphoria 5 Regulated?",
    answer: "Euphoria 5 is registered in Delaware, USA and in Nigeria. Our Dollar investments are held with US SEC-regulated entities."
  },
  {
    question: "Can I trade on Euphoria 5?",
    answer: "No. Euphoria 5 is a digital wealth manager, we provide managed portfolios selected and managed through our app. Users cannot trade or pick securities by themselves."
  }
]

const walletFAQs = [
  {
    question: "How much have I made?",
    answer: "This amount is shown to you when you visit the wallet page on the mobile app."
  },
  {
    question: "Can I withdraw this money?",
    answer: "Yes, you can withdraw from your wallet at any time, but the interest is automatically paid into your wallet at the start of a new month. After that, you can then proceed to withdraw."
  },
  {
    question: "What happens when I withdraw?",
    answer: "You can withdraw as many times as possible, there are no penalties."
  },
  {
    question: "How do I get interest on my wallet balance?",
    answer: "Leaving money in your Euphoria 5 wallet automatically earns you interest."
  }
]

export default function FAQSection() {
  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-4xl mx-auto">
      <div className="mb-12">
        <h2 className="text-3xl font-bold text-gray-900 mb-4">
          Frequently Asked Questions
        </h2>
        <p className="text-gray-600 mb-8">
          Got Questions? Answers and advice from the Euphoria 5 Team
        </p>

        <div className="mb-8">
          <p className="text-gray-700 mb-4 font-medium">Got more questions?</p>
          <Button
            variant="outline"
            className="border-rise-teal text-rise-teal hover:bg-rise-teal hover:text-white transition-colors"
            asChild
          >
            
          </Button>
        </div>
      </div>

      {/* General FAQs */}
      <div className="mb-12">
        <Accordion type="single" collapsible className="w-full space-y-4">
          {generalFAQs.map((faq, index) => (
            <AccordionItem
              key={faq.question.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-')}
              value={`general-${index}`}
              className="border border-gray-200 rounded-lg px-6 bg-white shadow-sm"
            >
              <AccordionTrigger className="text-left text-gray-900 font-medium py-6 hover:no-underline">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="text-gray-600 pb-6 leading-relaxed">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>

      {/* Euphoria 5 Wallet Section */}
      <div>
        <h3 className="text-2xl font-bold text-rise-teal mb-6">Euphoria 5 Wallet</h3>
        <Accordion type="single" collapsible className="w-full space-y-4">
          {walletFAQs.map((faq, index) => (
            <AccordionItem
              key={faq.question.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-')}
              value={`wallet-${index}`}
              className="border border-gray-200 rounded-lg px-6 bg-white shadow-sm"
            >
              <AccordionTrigger className="text-left text-gray-900 font-medium py-6 hover:no-underline">
                {faq.question}
              </AccordionTrigger>
              <AccordionContent className="text-gray-600 pb-6 leading-relaxed">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  )
}
