"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { BarChart2, CalendarDays, Gauge, MessageSquare, ShieldCheck, Star, BrainCircuit } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="floatingGradient"
        cardStyle="outline"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "Dashboard",          id: "hero"},
        {
          name: "Features",          id: "features"},
        {
          name: "Analytics",          id: "analytics"},
        {
          name: "Pricing",          id: "pricing"},
      ]}
      brandName="ForexFlow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "plain"}}
      title="Master the Markets with Professional Forex Analytics"
      description="Gain a competitive edge with real-time charting, AI-driven pattern recognition, and comprehensive risk management tools designed for modern traders."
      buttons={[
        {
          text: "Get Started",          href: "#features"},
        {
          text: "View Demo",          href: "#"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=1"
      imageAlt="Forex trading platform dashboard"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg",          alt: "Trader avatar 1"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",          alt: "Trader avatar 2"},
        {
          src: "http://img.b2bpic.net/free-photo/young-businessman-working-from-his-office-concept-hard-work_181624-33428.jpg",          alt: "Trader avatar 3"},
        {
          src: "http://img.b2bpic.net/free-photo/experienced-senior-female-executive-eyeglasses_1262-5027.jpg",          alt: "Trader avatar 4"},
        {
          src: "http://img.b2bpic.net/free-photo/happy-executive-analyzing-document_1098-3324.jpg",          alt: "Trader avatar 5"},
      ]}
      avatarText="Join 10,000+ traders"
      marqueeItems={[
        {
          type: "text",          text: "EUR/USD Spread 0.2 Pips"},
        {
          type: "text",          text: "Real-time Data Feed Active"},
        {
          type: "text",          text: "AI Pattern Engine Online"},
        {
          type: "text",          text: "Global Liquidity Access"},
        {
          type: "text",          text: "24/7 Market Monitoring"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          icon: BarChart2,
          title: "Interactive Charting",          description: "100+ indicators and real-time data integration with multi-frame analysis."},
        {
          icon: Star,
          title: "AI Pattern Recognition",          description: "Auto-detect complex chart patterns like wedges, flags, and double bottoms."},
        {
          icon: CalendarDays,
          title: "Economic Data Feed",          description: "Real-time calendar tracking with impact analysis and historical performance data."},
        {
          icon: Gauge,
          title: "Risk Management",          description: "Integrated calculators for position sizing, margin, and pip value assessment."},
        {
          icon: MessageSquare,
          title: "Social Community",          description: "Share trade ideas and collaborate with top traders in your currency pairs."},
        {
          icon: ShieldCheck,
          title: "Strategy Backtesting",          description: "Define and test strategies against deep historical data for ultimate confidence."},
      ]}
      title="Built for Precision Trading"
      description="Advanced tools for technical, fundamental, and risk-focused analysis in one seamless environment."
    />
  </div>

  <div id="analytics" data-section="analytics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "pred-1",          value: "94%",          title: "Prediction Accuracy",          description: "AI-powered forecast reliability for major currency pairs.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-data-visualization-concept_1048-12001.jpg",          imageAlt: "Prediction accuracy metric"},
        {
          id: "journal-1",          value: "2.4x",          title: "Win/Loss Ratio",          description: "Tracked journal insights improving average trade outcomes.",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-tablet-analyzing-financial-data_482257-29623.jpg",          imageAlt: "Trade journal performance"},
      ]}
      title="AI-Powered Predictive Analytics"
      description="Maximize your trading potential with a comprehensive trade journal and an intelligent performance dashboard that learns from your history."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "100+",          title: "Indicators",          description: "Customizable technical tools",          imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg",          imageAlt: "Indicators icon"},
        {
          id: "m2",          value: "24/7",          title: "Support",          description: "Real-time economic data",          imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg",          imageAlt: "Calendar icon"},
        {
          id: "m3",          value: "99.9%",          title: "Accuracy",          description: "Data processing power",          imageSrc: "http://img.b2bpic.net/free-photo/stock-market-graph-business-analysis-investment-monitors_482257-29619.jpg",          imageAlt: "Calc icon"},
      ]}
      title="Empowering Global Traders"
      description="Performance metrics driven by data for every market condition."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Johnson",          role: "Full-time Trader",          testimonial: "The AI pattern recognition saved me so much time. This is my go-to terminal now.",          imageSrc: "http://img.b2bpic.net/free-photo/successful-expert_1098-14503.jpg"},
        {
          id: "2",          name: "Michael Chen",          role: "Swing Trader",          testimonial: "The integration between news feed and charts is industry-leading. Excellent UI.",          imageSrc: "http://img.b2bpic.net/free-photo/agent-work_1098-12714.jpg"},
        {
          id: "3",          name: "Emily Rodriguez",          role: "Quantitative Analyst",          testimonial: "Backtesting capabilities are top-notch. It allows me to test my strategies instantly.",          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-person_23-2151098592.jpg"},
        {
          id: "4",          name: "David Kim",          role: "Prop Trader",          testimonial: "Finally a platform that feels as fast as a Bloomberg terminal but is much cheaper.",          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-office-engages-communication-virtual-presentation-talking_482257-133582.jpg"},
        {
          id: "5",          name: "Anna Petrova",          role: "Currency Expert",          testimonial: "The sentiment gauge is remarkably accurate for my daily bias, highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/factory-inspector-suit-monitoring-solar-panel-production-output_482257-125982.jpg"},
      ]}
      title="Trusted by Professional Traders"
      description="Join our community and see why traders globally rely on our advanced analytical suite."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardNine
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[
        {
          id: "free",          title: "Free Tier",          price: "$0",          period: "/mo",          features: [
            "Advanced Charting",            "Basic Indicators",            "Economic Calendar",            "Live News Feed"],
          button: {
            text: "Get Started",            href: "#"},
          imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-home-office-with-monitors-stock-market_482257-29630.jpg",          imageAlt: "Zoom out of home office with monitors for stock market."},
        {
          id: "pro",          title: "Pro Plan",          price: "$19",          period: "/mo",          features: [
            "AI Pattern Recognition",            "Backtesting Module",            "API Integrations",            "Advanced Sentiment",            "Cloud Alerts"],
          button: {
            text: "Upgrade to Pro",            href: "#"},
          imageSrc: "http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=2",          imageAlt: "Zoom out of home office with monitors for stock market."},
      ]}
      title="Straightforward Pricing"
      description="Access all core tools for free, upgrade for advanced AI and automation features."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Is the charting engine really free?",          content: "Yes, our core charting engine with 100+ indicators is free for all users."},
        {
          id: "2",          title: "Can I integrate my MT4/MT5 account?",          content: "Pro users can bridge their accounts via API for seamless trade journal sync."},
        {
          id: "3",          title: "Is the data real-time?",          content: "We offer real-time data for major pairs with high-speed delivery for our pro tier."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/futuristic-data-interface_23-2152011741.jpg"
      title="Frequently Asked Questions"
      description="Everything you need to know about getting started with ForexFlow."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      text="Ready to elevate your trading journey? Join thousands of professional traders today."
      buttons={[
        {
          text: "Create Account",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Charting Engine",              href: "#features"},
            {
              label: "Economic Calendar",              href: "#"},
            {
              label: "Backtesting",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Documentation",              href: "#"},
            {
              label: "Community",              href: "#"},
            {
              label: "API Reference",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"},
            {
              label: "Terms of Service",              href: "#"},
          ],
        },
      ]}
      logoText="ForexFlow"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}