"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Crown, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="large"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "About",          id: "about"},
        {
          name: "Features",          id: "features"},
        {
          name: "Pricing",          id: "pricing"},
        {
          name: "FAQ",          id: "faq"},
        {
          name: "Contact",          id: "contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/20-cryptocurrency-blue-color-icon-presentation-vector-icons-illustration_1142-15830.jpg"
      logoAlt="CryptoVault Logo"
      brandName="CryptoVault"
      bottomLeftText="Global Community"
      bottomRightText="hello@cryptovault.com"
      button={{
        text: "Sign Up",        href: "#contact"}}
    />
  </div>

  <div id="home" data-section="home">
      <HeroCarouselLogo
      logoText="CryptoVault"
      description="Secure your digital future with CryptoVault. The leading platform for managing and growing your cryptocurrency assets with unparalleled security and ease."
      buttons={[
        {
          text: "Get Started",          href: "#contact"},
        {
          text: "Explore Features",          href: "#features"},
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-design-extruding-cubes_1048-12334.jpg",          imageAlt: "Abstract blockchain network with glowing blue lines"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/street-statistics-debt-loss-globe_1150-1721.jpg",          imageAlt: "Holographic cryptocurrency chart with upward trends"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-shot-lock-around-dollar-bill-black-laptop_181624-9123.jpg",          imageAlt: "Secure digital vault icon with blue light"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/golden-coins-include-dollar-yen-yuan-euro-ruble-won-pound-sterling-with-mobile-phone-frame-currency-exchange-forex-trading-concept-by-3d-render-illustration_616485-119.jpg",          imageAlt: "Quantum computing processing crypto transactions"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917430.jpg",          imageAlt: "Hand interacting with transparent touchscreen showing crypto wallet"},
        {
          imageSrc: "http://img.b2bpic.net/free-photo/high-tech-view-futuristic-earth_23-2151100331.jpg",          imageAlt: "Global network of interconnected digital currencies"},
      ]}
      autoplayDelay={3000}
      showDimOverlay={true}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="About CryptoVault"
      description={[
        "CryptoVault provides a comprehensive suite of tools for institutional and individual investors to navigate the complex world of digital assets. Our platform is built on cutting-edge blockchain technology, offering transparent, secure, and efficient solutions for trading, staking, and portfolio management.",        "We are committed to empowering our users with advanced analytics, real-time market data, and expert insights, ensuring they make informed decisions and achieve their financial goals in the rapidly evolving crypto landscape."]}
      showBorder={false}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "real-time-data",          title: "Real-Time Market Data",          descriptions: [
            "Access live prices, trends, and in-depth analytics across thousands of cryptocurrencies. Stay ahead of the market with instant updates and comprehensive charts."],
          imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461311.jpg",          imageAlt: "Real-time crypto portfolio dashboard"},
        {
          id: "smart-contracts",          title: "Smart Contract Integration",          descriptions: [
            "Seamlessly interact with decentralized applications (DApps) and execute trustless agreements. Secure and automated transactions powered by advanced smart contract technology."],
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg",          imageAlt: "Smart contracts code illustration"},
        {
          id: "high-speed-trading",          title: "High-Speed Trading Engine",          descriptions: [
            "Execute trades with ultra-low latency and robust infrastructure. Our powerful engine ensures your orders are filled quickly and efficiently, even during peak volatility."],
          imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480181.jpg",          imageAlt: "High-speed transaction processing"},
        {
          id: "ai-analytics",          title: "AI-Driven Market Analytics",          descriptions: [
            "Leverage artificial intelligence to uncover hidden market patterns and predictive insights. Make smarter investment decisions with data-driven forecasts."],
          imageSrc: "http://img.b2bpic.net/free-photo/man-analyzing-stock-market-charts-financial-data-electronic-board_169016-14901.jpg",          imageAlt: "AI-driven crypto analytics"},
        {
          id: "cold-storage",          title: "Secure Cold Storage",          descriptions: [
            "Protect your assets with industry-leading cold storage solutions. Your funds are kept offline, safe from cyber threats, with multi-signature authorization."],
          imageSrc: "http://img.b2bpic.net/free-photo/access-connection-internet-technology-concept_53876-122485.jpg",          imageAlt: "Secure cold storage hardware wallet"},
      ]}
      title="Core Features"
      description="Experience the power of a truly integrated crypto platform designed for performance and reliability."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Unmatched Performance"
      tag="Our Achievements"
      metrics={[
        {
          id: "metric-1",          value: "$500B+",          description: "Assets Under Management"},
        {
          id: "metric-2",          value: "24/7",          description: "Global Support"},
        {
          id: "metric-3",          value: "99.9%",          description: "Uptime Reliability"},
        {
          id: "metric-4",          value: "10M+",          description: "Active Users"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Blockchain Titans",        "Quantum Ledger",        "Future Finance Group",        "Decentralized Innovations",        "Global Crypto Solutions",        "Apex Digital Assets",        "Nexus Block"]}
      title="Trusted by Industry Leaders"
      description="Our innovative solutions are backed by the best in the blockchain ecosystem, ensuring unparalleled security and reliability."
      speed={40}
      showCard={true}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",          badge: "Standard",          badgeIcon: Sparkles,
          price: "$0/mo",          name: "Foundation",          buttons: [
            {
              text: "Get Started",              href: "#contact"},
          ],
          features: [
            "Core trading functionalities",            "Real-time market insights",            "Standard security protocols",            "Community forum access"],
        },
        {
          id: "pro",          badge: "Growth",          badgeIcon: Zap,
          price: "$99/mo",          name: "Advanced",          buttons: [
            {
              text: "Choose Pro",              href: "#contact"},
          ],
          features: [
            "Advanced trading suite",            "AI-powered predictive analytics",            "Dedicated account support",            "Customizable smart contract templates",            "Enhanced security measures"],
        },
        {
          id: "enterprise",          badge: "Enterprise Elite",          badgeIcon: Crown,
          price: "Custom",          name: "Institutional",          buttons: [
            {
              text: "Request Demo",              href: "#contact"},
          ],
          features: [
            "Full-suite institutional platform",            "Bespoke API integrations & solutions",            "Multi-jurisdictional compliance",            "24/7 premium enterprise support",            "Advanced cold storage & custody",            "Regulatory advisory services"],
        },
      ]}
      title="Tailored Crypto Solutions for Your Enterprise"
      description="Unlock the full potential of digital assets with our flexible, scalable plans designed for institutional needs."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      faqsAnimation="slide-up"
      useInvertedBackground={false}
      sideTitle="Your B2B Crypto Questions, Answered"
      sideDescription="Navigate the complexities of enterprise crypto solutions with our expert insights."
      faqs={[
        {
          id: "faq-1",          title: "What are CryptoVault's core B2B solutions?",          content: "CryptoVault offers a comprehensive suite of B2B crypto solutions, including institutional trading platforms, secure custody services, smart contract development, and bespoke blockchain integration for enterprises."},
        {
          id: "faq-2",          title: "How does CryptoVault ensure enterprise-grade security?",          content: "We implement multi-factor authentication, advanced encryption, isolated cold storage solutions, and regular security audits. Our infrastructure is designed to meet stringent institutional security and compliance standards."},
        {
          id: "faq-3",          title: "What digital assets are supported for B2B operations?",          content: "CryptoVault supports a wide range of major cryptocurrencies and stablecoins, as well as enabling custom token integration and asset management tailored for specific enterprise requirements."},
        {
          id: "faq-4",          title: "What kind of support can B2B clients expect?",          content: "Enterprise clients benefit from a dedicated account manager, 24/7 priority support channels, and access to our team of blockchain experts for technical assistance and strategic guidance."},
        {
          id: "faq-5",          title: "Does CryptoVault offer custom blockchain development?",          content: "Yes, we provide bespoke blockchain development services, including private blockchain implementations, DApp creation, and smart contract auditing, tailored to your business needs."},
      ]}
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="CryptoVault has revolutionized how I manage my digital assets. The security features are top-notch, and the user interface is incredibly intuitive. A truly premium experience that I recommend to all serious investors!"
      rating={5}
      author="Alex R., Institutional Investor"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/bearded-stock-market-trader-looking-camera-with-hands-crossed_482257-30734.jpg",          alt: "Alex R."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-male-graphic-designer-with-arms-crossed_1170-1023.jpg",          alt: "Sarah J."},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-elegant-mature-male-browsing-tablet_23-2148673427.jpg",          alt: "Michael C."},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg",          alt: "Emily W."},
        {
          src: "http://img.b2bpic.net/free-photo/business-man-working-late-office_23-2148991380.jpg",          alt: "David S."},
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Partner with CryptoVault"
      description="Discover how CryptoVault can empower your enterprise with cutting-edge crypto solutions. Fill out the form below to connect with our B2B specialists."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "company",          type: "text",          placeholder: "Company Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
        {
          name: "subject",          type: "text",          placeholder: "Inquiry Type",          required: false,
        },
      ]}
      textarea={{
        name: "message",        placeholder: "Please describe your enterprise's needs and how we can assist.",        rows: 4,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-background-connecting-lines-dots_1048-7940.jpg"
      imageAlt="Digital communication network"
      mediaAnimation="slide-up"
      mediaPosition="right"
      buttonText="Send Message"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Platform",          items: [
            {
              label: "Features",              href: "#features"},
            {
              label: "Pricing",              href: "#pricing"},
            {
              label: "Security",              href: "#about"},
            {
              label: "API",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Blog",              href: "#"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Support",              href: "#contact"},
            {
              label: "Glossary",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Partnerships",              href: "#social-proof"},
            {
              label: "Press",              href: "#"},
          ],
        },
      ]}
      logoText="CryptoVault"
      copyrightText="© 2025 CryptoVault. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}