"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Shield, TrendingUp, Sparkles } from "lucide-react";

export default function HomePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="floatingGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="CryptoVault"
          bottomLeftText="Decentralized Finance"
          bottomRightText="hello@cryptovault.io"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplit
          title="Secure Your Digital Assets"
          description="Trade, stake, and manage your cryptocurrency with enterprise-grade security and lightning-fast transactions. Join thousands of users who trust CryptoVault."
          tag="Web3 Revolution"
          tagIcon={Zap}
          background={{ variant: "glowing-orb" }}
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250213.jpg"
          imageAlt="Cryptocurrency trading dashboard"
          imagePosition="right"
          buttons={[
            { text: "Get Started Free", href: "https://app.example.com" },
            { text: "Watch Demo", href: "demo" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree
          features={[
            {
              id: "01",
              title: "Military-Grade Security",
              description: "Multi-signature wallets with cold storage and advanced encryption protocols",
              imageSrc: "https://img.b2bpic.net/free-photo/padlock-computer-circuit-board_93675-129557.jpg",
              imageAlt: "Security features"
            },
            {
              id: "02",
              title: "Lightning Speed",
              description: "Instant transactions with sub-second confirmation times across all networks",
              imageSrc: "https://img.b2bpic.net/free-photo/top-view-lock-keyboard_23-2148578048.jpg",
              imageAlt: "Fast transaction processing"
            },
            {
              id: "03",
              title: "Real-Time Analytics",
              description: "Advanced charting tools and AI-powered market insights for smarter trading",
              imageSrc: "https://img.b2bpic.net/free-vector/wireframe-chain-with-digital-code-lock-blockchain-cyber-security-safe-privacy-concept_127544-953.jpg",
              imageAlt: "Analytics dashboard"
            },
            {
              id: "04",
              title: "API Integration",
              description: "Connect seamlessly with other platforms and build custom trading strategies",
              imageSrc: "https://img.b2bpic.net/free-vector/abstract-security-background-with-circuits_23-2147633221.jpg",
              imageAlt: "API integration"
            }
          ]}
          title="Powerful Features for Traders"
          description="Everything you need to succeed in crypto trading, all in one platform"
          tag="Pro Tools"
          tagIcon={Shield}
          textboxLayout="default"
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          metrics={[
            { id: "1", value: "$2.5B+", description: "Assets Under Management" },
            { id: "2", value: "500K+", description: "Active Users" },
            { id: "3", value: "150+", description: "Supported Cryptocurrencies" },
            { id: "4", value: "24/7", description: "Premium Support Available" }
          ]}
          title="Trusted by Millions"
          description="Growing community of traders and investors worldwide"
          tag="Statistics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          plans={[
            {
              id: "starter",
              badge: "Popular",
              price: "$0",
              subtitle: "Perfect for beginners",
              buttons: [{ text: "Start Free", href: "https://app.example.com/signup" }],
              features: [
                "Unlimited trades per month",
                "Basic charting tools",
                "Email support",
                "Mobile app access",
                "Community forum"
              ]
            },
            {
              id: "pro",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              price: "$19/mo",
              subtitle: "Best for active traders",
              buttons: [{ text: "Upgrade Now", href: "https://app.example.com/pro" }],
              features: [
                "All Starter features",
                "Advanced analytics & AI signals",
                "Priority support 24/7",
                "API access",
                "Custom alerts",
                "Lower trading fees"
              ]
            },
            {
              id: "elite",
              badge: "Premium",
              price: "$99/mo",
              subtitle: "For professional traders",
              buttons: [{ text: "Go Elite", href: "https://app.example.com/elite" }],
              features: [
                "All Pro features",
                "Dedicated account manager",
                "White-label solutions",
                "Margin trading access",
                "Premium liquidity pools",
                "Custom fee structure"
              ]
            }
          ]}
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your trading style and investment goals"
          tag="Flexible Plans"
          tagIcon={Sparkles}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="CryptoVault completely transformed how I manage my portfolio. The security features give me peace of mind, and the trading tools are exactly what I needed to level up my strategy."
          rating={5}
          author="Marcus Chen, Crypto Investor"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Testimonial author" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", alt: "Satisfied user" },
            { src: "https://img.b2bpic.net/free-photo/inspiring-new-boss_1098-93.jpg", alt: "Happy trader" },
            { src: "https://img.b2bpic.net/free-photo/side-view-business-man-city_23-2148479568.jpg", alt: "Verified user" },
            { src: "https://img.b2bpic.net/free-photo/serious-beautiful-businesswoman-standing-window_1262-1913.jpg", alt: "Success story" },
            { src: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", alt: "Community member" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal
        columns={[
          {
            title: "Product",
            items: [
              { label: "Features", href: "/features" },
              { label: "Pricing", href: "/pricing" },
              { label: "Security", href: "https://cryptovault.io/security" },
              { label: "API Docs", href: "https://docs.cryptovault.io" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Blog", href: "https://blog.cryptovault.io" },
              { label: "Careers", href: "https://careers.cryptovault.io" },
              { label: "Contact", href: "/contact" }
            ]
          },
          {
            title: "Legal",
            items: [
              { label: "Privacy Policy", href: "https://cryptovault.io/privacy" },
              { label: "Terms of Service", href: "https://cryptovault.io/terms" },
              { label: "Cookie Policy", href: "https://cryptovault.io/cookies" },
              { label: "Compliance", href: "https://cryptovault.io/compliance" }
            ]
          }
        ]}
        copyrightText="© 2025 CryptoVault. All rights reserved. Secure your future in crypto."
      />
    </ThemeProvider>
  );
}