"use client";
import Link from "next/link";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Zap, Shield, CheckCircle, MessageSquare, DollarSign, Sparkles, Crown } from "lucide-react";

export default function HomePage() {
  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="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="The Future of Decentralized Finance is Here"
          description="Secure, transparent, and innovative cryptocurrency platform for seamless trading, staking, and asset management. Join thousands of crypto enthusiasts managing billions in digital assets."
          tag="Next Generation Crypto"
          tagIcon={Zap}
          buttons={[
            { text: "Start Trading Now", href: "/pricing" },
            { text: "Learn More", href: "/features" }
          ]}
          background={{ variant: "plain" }}
          carouselItems={[
            {
              id: "1",
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250222.jpg",
              imageAlt: "Bitcoin and cryptocurrency trading"
            },
            {
              id: "2",
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250221.jpg",
              imageAlt: "Secure crypto wallet"
            },
            {
              id: "3",
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-61045.jpg",
              imageAlt: "Ethereum blockchain"
            },
            {
              id: "4",
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-closeup-circuit-board-finance-concept_169016-61404.jpg",
              imageAlt: "Crypto trading charts"
            },
            {
              id: "5",
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-62791.jpg",
              imageAlt: "Blockchain network security"
            },
            {
              id: "6",
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrwncy-concept_23-2149250224.jpg",
              imageAlt: "Cryptocurrency coins collection"
            }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About CryptoVault"
          tagIcon={Shield}
          title="Building Trust in the Crypto Ecosystem"
          description="CryptoVault was founded with a mission to make cryptocurrency accessible, secure, and profitable for everyone. Our team of blockchain experts, security specialists, and financial engineers work tirelessly to create the most reliable platform in digital finance. With institutional-grade security and user-friendly interfaces, we've become the trusted choice for retail and professional traders worldwide."
          metrics={[
            { value: "$5B+", title: "Total Assets Under Management" },
            { value: "500K+", title: "Active Users Globally" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/bitcoin-coin-closeup-circuit-board-finance-concept_169016-61885.jpg"
          imageAlt="CryptoVault team collaborating"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyFour
          title="Powerful Features Built for Traders"
          description="Everything you need to trade, invest, and manage your crypto assets with confidence"
          tag="Features"
          tagIcon={CheckCircle}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: "1",
              title: "Advanced Trading Tools",
              author: "Trading Team",
              description: "Access real-time market data, advanced charting, and algorithmic trading capabilities to maximize your investment returns.",
              tags: ["Trading", "Professional"],
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-closeup-circuit-board-finance-concept_169016-61404.jpg",
              imageAlt: "Advanced trading interface"
            },
            {
              id: "2",
              title: "Bank-Level Security",
              author: "Security Team",
              description: "Military-grade encryption, multi-signature wallets, and cold storage solutions keep your assets safe from threats.",
              tags: ["Security", "Protection"],
              imageSrc: "https://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250221.jpg",
              imageAlt: "Security features"
            },
            {
              id: "3",
              title: "Instant Settlements",
              author: "Technical Team",
              description: "Lightning-fast transaction processing with blockchain technology ensures your trades settle in seconds.",
              tags: ["Fast", "Efficient"],
              imageSrc: "https://img.b2bpic.net/free-photo/bitcoin-coin-keyboard-with-nice-background-crypto-money-concept_169016-62791.jpg",
              imageAlt: "Fast settlement technology"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="Trusted by Crypto Investors Worldwide"
          description="See what our community members say about their experience with CryptoVault"
          tag="Testimonials"
          tagIcon={MessageSquare}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",
              name: "Sarah Johnson, Crypto Investor",
              date: "Date: 15 November 2024",
              title: "Best trading platform I've used",
              quote: "CryptoVault has completely transformed my crypto trading experience. The security features give me peace of mind, and the advanced tools have helped me achieve consistent returns.",
              tag: "Active Trader",
              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
              avatarAlt: "Sarah Johnson"
            },
            {
              id: "2",
              name: "Michael Chen, Portfolio Manager",
              date: "Date: 10 November 2024",
              title: "Professional-grade platform",
              quote: "The institutional features and API access have made it seamless to integrate CryptoVault into our investment operations. Customer support is exceptional.",
              tag: "Institution",
              avatarSrc: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",
              avatarAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Emma Rodriguez, Beginner Trader",
              date: "Date: 8 November 2024",
              title: "Easy to start, powerful to grow",
              quote: "I was intimidated by crypto trading until I found CryptoVault. The interface is intuitive, and their educational resources made learning so much easier.",
              tag: "Beginner",
              avatarSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
              avatarAlt: "Emma Rodriguez"
            },
            {
              id: "4",
              name: "David Kim, Hedge Fund Manager",
              date: "Date: 5 November 2024",
              title: "Enterprise solution that delivers",
              quote: "We manage millions in crypto assets on CryptoVault. The reliability, security, and sophisticated tools make it our platform of choice.",
              tag: "Enterprise",
              avatarSrc: "https://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
              avatarAlt: "David Kim"
            },
            {
              id: "5",
              name: "Lisa Wang, DeFi Researcher",
              date: "Date: 1 November 2024",
              title: "Innovation meets security",
              quote: "CryptoVault is at the forefront of crypto innovation. Their commitment to both cutting-edge features and security is unmatched in the industry.",
              tag: "Developer",
              avatarSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
              avatarAlt: "Lisa Wang"
            },
            {
              id: "6",
              name: "James Thompson, Wealth Advisor",
              date: "Date: 28 October 2024",
              title: "Client satisfaction guaranteed",
              quote: "I recommend CryptoVault to all my clients who want exposure to cryptocurrency. The platform's reliability and support keep my clients coming back.",
              tag: "Advisor",
              avatarSrc: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",
              avatarAlt: "James Thompson"
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your trading needs and scale as you grow"
          tag="Pricing Plans"
          tagIcon={DollarSign}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",
              badge: "Starter Plan",
              badgeIcon: Sparkles,
              price: "Free",
              subtitle: "Perfect for learning cryptocurrency trading",
              buttons: [
                { text: "Get Started", href: "/contact" },
                { text: "Learn More", href: "/features" }
              ],
              features: [
                "Basic trading tools",
                "Up to $10,000 trading limit",
                "Email support",
                "Real-time market data"
              ]
            },
            {
              id: "pro",
              badge: "Pro Plan",
              badgeIcon: Zap,
              price: "$29/mo",
              subtitle: "Advanced features for active traders",
              buttons: [
                { text: "Start Pro Trial", href: "/contact" },
                { text: "Contact Sales", href: "/contact" }
              ],
              features: [
                "Advanced charting tools",
                "Unlimited trading",
                "Priority 24/7 support",
                "API access"
              ]
            },
            {
              id: "enterprise",
              badge: "Enterprise",
              badgeIcon: Crown,
              price: "Custom",
              subtitle: "White-label solutions for institutions",
              buttons: [
                { text: "Schedule Demo", href: "/contact" },
                { text: "Contact Sales", href: "/contact" }
              ],
              features: [
                "Custom infrastructure",
                "Dedicated account manager",
                "Institutional-grade security",
                "SLA guarantees"
              ]
            }
          ]}
        />
      </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>
  );
}