"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { BarChart2, ShieldCheck, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="small"
        sizing="medium"
        background="floatingGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Features",          id: "features"},
        {
          name: "Metrics",          id: "metrics"},
        {
          name: "Pricing",          id: "pricing"},
      ]}
      brandName="TradePulse"
      button={{
        text: "Get Started",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated"}}
      title="Master Your Trading Performance"
      description="Log, analyze, and optimize every trade with automated logging—the ultimate platform built for serious traders who value precision, data, and edge."
      buttons={[
        {
          text: "Start Journaling",          href: "#contact"},
      ]}
      carouselItems={[
        {
          id: "c1",          imageSrc: "http://img.b2bpic.net/free-photo/desktop-pc-wooden-desk-showcases-infographics-client-reach-data_482257-126353.jpg",          imageAlt: "Dashboard overview"},
        {
          id: "c2",          imageSrc: "http://img.b2bpic.net/free-photo/person-looking-finance-graphs_52683-116600.jpg",          imageAlt: "Chart analysis"},
        {
          id: "c3",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg",          imageAlt: "Risk monitoring"},
        {
          id: "c4",          imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg",          imageAlt: "Performance tracking"},
        {
          id: "c5",          imageSrc: "http://img.b2bpic.net/free-photo/computer-dark-room-with-graphs-screen_169016-54998.jpg",          imageAlt: "Trade log"},
        {
          id: "c6",          imageSrc: "http://img.b2bpic.net/free-photo/tablet-showing-financial-data-with-coffee_23-2152020633.jpg",          imageAlt: "Strategy report"},
      ]}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Data That Moves Markets"
      tag="Performance Stats"
      metrics={[
        {
          id: "m1",          value: "12,000+",          description: "Trades Logged Daily"},
        {
          id: "m2",          value: "45%",          description: "Avg. Growth Rate"},
        {
          id: "m3",          value: "99.9%",          description: "Data Reliability"},
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureBorderGlow
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: BarChart2,
          title: "Advanced Analytics",          description: "Break down your performance with custom charts, P&L reporting, and asset allocation insights."},
        {
          icon: ShieldCheck,
          title: "Risk Management",          description: "Set dynamic position sizing rules and track your risk-to-reward ratios seamlessly."},
        {
          icon: Zap,
          title: "Real-time Sync",          description: "Connect your broker accounts for instant trade logging and automated journal updates."},
      ]}
      title="Engineered for Growth"
      description="Sophisticated tools designed to turn every trade into a learning opportunity and build your long-term success."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",          name: "Alex Rivet",          handle: "@alexr",          testimonial: "The best trading journal I've used. My win rate improved significantly after just three months.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-cartoon-style_23-2151134089.jpg"},
        {
          id: "2",          name: "Jordan Lee",          handle: "@jlee",          testimonial: "Game changer. The analytics engine is precise and actually helps me identify my emotional trading mistakes.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-girl-with-coffee-hands-emotion-concept-emotion-happiness_169016-66303.jpg"},
        {
          id: "3",          name: "Morgan F.",          handle: "@mf_trade",          testimonial: "Solid platform. Clean UI and extremely fast synchronization with my broker.",          imageSrc: "http://img.b2bpic.net/free-photo/bearded-stock-market-trader-looking-camera-with-hands-crossed_482257-30734.jpg"},
        {
          id: "4",          name: "Casey Day",          handle: "@casey",          testimonial: "Data-driven trading is now possible for me. Highly recommended for full-time traders.",          imageSrc: "http://img.b2bpic.net/free-photo/joyous-photographer-creative-agency-studio-adjusting-images_482257-121827.jpg"},
        {
          id: "5",          name: "Sam Taylor",          handle: "@st_invest",          testimonial: "The risk management features have kept me profitable during volatile market swings.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-entrepreneur-showing-bitcoin-while-sitting-desk-with-laptop-computer-isolated-black_231208-11151.jpg"},
      ]}
      title="Voices of the Market"
      description="Join thousands of traders who are leveling up their strategy with TradePulse."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",          title: "Does this work with my broker?",          content: "We support over 50 major brokerage platforms. Check our list to see if your account is compatible."},
        {
          id: "f2",          title: "Is my data secure?",          content: "Absolutely. We use enterprise-grade encryption to ensure your financial and trade data is private and secure."},
        {
          id: "f3",          title: "Can I export my data?",          content: "Yes, you can export your entire trading history to CSV or Excel at any time."},
      ]}
      title="Frequently Asked Questions"
      description="Everything you need to know about getting started with TradePulse."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="scale-rotate"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          badge: "Entry",          price: "$19/mo",          subtitle: "Essential Tools for Growth",          buttons: [
            {
              text: "Get Started",              href: "#"},
          ],
          features: [
            "Basic journal",            "Daily analytics",            "Community access"],
        },
        {
          id: "pro",          badge: "Elite",          price: "$49/mo",          subtitle: "Advanced Insights for Pro Traders",          buttons: [
            {
              text: "Go Pro",              href: "#"},
          ],
          features: [
            "Advanced reports",            "Automated broker sync",            "Priority support"],
        },
      ]}
      title="Flexible Pricing Plans"
      description="Choose the right plan to fuel your trading journey."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Ready to get ahead?"
      description="Join the waitlist or send us a request for a custom demo."
      inputs={[
        {
          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
        },
        {
          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/empty-business-office-with-cubicles-used-organizational-activity-efficiency_482257-125625.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="TradePulse"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}