"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Shield, Zap, Wallet, Database, Lock, Network, TrendingUp, BarChart3, Settings, Globe, PieChart, Bell, HelpCircle, Rocket } from 'lucide-react';

export default function HomePage() {
  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: "features" },
            { 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="hero" data-section="hero">
        <HeroLogo 
          logoText="CryptoVault"
          description="Secure, transparent, and innovative cryptocurrency trading platform. Your digital assets, protected with enterprise-grade security and lightning-fast transactions."
          imageSrc="https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-61045.jpg"
          imageAlt="Cryptocurrency trading dashboard"
          buttons={[
            { text: "Start Trading", href: "contact" },
            { text: "Learn More", href: "features" }
          ]}
          showDimOverlay={true}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout 
          title="Security First, Always"
          description="We combine cutting-edge blockchain technology with institutional-grade security protocols. Every transaction is encrypted, every wallet is protected, and every user is verified. Trust built on transparency."
          tag="Our Mission"
          imageSrc="https://img.b2bpic.net/free-vector/blockchain-concept_23-2147863445.jpg"
          imageAlt="Advanced security technology"
          buttons={[{ text: "Explore Security", href: "features" }]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento 
          title="Powerful Trading Features"
          description="Access advanced analytics, real-time market data, and seamless execution on our intuitive platform."
          tag="Platform"
          tagIcon={Zap}
          features={[
            {
              title: "Instant Settlements",
              description: "Execute trades in milliseconds with our optimized blockchain infrastructure",
              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Integration",
              description: "Connect with 150+ cryptocurrencies and major trading pairs worldwide",
              bentoComponent: "globe"
            },
            {
              title: "Smart Analytics",
              description: "Advanced charting tools and AI-powered market insights at your fingertips",
              bentoComponent: "line-chart"
            },
            {
              title: "Ecosystem Partners",
              description: "Integrate seamlessly with your favorite wallets, exchanges, and DeFi protocols",
              bentoComponent: "orbiting-icons",
              centerIcon: Shield,
              items: [
                { icon: Wallet, ring: 1 },
                { icon: Database, ring: 1 },
                { icon: Lock, ring: 2 },
                { icon: Network, ring: 2 }
              ]
            },
            {
              title: "Mobile Trading",
              description: "Trade on the go with our full-featured mobile application",
              bentoComponent: "phone",
              statusIcon: Lock,
              alertIcon: TrendingUp,
              alertTitle: "Price Alert",
              alertMessage: "Bitcoin up 5% in last hour",
              apps: [
                { name: "Trading", icon: TrendingUp },
                { name: "Wallet", icon: Wallet },
                { name: "Analytics", icon: BarChart3 },
                { name: "Settings", icon: Settings },
                { name: "Market", icon: Globe },
                { name: "Portfolio", icon: PieChart },
                { name: "Alerts", icon: Bell },
                { name: "Support", icon: HelpCircle }
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven 
          title="Trusted by Millions"
          description="Our platform handles billions in daily transaction volume with 99.99% uptime and zero security breaches since launch."
          tag="Impact"
          metrics={[
            {
              id: "1",
              value: "2.5M+",
              title: "Active Users",
              description: "Growing community of crypto traders worldwide",
              imageSrc: "https://img.b2bpic.net/free-photo/young-team-coworkers-working-project_273609-15664.jpg",
              imageAlt: "Active users community"
            },
            {
              id: "2",
              value: "$500B+",
              title: "Trading Volume",
              description: "Daily transaction volume processed securely",
              imageSrc: "https://img.b2bpic.net/free-photo/happiness-power-smile-opportunity-graph-growth_53876-134038.jpg",
              imageAlt: "Trading volume metrics"
            },
            {
              id: "3",
              value: "150+",
              title: "Supported Assets",
              description: "Cryptocurrencies and digital assets available",
              imageSrc: "https://img.b2bpic.net/free-photo/supporters-watching-their-team-win-game-mobile-phone_53876-132395.jpg",
              imageAlt: "Security infrastructure"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo 
          title="Trusted by Industry Leaders"
          description="See why thousands of traders choose CryptoVault for their digital asset management."
          tag="Reviews"
          testimonials={[
            {
              id: "1",
              name: "Michael Chen",
              role: "Hedge Fund Manager",
              testimonial: "The security infrastructure and API reliability are unmatched. We've moved our entire trading operation to CryptoVault.",
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "2",
              name: "Sarah Johnson",
              role: "Institutional Trader",
              testimonial: "Lightning-fast execution and transparent fees. This is exactly what institutional investors have been waiting for.",
              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",
              imageAlt: "Sarah Johnson"
            },
            {
              id: "3",
              name: "David Kim",
              role: "Portfolio Manager",
              testimonial: "The analytics dashboard gives us real-time insights we can't get anywhere else. Highly recommend to any serious trader.",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
              imageAlt: "David Kim"
            },
            {
              id: "4",
              name: "Emma Rodriguez",
              role: "Crypto Entrepreneur",
              testimonial: "Best-in-class customer support and the most intuitive interface I've used. Zero regrets switching over.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
              imageAlt: "Emma Rodriguez"
            },
            {
              id: "5",
              name: "James Wilson",
              role: "Finance Advisor",
              testimonial: "I recommend CryptoVault to all my clients. The security audits and compliance are transparent and thorough.",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-woman_23-2148603029.jpg",
              imageAlt: "James Wilson"
            },
            {
              id: "6",
              name: "Lisa Zhang",
              role: "DeFi Developer",
              testimonial: "Amazing API documentation and developer support. Integration was seamless and took less than a week.",
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
              imageAlt: "Lisa Zhang"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterBaseReveal 
        columns={[
          {
            title: "Product",
            items: [
              { label: "Platform", href: "features" },
              { 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>
  );
}