"use client";
import Link from "next/link";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { HelpCircle, MessageCircle, Phone, Mail } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="slide-background"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Features", id: "/features" },
            { name: "Pricing", id: "/pricing" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="CryptoVault"
          bottomLeftText="Global Crypto Community"
          bottomRightText="hello@cryptovault.com"
        />
      </div>

      <div id="contact-info" data-section="contact-info" className="py-20 bg-background">
        <div className="mx-auto px-4 md:px-6 max-w-4xl">
          <div className="text-center mb-16">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
              <MessageCircle className="h-4 w-4" />
              Contact Us
            </div>
            <h1 className="text-4xl lg:text-6xl font-medium text-foreground mb-6">
              Get in Touch with CryptoVault
            </h1>
            <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
              Our team is here to help you with any questions about cryptocurrency trading, account setup, or technical support. Reach out through any of these channels.
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8">
            <div className="card p-8 text-center">
              <div className="h-12 w-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Mail className="h-6 w-6 text-accent" />
              </div>
              <h3 className="text-xl font-medium mb-2">Email Support</h3>
              <p className="text-foreground/70 mb-4">Get detailed help via email</p>
              <a href="mailto:support@cryptovault.com" className="text-accent hover:text-accent/80 font-medium">
                support@cryptovault.com
              </a>
            </div>
            
            <div className="card p-8 text-center">
              <div className="h-12 w-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <Phone className="h-6 w-6 text-accent" />
              </div>
              <h3 className="text-xl font-medium mb-2">Phone Support</h3>
              <p className="text-foreground/70 mb-4">Speak directly with our team</p>
              <a href="tel:+1-888-CRYPTO-1" className="text-accent hover:text-accent/80 font-medium">
                +1-888-CRYPTO-1
              </a>
            </div>
            
            <div className="card p-8 text-center">
              <div className="h-12 w-12 bg-accent/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <MessageCircle className="h-6 w-6 text-accent" />
              </div>
              <h3 className="text-xl font-medium mb-2">Live Chat</h3>
              <p className="text-foreground/70 mb-4">Available 24/7 for instant help</p>
              <button className="text-accent hover:text-accent/80 font-medium">
                Start Chat
              </button>
            </div>
          </div>
        </div>
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Find answers to common questions about CryptoVault and cryptocurrency trading"
          tag="Help Center"
          tagIcon={HelpCircle}
          animationType="smooth"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          faqs={[
            {
              id: "1",
              title: "How do I create a CryptoVault account?",
              content: "Creating an account is simple and takes just a few minutes. Click 'Sign Up' on our homepage, provide your email and create a secure password, verify your email address, and complete identity verification by uploading a government-issued ID. Once verified, you can fund your account and start trading immediately."
            },
            {
              id: "2",
              title: "What cryptocurrencies can I trade on CryptoVault?",
              content: "We support over 250 trading pairs including Bitcoin (BTC), Ethereum (ETH), and all major altcoins. Our selection includes established cryptocurrencies, promising new tokens, stablecoins like USDC and USDT, and DeFi tokens. We regularly add new assets based on market demand and our security review process."
            },
            {
              id: "3",
              title: "How secure is my cryptocurrency on CryptoVault?",
              content: "Security is our top priority. We use military-grade encryption, store 98% of funds in cold storage, implement multi-signature wallets, maintain comprehensive insurance coverage, and conduct regular security audits. Your funds are protected by the same technology used by major financial institutions."
            },
            {
              id: "4",
              title: "What are your trading fees?",
              content: "Our fee structure is transparent and competitive. Starter plan users pay standard market rates, Pro users enjoy reduced fees starting at 0.25%, and Enterprise clients receive custom fee structures. All fees are clearly displayed before you place any trade, with no hidden charges."
            },
            {
              id: "5",
              title: "How long do withdrawals take?",
              content: "Withdrawal times depend on the cryptocurrency and network conditions. Bitcoin and Ethereum typically process within 30 minutes to 2 hours. Faster networks like Solana and Polygon usually complete within 15 minutes. Fiat withdrawals to bank accounts typically take 1-3 business days."
            },
            {
              id: "6",
              title: "Do you offer customer support for beginners?",
              content: "Absolutely! We provide comprehensive support for cryptocurrency beginners including 24/7 live chat support, extensive educational resources, video tutorials and guides, dedicated onboarding assistance, and webinars on trading strategies. Our support team is trained to help users of all experience levels."
            }
          ]}
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Trading", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "/about" },
              { label: "API Docs", href: "https://docs.cryptovault.com" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.com" },
              { label: "Careers", href: "https://careers.cryptovault.com" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy", href: "#privacy" },
              { label: "Terms", href: "#terms" },
              { label: "Compliance", href: "#compliance" },
              { label: "Cookie Policy", href: "#cookies" }
            ]
          }
        ]}
        copyrightText="© 2024 CryptoVault. All rights reserved."
      />
    </ThemeProvider>
  );
}