"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Shield, Lock, Zap, Eye, CheckCircle, Sparkles, TrendingUp, DollarSign, Crown, Star, Rocket, Twitter, Linkedin, Github } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="radialGradient"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="CryptoVault"
          navItems={[
            { name: "Platform", id: "platform" },
            { name: "Security", id: "security" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Trusted by 100k+ Users"
          bottomRightText="hello@cryptovault.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="CRYPTOVAULT"
          description="The most secure and intuitive cryptocurrency platform for institutional and retail investors. Trade, stake, and earn with industry-leading security protocols."
          buttons={[
            { text: "Start Trading", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250222.jpg"
          imageAlt="Cryptocurrency trading platform interface"
          frameStyle="browser"
          logoLineHeight={1.15}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Enterprise-Grade Security Meets Simplicity"
          description="CryptoVault combines military-grade encryption with an intuitive interface designed for everyone. Whether you're a seasoned trader or new to crypto, our platform puts you in control."
          tag="Why Choose Us"
          tagIcon={Shield}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imagePosition="right"
          bulletPoints={[
            {
              title: "Military-Grade Encryption",              description: "AES-256 encryption protecting all your assets with advanced security protocols",              icon: Lock
            },
            {
              title: "Instant Settlement",              description: "Execute trades in milliseconds with our optimized blockchain infrastructure",              icon: Zap
            },
            {
              title: "24/7 Monitoring",              description: "Real-time threat detection and automated security responses protecting your funds",              icon: Eye
            },
            {
              title: "Regulatory Compliance",              description: "Fully licensed and compliant with international financial regulations and standards",              icon: CheckCircle
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/shiny-security-background-with-padlocks_23-2147630802.jpg"
          imageAlt="Security and encryption technology"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardNineteen
          title="Advanced Trading Platform"
          description="Comprehensive tools designed for professional traders and crypto enthusiasts"
          tag="Features"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Wallets",              title: "Secure Wallet Management",              subtitle: "Multi-signature wallets with hardware integration",              description: "Manage multiple cryptocurrency wallets with advanced security features. Support for hardware wallets, cold storage, and institutional-grade custody solutions.",              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250221.jpg",              imageAlt: "Digital wallet interface"
            },
            {
              id: 2,
              tag: "Trading",              title: "Advanced Trading Tools",              subtitle: "Professional-grade charting and analytics",              description: "Execute sophisticated trading strategies with real-time market data, advanced charting tools, and automated order management. Access to multiple trading pairs and liquidity pools.",              imageSrc: "https://img.b2bpic.net/free-photo/back-view-young-business-man-talking-phone-sitting-his-office-diagrams-monitor_482257-34736.jpg",              imageAlt: "Trading charts and analytics"
            },
            {
              id: 3,
              tag: "Earning",              title: "Staking & Rewards",              subtitle: "Earn passive income from your holdings",              description: "Generate consistent returns through proof-of-stake mechanisms. Flexible staking periods, competitive APY rates, and transparent reward calculations for maximum earnings.",              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-61045.jpg",              imageAlt: "Staking rewards illustration"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Global Impact"
          description="Trusted by millions of users worldwide for secure cryptocurrency management"
          tag="Statistics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "$50B+",              title: "Assets Under Management",              items: [
                "Secure custody solutions",                "Institutional-grade infrastructure",                "Advanced risk management"
              ]
            },
            {
              id: "2",              value: "100K+",              title: "Active Users Daily",              items: [
                "Global community engagement",                "24/7 platform availability",                "Multi-language support"
              ]
            },
            {
              id: "3",              value: "150+",              title: "Supported Cryptocurrencies",              items: [
                "Major coins and altcoins",                "Layer 2 solutions",                "DeFi tokens"
              ]
            },
            {
              id: "4",              value: "99.99%",              title: "Platform Uptime",              items: [
                "Enterprise infrastructure",                "Redundant systems",                "Real-time monitoring"
              ]
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Transparent Pricing Plans"
          description="Choose the plan that fits your trading needs and volume"
          tag="Pricing"
          tagIcon={DollarSign}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          plans={[
            {
              id: "starter",              badge: "Popular",              badgeIcon: Sparkles,
              price: "Free",              subtitle: "Perfect for beginners",              buttons: [
                { text: "Get Started", href: "#contact" }
              ],
              features: [
                "Up to $10,000 monthly trading",                "Basic wallet features",                "Email support",                "Standard security features"
              ]
            },
            {
              id: "pro",              badge: "Best Value",              badgeIcon: Zap,
              price: "$29/mo",              subtitle: "For active traders",              buttons: [
                { text: "Start Free Trial", href: "#contact" }
              ],
              features: [
                "Unlimited trading volume",                "Advanced charting tools",                "Priority support",                "API access",                "Custom alerts"
              ]
            },
            {
              id: "enterprise",              badge: "For Institutions",              badgeIcon: Crown,
              price: "Custom",              subtitle: "White-label solutions",              buttons: [
                { text: "Contact Sales", href: "#contact" }
              ],
              features: [
                "Dedicated account manager",                "Custom integrations",                "Advanced reporting",                "SLA guarantees",                "24/7 phone support"
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Users Say"
          description="Real feedback from crypto investors and traders using CryptoVault"
          tag="Testimonials"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Marcus Reynolds",              role: "Crypto Investor",              company: "Digital Assets LLC",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg",              imageAlt: "Marcus Reynolds"
            },
            {
              id: "2",              name: "Jessica Chen",              role: "Portfolio Manager",              company: "Blockchain Capital",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg",              imageAlt: "Jessica Chen"
            },
            {
              id: "3",              name: "David Thompson",              role: "Trading Director",              company: "CryptoX Finance",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-hipster-lambersexual-modelsexy-modern-man-dressed-elegant-suit-fashion-male-posing-studio-near-blue-wall_158538-21048.jpg",              imageAlt: "David Thompson"
            },
            {
              id: "4",              name: "Sarah Mitchell",              role: "Tech Lead",              company: "DeFi Innovations",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/content-senior-businessman-with-arms-crossed_1262-1790.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "5",              name: "Robert Jackson",              role: "CFO",              company: "Global Ventures",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/friendly-handsome-business-leader-cafe_1262-3537.jpg",              imageAlt: "Robert Jackson"
            },
            {
              id: "6",              name: "Emily Rodriguez",              role: "Chief Architect",              company: "Web3 Systems",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Emily Rodriguez"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Ready to Secure Your Crypto?"
          ctaDescription="Join thousands of investors using CryptoVault for safe and profitable trading."
          ctaIcon={Rocket}
          ctaButton={{ text: "Start Your Account", href: "#" }}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          accordionAnimationType="smooth"
          showCard={true}
          faqs={[
            {
              id: "1",              title: "Is my cryptocurrency secure on CryptoVault?",              content: "Absolutely. We use military-grade AES-256 encryption, multi-signature wallets, and cold storage solutions. Your assets are protected by institutional-grade security infrastructure with regular third-party audits."
            },
            {
              id: "2",              title: "What cryptocurrencies can I trade?",              content: "CryptoVault supports 150+ cryptocurrencies including Bitcoin, Ethereum, and emerging Layer 2 tokens. We continuously add new assets based on market demand and regulatory approval."
            },
            {
              id: "3",              title: "How long does account verification take?",              content: "Our streamlined verification process takes typically 5-15 minutes. For higher trading limits, enhanced KYC verification may be required, which usually completes within 24-48 hours."
            },
            {
              id: "4",              title: "What are the trading fees?",              content: "Trading fees start at 0.1% and decrease with volume. Pro members enjoy reduced fees from 0.05%, and enterprise clients receive custom rates. See our pricing page for detailed fee schedules."
            },
            {
              id: "5",              title: "Can I use an API for automated trading?",              content: "Yes, our REST and WebSocket APIs enable automated trading strategies. API access is available on Pro and Enterprise plans with detailed documentation and code examples for easy integration."
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CryptoVault"
          copyrightText="© 2024 CryptoVault. All rights reserved. | Licensed & Regulated"
          socialLinks={[
            { icon: Twitter, href: "https://twitter.com/cryptovault", ariaLabel: "Follow us on Twitter" },
            { icon: Linkedin, href: "https://linkedin.com/company/cryptovault", ariaLabel: "Connect on LinkedIn" },
            { icon: Github, href: "https://github.com/cryptovault", ariaLabel: "View our code on GitHub" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}