"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { TrendingUp, Users, Shield, Globe, Zap, MessageCircle, Mail } from "lucide-react";

export default function HomePage() {
  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: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Security", id: "metrics" },
            { name: "Blog", id: "blog" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Launch App", href: "https://app.example.com" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo
          logoText="CryptoVault"
          description="Secure, intelligent cryptocurrency trading platform for everyone. Trade smarter with advanced analytics and institutional-grade security."
          buttons={[
            { text: "Start Trading", href: "https://app.example.com" },
            { text: "Learn More", href: "features" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250224.jpg"
          imageAlt="cryptocurrency blockchain digital technology abstract"
          showDimOverlay={true}
          logoLineHeight={1.15}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Powerful Features for Traders"
          description="Everything you need to succeed in crypto trading with cutting-edge tools and real-time insights"
          tag="Features"
          tagIcon={Zap}
          textboxLayout="default"
          gridVariant="one-large-right-three-stacked-left"
          animationType="slide-up"
          features={[
            {
              title: "Advanced Security",
              description: "Military-grade encryption with 2FA and biometric authentication to protect your assets",
              imageSrc: "https://img.b2bpic.net/free-vector/gradient-shield-with-padlock_78370-4392.jpg",
              imageAlt: "security lock protection shield digital"
            },
            {
              title: "Live Trading Charts",
              description: "Real-time market data and advanced charting tools for informed decision making",
              imageSrc: "https://img.b2bpic.net/free-vector/security-shield_23-2147513469.jpg",
              imageAlt: "trading chart finance graph market"
            },
            {
              title: "Smart Wallet",
              description: "Seamless multi-coin wallet with instant deposits and withdrawals",
              imageSrc: "https://img.b2bpic.net/free-vector/security-concept_23-2147511847.jpg",
              imageAlt: "wallet payment digital money transaction"
            },
            {
              title: "Portfolio Analytics",
              description: "Detailed insights into your portfolio performance with predictive analytics",
              imageSrc: "https://img.b2bpic.net/free-vector/secure-abstract-technology-background_23-2148348343.jpg",
              imageAlt: "analytics dashboard data report insights"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Trusted by millions of traders worldwide"
          description="Our platform processes billions in daily transactions with zero security breaches"
          tag="Statistics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          metrics={[
            {
              id: "users",
              value: "2.5M",
              title: "Active Users",
              description: "Traders actively using our platform daily",
              icon: Users
            },
            {
              id: "volume",
              value: "$48B",
              title: "Daily Volume",
              description: "Total cryptocurrency trading volume processed",
              icon: TrendingUp
            },
            {
              id: "uptime",
              value: "99.99%",
              title: "Uptime SLA",
              description: "Guaranteed platform availability",
              icon: Shield
            },
            {
              id: "countries",
              value: "150+",
              title: "Countries",
              description: "Operating in major markets worldwide",
              icon: Globe
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="What Our Traders Say"
          description="Join thousands of satisfied traders who trust CryptoVault with their investments"
          tag="Testimonials"
          tagIcon={MessageCircle}
          textboxLayout="default"
          animationType="blur-reveal"
          speed={40}
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson",
              handle: "@sarahtrader",
              testimonial: "CryptoVault transformed my trading strategy. The analytics dashboard is incredibly intuitive and the security features give me complete peace of mind.",
              imageSrc: "https://img.b2bpic.net/free-vector/colorful-set-smiley-men-avatars_23-2147672541.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "@cryptomike",
              testimonial: "Best trading platform I've used. The execution speed is lightning-fast and the customer support team is always helpful. Highly recommend!",
              imageSrc: "https://img.b2bpic.net/free-vector/male-female-avatars-flat-design_23-2147528437.jpg",
              imageAlt: "avatar portrait business professional user"
            },
            {
              id: "3",
              name: "Emma Davis",
              handle: "@emmainvests",
              testimonial: "The mobile app is a game-changer. I can monitor my portfolio and execute trades from anywhere. The UI is clean and super responsive.",
              imageSrc: "https://img.b2bpic.net/free-vector/pack-male-female-avatars_23-2147666977.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "4",
              name: "David Kim",
              handle: "@davidk_trading",
              testimonial: "I've tried many crypto exchanges, but CryptoVault stands out with its transparency and low fees. Been trading here for 2 years without issues.",
              imageSrc: "https://img.b2bpic.net/free-vector/variety-avatars-flat-design_23-2147662095.jpg",
              imageAlt: "avatar portrait business professional user"
            },
            {
              id: "5",
              name: "Lisa Rodriguez",
              handle: "@lisacrypto",
              testimonial: "The API integration with my bot was seamless. Support team answered all my questions in minutes. This is professional-grade infrastructure.",
              imageSrc: "https://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg",
              imageAlt: "profile avatar user person professional"
            },
            {
              id: "6",
              name: "James Wilson",
              handle: "@jwilson_trades",
              testimonial: "Security is top-notch here. Multi-factor authentication, cold storage, and transparent audits. Perfect for institutional investors like me.",
              imageSrc: "https://img.b2bpic.net/free-vector/hand-drawn-people-avatar-collection_23-2148074529.jpg",
              imageAlt: "avatar portrait business professional user"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated on Crypto Markets"
          description="Get daily market insights, trading tips, and exclusive updates delivered to your inbox. Join 500k+ traders receiving our newsletter."
          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="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. See our Privacy Policy."
          useInvertedBackground="noInvert"
        />
      </div>

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