"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FaqBase from '@/components/sections/faq/FaqBase';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';

export default function FaqPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="CryptoVault"
          navItems={[
            { name: "Platform", id: "/" },
            { name: "Security", id: "/about" },
            { name: "About", id: "/about" },
            { name: "Resources", id: "/faq" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Get Started", href: "/contact" }}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase 
          title="Common Questions"
          description="Everything you need to know about trading on CryptoVault."
          tag="Help"
          faqs={[
            {
              id: "1",
              title: "How do I secure my account?",
              content: "CryptoVault uses military-grade encryption, two-factor authentication, and hardware wallet integration. We recommend enabling all security features in your account settings. Your private keys never leave your device."
            },
            {
              id: "2",
              title: "What are the trading fees?",
              content: "Standard trading fees start at 0.1% and decrease with volume. Market makers receive a 0.05% rebate. There are no hidden fees, and all costs are transparent in real-time before you execute any trade."
            },
            {
              id: "3",
              title: "How fast are withdrawals?",
              content: "Crypto withdrawals are instant for most networks. Fiat withdrawals typically process within 1-2 business days depending on your bank. Priority processing is available for premium members."
            },
            {
              id: "4",
              title: "Which countries are supported?",
              content: "CryptoVault operates in 180+ countries. We comply with all relevant financial regulations. Some regions may have restricted features due to local laws."
            },
            {
              id: "5",
              title: "Is there a minimum deposit?",
              content: "No minimum deposit required. You can start trading with any amount. However, most trading pairs have minimum order sizes of $10-100 depending on the asset."
            },
            {
              id: "6",
              title: "What happens if you get hacked?",
              content: "We maintain a 100% security fund backed by insurance. All user assets are held in cold storage with multi-signature protection. We've never had a security breach in our 7-year history."
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="support-metrics" data-section="support-metrics">
        <MetricCardEleven 
          title="Support Statistics"
          description="Our commitment to providing exceptional customer service around the clock."
          tag="Customer Care"
          metrics={[
            {
              id: "1",
              value: "<30s",
              title: "Average Response",
              description: "24/7 live chat support response time",
              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-15664.jpg",
              imageAlt: "Customer support team"
            },
            {
              id: "2",
              value: "98%",
              title: "Satisfaction Rate",
              description: "Customer satisfaction with our support team",
              imageSrc: "https://img.b2bpic.net/free-photo/happiness-power-smile-opportunity-graph-growth_53876-134038.jpg",
              imageAlt: "Customer satisfaction metrics"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="expert-testimonials" data-section="expert-testimonials">
        <TestimonialCardTwo 
          title="What Experts Say"
          description="Industry recognition and expert opinions on our platform and services."
          tag="Industry Recognition"
          testimonials={[
            {
              id: "1",
              name: "TechCrunch Review",
              role: "Leading Tech Publication",
              testimonial: "CryptoVault sets the gold standard for cryptocurrency exchanges. Their security-first approach and transparent fee structure make it the clear choice for serious traders.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "TechCrunch reviewer"
            },
            {
              id: "2",
              name: "CoinDesk Analysis",
              role: "Blockchain News Leader",
              testimonial: "The platform's institutional-grade infrastructure and regulatory compliance position it as a leader in the next generation of crypto exchanges.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              imageAlt: "CoinDesk analyst"
            },
            {
              id: "3",
              name: "Forbes Feature",
              role: "Financial Media",
              testimonial: "CryptoVault's innovative approach to security and user experience is reshaping how institutions and retail traders interact with digital assets.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageAlt: "Forbes contributor"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal 
        columns={[
          {
            title: "Product",
            items: [
              { label: "Platform", href: "/" },
              { label: "Security", href: "/about" },
              { label: "API Docs", href: "https://docs.cryptovault.example" },
              { label: "Mobile App", href: "https://app.cryptovault.example" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.example" },
              { label: "Careers", href: "https://careers.cryptovault.example" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Terms of Service", href: "https://cryptovault.example/terms" },
              { label: "Privacy Policy", href: "https://cryptovault.example/privacy" },
              { label: "Compliance", href: "https://cryptovault.example/compliance" },
              { label: "Security", href: "https://cryptovault.example/security" }
            ]
          }
        ]}
        copyrightText="© 2025 CryptoVault. All rights reserved. | Securing the future of digital finance."
      />
    </ThemeProvider>
  );
}