"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Rocket } from 'lucide-react';

export default function ContactPage() {
  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="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Ready to Start Trading?"
          ctaDescription="Join millions of traders and secure your digital future with CryptoVault today."
          ctaButton={{ text: "Create Account", href: "https://app.cryptovault.example" }}
          ctaIcon={Rocket}
          faqs={[
            {
              id: "1",
              title: "How long does account verification take?",
              content: "Most accounts are verified within 5-10 minutes. We use advanced KYC technology to speed up the process while maintaining the highest security standards."
            },
            {
              id: "2",
              title: "Can I trade immediately after signup?",
              content: "Yes! You can start trading crypto-to-crypto immediately. Fiat deposits require verification, which typically takes minutes but can take up to 24 hours depending on your payment method."
            },
            {
              id: "3",
              title: "What payment methods are accepted?",
              content: "We accept bank transfers, credit/debit cards, and crypto deposits. Bank transfers offer the lowest fees, while cards provide instant liquidity."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>

      <div id="onboarding-metrics" data-section="onboarding-metrics">
        <MetricCardEleven 
          title="Quick & Easy Onboarding"
          description="Get started in minutes with our streamlined verification process."
          tag="Get Started"
          metrics={[
            {
              id: "1",
              value: "5 mins",
              title: "Account Setup",
              description: "Complete verification in just minutes",
              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-15664.jpg",
              imageAlt: "Quick account setup process"
            },
            {
              id: "2",
              value: "Instant",
              title: "Crypto Trading",
              description: "Start trading crypto-to-crypto immediately",
              imageSrc: "https://img.b2bpic.net/free-photo/happiness-power-smile-opportunity-graph-growth_53876-134038.jpg",
              imageAlt: "Instant trading capabilities"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="new-user-testimonials" data-section="new-user-testimonials">
        <TestimonialCardTwo 
          title="New User Experiences"
          description="See what our recent users have to say about getting started with CryptoVault."
          tag="First Impressions"
          testimonials={[
            {
              id: "1",
              name: "Tom Anderson",
              role: "New Crypto Investor",
              testimonial: "I was nervous about my first crypto investment, but CryptoVault made it incredibly easy. The onboarding was smooth and I was trading within 10 minutes.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Tom Anderson"
            },
            {
              id: "2",
              name: "Jennifer Liu",
              role: "First-Time Trader",
              testimonial: "The educational resources and intuitive interface made learning crypto trading much less intimidating. Great platform for beginners!",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              imageAlt: "Jennifer Liu"
            },
            {
              id: "3",
              name: "Carlos Martinez",
              role: "Tech Professional",
              testimonial: "As someone who values security and simplicity, CryptoVault exceeded my expectations. The verification process was quick and thorough.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageAlt: "Carlos Martinez"
            }
          ]}
          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>
  );
}