"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Clock, DollarSign, Shield, Target, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSmallSizeMediumTitles"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "AI Analyst", id: "hero" },
        { name: "Risk Calc", id: "calculator" },
        { name: "Checklist", id: "checklist" },
        { name: "Journal", id: "journal" },
      ]}
      brandName="GV Forex AI"
      button={{ text: "Get Started", href: "#contact" }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{ variant: "plain" }}
      title="Institutional Forex Command Centre"
      description="Your professional day trading companion. Powered by real-time AI market analysis, precise risk management, and rigorous trade journaling."
      buttons={[{ text: "Launch Analyst", href: "#analyst" }]}
      imageSrc="http://img.b2bpic.net/free-photo/hand-holding-phone-with-blank-screen_482257-76252.jpg"
      mediaAnimation="blur-reveal"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/tablet-showing-financial-data-with-coffee_23-2152020633.jpg", alt: "Tablet showing financial data with coffee" },
        { src: "http://img.b2bpic.net/free-photo/businessman-checking-stock-market-online_53876-14787.jpg", alt: "Businessman checking stock market online" },
        { src: "http://img.b2bpic.net/free-photo/selective-focus-shot-male-hand-holding-smartphone-with-cryptocurrencies-statistics-screen_181624-59051.jpg", alt: "Selective focus shot of male hand holding a smartphone with cryptocurrencies statistics on screen" },
        { src: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116602.jpg", alt: "Person looking over finance graphs" },
        { src: "http://img.b2bpic.net/free-photo/young-man-looking-into-crypto-currency-stock-market_482257-2365.jpg", alt: "Young man looking into crypto currency stock market" },
      ]}
      marqueeItems={[
        { type: "text", text: "AI Predictive Modeling" },
        { type: "text", text: "Real-time Risk Metrics" },
        { type: "text", text: "Institutional Journaling" },
        { type: "text", text: "Market Structure Analysis" },
        { type: "text", text: "Fibonacci Precision" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="AI Analyst"
      title="Precision AI Chart Analysis"
      description="Upload your chart, select pair and timeframe. Our AI provides institutional-grade market structure, Fibonacci levels, and actionable trade scenarios."
      subdescription="Built for professional intraday traders who value accuracy, bias validation, and risk-calibrated opportunities."
      icon={Zap}
      imageSrc="http://img.b2bpic.net/free-photo/pc-monitor-displaying-financial-reports_482257-76219.jpg"
      mediaAnimation="blur-reveal"
    />
  </div>

  <div id="metric" data-section="metric">
      <MetricCardThree
      textboxLayout="default"
      useInvertedBackground={true}
      animationType="blur-reveal"
      metrics={[
        { id: "1", icon: Clock, title: "UTC Time", value: "14:22" },
        { id: "2", icon: TrendingUp, title: "Active Session", value: "London" },
        { id: "3", icon: Shield, title: "Trade Score", value: "98%" },
      ]}
      title="Command Centre Metrics"
      description="Live status of your trading environment."
    />
  </div>

  <div id="calculator" data-section="calculator">
      <FeatureCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      animationType="blur-reveal"
      features={[
        {
          title: "Instant Calculation",          description: "Enter balance, risk %, and stop loss to instantly calculate your lot size.",          media: {
            imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-template_23-2148592987.jpg"
          },
          items: [
            { icon: DollarSign, text: "Risk to $" },
            { icon: Target, text: "Lot Size Calc" },
            { icon: Target, text: "R:R Projections" },
          ],
          reverse: false,
        },
      ]}
      title="Risk Management Suite"
      description="Instantly calculate lot sizes and potential R:R outcomes."
    />
  </div>

  <div id="checklist" data-section="checklist">
      <ProductCardFour
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      animationType="blur-reveal"
      title="Pre-Trade Discipline Checklist"
      description="Ensure every entry meets your institutional criteria."
      products={[
        { id: "1", name: "Verify Macro Trend", price: "Check", variant: "Daily", imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-concept_23-2148584491.jpg" },
        { id: "2", name: "Validate Liquidity Zones", price: "Check", variant: "Setup", imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-concept_23-2148606529.jpg" },
        { id: "3", name: "Screen News Calendar", price: "Check", variant: "Risk", imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-set_23-2148591122.jpg" },
      ]}
    />
  </div>

  <div id="journal" data-section="journal">
      <TestimonialCardTwo
      textboxLayout="default"
      useInvertedBackground={false}
      animationType="blur-reveal"
      testimonials={[
        { id: "1", name: "System", role: "Journal", testimonial: "Logged: EURUSD BUY at 1.0850", imageSrc: "http://img.b2bpic.net/free-photo/empty-workspace-desktop-running-day-trading-stock-market-trends_482257-126997.jpg" },
        { id: "2", name: "System", role: "Journal", testimonial: "Logged: GBPUSD SELL at 1.2720", imageSrc: "http://img.b2bpic.net/free-photo/business-investor-analyzing-stock-market-trend-monitor-trading-capital-profit-exchange-investment-young-broker-investing-funds-using-financial-forex-market-sales-close-up-handheld-shot_482257-40948.jpg" },
        { id: "3", name: "System", role: "Journal", testimonial: "Logged: XAUUSD BUY at 2030.0", imageSrc: "http://img.b2bpic.net/free-photo/back-view-young-business-man-talking-phone-sitting-his-office-diagrams-monitor_482257-34736.jpg" },
        { id: "4", name: "System", role: "Journal", testimonial: "Logged: USDJPY SELL at 150.50", imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-office-workspace-with-advanced-technology-enhance-efficiency_482257-119617.jpg" },
        { id: "5", name: "System", role: "Journal", testimonial: "Logged: EURJPY BUY at 160.10", imageSrc: "http://img.b2bpic.net/free-photo/young-investor-working-computer-with-real-time-stock-charts-following-trade-market-sales-trend-financial-analyst-using-forex-exchange-statistics-plan-data-analysis-index-profit-close-up_482257-42062.jpg" },
      ]}
      title="Trade Journal & Analytics"
      description="Log every position and track your growth."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      title="Request Access to the Command Centre"
      description="Get in touch for institutional support or platform training."
      inputs={[
        { name: "name", type: "text", placeholder: "Full Name" },
        { name: "email", type: "email", placeholder: "Email Address" }
      ]}
      multiSelect={{ name: "inquiry", label: "Inquiry Type", options: ["General Support", "Account Setup", "Platform Training", "Institutional Access"] }}
      textarea={{ name: "message", placeholder: "How can we help your trading?", rows: 4 }}
      useInvertedBackground={true}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="GV Forex AI"
      columns={[
        { title: "Platform", items: [{ label: "AI Analyst", href: "#hero" }, { label: "Calculator", href: "#calculator" }, { label: "Journal", href: "#journal" }] },
        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
      ]}
      copyrightText="© 2025 | GV Forex AI Institutional"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}