'use client';

import { useState } from 'react';
import Link from 'next/link';
import { AnimatedSection } from '@/components/animated-section';
import { ChevronDown, HelpCircle, ArrowRight } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

const faqs = [
  {
    category: 'Getting Started',
    questions: [
      {
        q: 'What is the minimum investment amount?',
        a: 'The minimum investment with TradeTheMarkets is £3,500. This accessible entry point allows you to begin building your portfolio with professional guidance.',
      },
      {
        q: 'How do I start investing with TradeTheMarkets?',
        a: 'Simply contact us via phone, email, or WhatsApp to schedule an initial consultation. We will discuss your financial goals, risk tolerance, and investment timeline before creating a tailored strategy.',
      },
      {
        q: 'Who can invest with TradeTheMarkets?',
        a: 'We welcome both first-time investors and those looking to diversify existing portfolios. Our services are designed to be accessible while maintaining professional standards.',
      },
    ],
  },
  {
    category: 'Investment Process',
    questions: [
      {
        q: 'How are investment decisions made?',
        a: 'Our team conducts thorough market research and analysis to identify opportunities. Investment decisions are based on data-driven insights, market trends, and alignment with your personal investment goals.',
      },
      {
        q: 'How often will I receive updates on my investments?',
        a: 'We provide regular portfolio updates and performance reports. You will also have direct access to our team for any questions or concerns at any time.',
      },
      {
        q: 'Can I withdraw my investment at any time?',
        a: 'Withdrawal terms depend on your specific investment arrangement. We recommend discussing your liquidity needs during the initial consultation so we can structure your portfolio accordingly.',
      },
    ],
  },
  {
    category: 'Risks & Returns',
    questions: [
      {
        q: 'What are the risks involved?',
        a: 'All investments carry risk, and the value of investments can go down as well as up. Past performance does not guarantee future results. We provide transparent information about risks and work to mitigate them through diversification and active management.',
      },
      {
        q: 'What kind of returns can I expect?',
        a: 'Returns vary depending on market conditions, investment strategy, and risk profile. We do not guarantee specific returns. Our goal is to optimise performance while managing risk within your stated tolerance.',
      },
      {
        q: 'Is my capital protected?',
        a: 'Your capital is at risk when investing. We employ risk management strategies to protect your investments, but we cannot guarantee capital preservation. We always recommend investing only what you can afford to have at risk.',
      },
    ],
  },
  {
    category: 'Fees & Transparency',
    questions: [
      {
        q: 'What fees do you charge?',
        a: 'We maintain a transparent fee structure with no hidden charges. Specific fee details are discussed during your initial consultation and clearly outlined in your investment agreement.',
      },
      {
        q: 'How transparent is the investment process?',
        a: 'Transparency is one of our core values. We provide clear information about risks, objectives, fees, and performance. You will always know where your money is invested and how it is performing.',
      },
    ],
  },
];

function FaqItem({ question, answer }: { question: string; answer: string }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="border-b border-border last:border-0">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-start justify-between gap-4 py-5 text-left group"
      >
        <span className="font-medium text-sm md:text-base group-hover:text-gold transition-colors">{question ?? ''}</span>
        <ChevronDown
          className={`w-5 h-5 text-gold flex-shrink-0 transition-transform duration-300 mt-0.5 ${
            isOpen ? 'rotate-180' : ''
          }`}
        />
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: 'easeInOut' }}
            className="overflow-hidden"
          >
            <p className="text-muted-foreground text-sm leading-relaxed pb-5">{answer ?? ''}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export function FaqContent() {
  return (
    <div className="pt-20 md:pt-24">
      {/* Hero */}
      <section className="py-16 md:py-24 bg-navy">
        <div className="max-w-[1200px] mx-auto px-4 sm:px-6 text-center">
          <AnimatedSection>
            <h1 className="font-display text-4xl md:text-5xl font-bold text-white tracking-tight mb-4">
              Frequently Asked <span className="text-gold">Questions</span>
            </h1>
            <p className="text-white/70 text-lg max-w-2xl mx-auto">
              Everything you need to know about investing with TradeTheMarkets.co.uk.
            </p>
          </AnimatedSection>
        </div>
      </section>

      {/* FAQ Sections */}
      <section className="py-16 md:py-24">
        <div className="max-w-[800px] mx-auto px-4 sm:px-6">
          <div className="space-y-10">
            {faqs?.map?.((section: any, i: number) => (
              <AnimatedSection key={i} delay={i * 0.1}>
                <div>
                  <div className="flex items-center gap-2 mb-4">
                    <HelpCircle className="w-5 h-5 text-gold" />
                    <h2 className="font-display text-xl font-bold">{section?.category ?? ''}</h2>
                  </div>
                  <div className="bg-card rounded-lg px-6" style={{ boxShadow: 'var(--shadow-md)' }}>
                    {(section?.questions ?? [])?.map?.((faq: any, j: number) => (
                      <FaqItem key={j} question={faq?.q ?? ''} answer={faq?.a ?? ''} />
                    )) ?? []}
                  </div>
                </div>
              </AnimatedSection>
            )) ?? []}
          </div>

          {/* CTA */}
          <AnimatedSection className="mt-16">
            <div className="bg-navy rounded-xl p-8 text-center">
              <h3 className="font-display text-2xl font-bold text-white mb-3">
                Still Have <span className="text-gold">Questions?</span>
              </h3>
              <p className="text-white/70 mb-6 text-sm">
                Our team is happy to help. Get in touch and we will answer any questions you have.
              </p>
              <Link
                href="/contact"
                className="inline-flex items-center gap-2 bg-gold hover:bg-gold-light text-navy font-semibold px-8 py-3 rounded-md transition-all duration-300"
              >
                Contact Us
                <ArrowRight className="w-5 h-5" />
              </Link>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}
