"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Play, TrendingUp, BarChart3 } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="mediumLargeSizeMediumTitles"
        background="none"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Trading", id: "trading" },
        { name: "About", id: "about" },
        { name: "Wallet", id: "wallet" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="ProScalper"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{ variant: "gradient-bars" }}
      title="Institutional-Grade Scalping Execution"
      description="Experience millisecond-latency trading execution. Sign up with Google to create your trading account instantly—no ID required, just secure setup and verification."
      leftCarouselItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/empty-workspace-desktop-running-day-trading-stock-market-trends_482257-126997.jpg?_wi=1", imageAlt: "Trading UI 1" },
        { imageSrc: "http://img.b2bpic.net/free-photo/manager-working-graphs-with-feet-table-two-screens_482257-32835.jpg", imageAlt: "Trading UI 2" },
        { imageSrc: "http://img.b2bpic.net/free-photo/isolated-copy-space-screen-running-laptop-fintech-annual-reports_482257-126520.jpg", imageAlt: "Trading UI 3" },
      ]}
      rightCarouselItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/stock-exchange-trading-forex-finance-graphic-concept_53876-120906.jpg", imageAlt: "Trading UI 1" },
        { imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57448.jpg", imageAlt: "Trading UI 2" },
        { imageSrc: "http://img.b2bpic.net/free-photo/african-american-accountant-video-call-with-representatives-sharing-insight_482257-124376.jpg", imageAlt: "Trading UI 3" },
      ]}
      buttons={[
        { text: "Google Login", onClick: () => console.log("Auth initiated") },
        { text: "Learn More", href: "#about" },
      ]}
    />
  </div>

  <div id="trading" data-section="trading">
      <FeatureCardNineteen
      textboxLayout="split"
      useInvertedBackground={true}
      title="Réal Trading Environment"
      description="Access our professional-grade trading terminal, optimized for high-frequency scalping with real-time market data feed and lightning-fast order execution."
      features={[
        { tag: "Live", title: "Market Execution", subtitle: "Real Assets", description: "Execute your trades on live markets with institutional liquidity providers.", imageSrc: "http://img.b2bpic.net/free-photo/stock-market-data-screen_482257-126587.jpg" },
        { tag: "Fast", title: "Ultra-Low Latency", subtitle: "Direct Routing", description: "Experience sub-millisecond roundtrip times for every order placed.", imageSrc: "http://img.b2bpic.net/free-photo/abstract-binary-code-background_482257-126587.jpg" }
      ]}
      />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Simplified Account Creation"
      description="We have removed complex ID card requirements. Use your Google account to authenticate and gain immediate access to our secure, high-frequency trading platform."
      imageSrc="http://img.b2bpic.net/free-photo/broker-office-assisting-family-with-ipo-forex-portfolio-management_482257-100060.jpg?_wi=1"
      imageAlt="Trading terminal analysis"
    />
  </div>

  <div id="wallet" data-section="wallet">
      <FeatureCardNineteen
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { tag: "Banking", title: "Deposits & Withdrawals", subtitle: "Instant Processing", description: "Seamlessly fund your account or withdraw profits via our integrated payment gateway.", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-smartphone-with-digital-wallet-app_482257-126520.jpg" },
        { tag: "History", title: "Transaction Ledger", subtitle: "Complete Transparency", description: "Track every trade, deposit, and withdrawal in real-time with our detailed audit history.", imageSrc: "http://img.b2bpic.net/free-photo/man-analyzing-financial-charts-tablet_482257-126587.jpg" },
        { tag: "Balance", title: "Real-time Balances", subtitle: "Instant Updates", description: "Keep an eye on your available margin and equity with instantaneous balance synchronization.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-mobile-banking-app_482257-121457.jpg" },
      ]}
      title="Integrated Wallet Management"
      description="Secure and efficient control over your trading funds directly from your dashboard."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "rotated-rays-static" }}
      tag="Ready to scale?"
      title="Get Started with Pro Scalper"
      description="Request a consultation with our integration team."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-modern-technology-background-with-flowing-connecting-lines_1048-11701.jpg"
      logoText="ProScalper"
      columns={[
        { title: "Platform", items: [{ label: "Execution", href: "#" }, { label: "Metrics", href: "#" }] },
        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
