"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="medium"
        background="noise"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Overview", id: "hero" },
        { name: "Features", id: "features" },
        { name: "Market", id: "metrics" },
        { name: "Plans", id: "pricing" },
      ]}
      brandName="TradeSim"
      button={{
        text: "Start Simulation",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{ variant: "sparkles-gradient" }}
      title="Simulate Real Market Gains"
      description="Master the art of trading with our advanced real-time market simulator. Built for learners and pros alike."
      buttons={[{ text: "Get Started", href: "#contact" }]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 1" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 2" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 3" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 4" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 5" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg", imageAlt: "Trading UI 6" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={true}
      heading={[
        { type: "text", content: "The Future of" },
        { type: "image", src: "http://img.b2bpic.net/free-photo/live-index-indices-pc-screen-showing-stock-demand-surge-close-up_482257-84808.jpg", alt: "Market Chart" },
        { type: "text", content: "Trading Simulations" },
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "15M+", description: "Simulated Trades Executed" },
        { id: "m2", value: "99.9%", description: "Data Accuracy Rating" },
        { id: "m3", value: "500+", description: "Global Market Pairs" },
      ]}
      title="Real-Time Market Data"
      description="See why thousands of traders use our data to simulate successful strategies."
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        { title: "Real-time Signals", description: "Get instant notifications on market volatility.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480185.jpg", imageAlt: "Signals" },
        { title: "Portfolio Modeling", description: "Create and test diverse strategy baskets.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480185.jpg", imageAlt: "Modeling" },
        { title: "Strategy Backtesting", description: "Test your hypotheses against historical data.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-blockchain-technology_23-2151480185.jpg", imageAlt: "Backtesting" },
      ]}
      title="Advanced Trading Tools"
      description="Equip yourself with professional grade analytics."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        { id: "basic", badge: "Entry", price: "$0", subtitle: "Perfect for learning", features: ["Basic Assets", "Delayed Quotes", "1 Dashboard"] },
        { id: "pro", badge: "Pro", price: "$49", subtitle: "For active traders", features: ["Real-time Data", "Advanced Backtesting", "5 Dashboards"] },
        { id: "enterprise", badge: "Elite", price: "$199", subtitle: "Institutional grade", features: ["Full API Access", "Custom Algorithms", "Unlimited Data"] },
      ]}
      title="Flexible Trading Plans"
      description="Find the strategy level that works for you."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "q1", title: "Is this real money?", content: "No, this is a 100% risk-free simulator." },
        { id: "q2", title: "Can I backtest strategies?", content: "Yes, our platform includes deep backtesting tools." },
        { id: "q3", title: "How is data sourced?", content: "We utilize global exchange data feeds." },
      ]}
      title="Trading Questions"
      description="Get clear answers about our simulation platform."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Get Started Today"
      description="Join thousands of traders improving their skills."
      inputs={[
        { name: "email", type: "email", placeholder: "Work Email", required: true },
        { name: "name", type: "text", placeholder: "Full Name", required: true },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/data-center-computer-scientist-uses-pc-update-servers-tech_482257-126364.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Platform",          items: [{ label: "About Us", href: "#" }, { label: "Careers", href: "#" }],
        },
        {
          title: "Support",          items: [{ label: "Help Center", href: "#" }, { label: "Contact", href: "#contact" }],
        },
      ]}
      bottomLeftText="© 2024 TradeSim. All rights reserved."
      bottomRightText="Market simulation data provided by partners."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}