"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Mail, HelpCircle } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="mediumLarge"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="CryptoVault"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{ text: "Launch App", href: "https://app.example.com" }}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          title="Ready to Start Trading?"
          description="Join our community of traders and get access to institutional-grade tools. Our team is here to help you succeed in cryptocurrency trading."
          tagIcon={Mail}
          imageSrc="https://img.b2bpic.net/free-photo/join-us-register-newsletter-concept_53876-132697.jpg"
          imageAlt="email newsletter subscribe communication digital"
          mediaPosition="right"
          inputPlaceholder="your@email.com"
          buttonText="Get Started"
          termsText="By signing up, you agree to our Terms of Service and Privacy Policy. We'll send you important updates about your account."
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about CryptoVault and getting started with crypto trading"
          tag="Support"
          tagIcon={HelpCircle}
          textboxLayout="default"
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="customer support help service assistance"
          mediaPosition="left"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "Is CryptoVault secure?",
              content: "Yes, we use military-grade encryption, 2FA, and cold storage for 95% of assets. We've undergone third-party security audits and maintain a zero-breach record since our launch."
            },
            {
              id: "2",
              title: "What cryptocurrencies can I trade?",
              content: "We support 200+ cryptocurrencies including Bitcoin, Ethereum, Solana, and all major altcoins. New coins are added regularly based on market demand and regulatory compliance."
            },
            {
              id: "3",
              title: "How long does account verification take?",
              content: "Most accounts are verified within 5-10 minutes. Some accounts may require additional documentation which can take up to 24 hours. Premium members get priority verification."
            },
            {
              id: "4",
              title: "What are the trading fees?",
              content: "We charge 0.1% per trade for most users. Premium members get 0.05% fees, and high-volume traders can negotiate custom rates. There are no hidden fees."
            },
            {
              id: "5",
              title: "Can I withdraw my funds anytime?",
              content: "Yes, you can withdraw your funds 24/7 with no lock-in period. Withdrawals are processed instantly for most cryptocurrencies and within 2-3 business days for fiat transfers."
            },
            {
              id: "6",
              title: "Do you offer API access?",
              content: "Yes, we provide REST and WebSocket APIs for automated trading. Pro and Enterprise plans include full API access with rate limits appropriate for your plan."
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <FooterLogoReveal
        logoText="CryptoVault"
        logoLineHeight={1.1}
      />
    </ThemeProvider>
  );
}