"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 } from "lucide-react";
import { useRouter } from "next/navigation";

export default function LandingPage() {
  const router = useRouter();
  const currencyPairs = [
    { name: "EUR/USD", pair: "EURUSD" },
    { name: "GBP/USD", pair: "GBPUSD" },
    { name: "USD/JPY", pair: "USDJPY" },
    { name: "AUD/USD", pair: "AUDUSD" }
  ];

  const handlePairClick = (pair: string) => router.push(`/chart?pair=${pair}`);

  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: "Pricing", id: "pricing" },
              { name: "Charts", id: "/chart" }
            ]}
            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 Charts", onClick: () => handlePairClick("EURUSD") },
            ]}
            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"
            marqueeItems={currencyPairs.map(p => ({
                type: "text", 
                text: p.name
            }))}
          />
        </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.", button: { text: "View EUR/USD", onClick: () => handlePairClick("EURUSD") } },
              { icon: Star, title: "AI Pattern Recognition", description: "Auto-detect complex chart patterns like wedges, flags, and double bottoms.", button: { text: "View GBP/USD", onClick: () => handlePairClick("GBPUSD") } },
              { 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="metrics" data-section="metrics">
            <MetricCardEleven
            animationType="slide-up"
            textboxLayout="split"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "EUR/USD", title: "Major Pair", description: "Check live charts for EUR/USD", imageSrc: "http://img.b2bpic.net/free-photo/connecting-lines-dots-with-floating-particles_1048-12013.jpg" },
              { id: "m2", value: "GBP/USD", title: "Major Pair", description: "Check live charts for GBP/USD", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-works-remotely-from-cozy-apartment-evening-reviewing-company-stock-market_482257-134074.jpg" },
              { id: "m3", value: "USD/JPY", title: "Major Pair", description: "Check live charts for USD/JPY", imageSrc: "http://img.b2bpic.net/free-photo/stock-market-graph-business-analysis-investment-monitors_482257-29619.jpg" },
            ]}
            buttons={[{ text: "Explore All Markets", onClick: () => handlePairClick("EURUSD") }]}
            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" },
            ]}
            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: ["EUR/USD access", "Basic Indicators", "Economic Calendar"], button: { text: "Start with EUR/USD", onClick: () => handlePairClick("EURUSD") }, imageSrc: "http://img.b2bpic.net/free-photo/zoom-out-home-office-with-monitors-stock-market_482257-29630.jpg" },
              { id: "pro", title: "Pro Plan", price: "$19", period: "/mo", features: ["Full Market Access", "Backtesting Module", "API Integrations"], button: { text: "Upgrade Now", onClick: () => handlePairClick("EURUSD") }, imageSrc: "http://img.b2bpic.net/free-photo/business-files-desk-notebook-showing-forex-trading-indexes-prices_482257-84924.jpg?_wi=2" },
            ]}
            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: "Can I view charts for specific pairs?", content: "Yes, use our dedicated chart portal to select any of your preferred currency pairs." },
              { id: "2", title: "Are custom parameters supported?", content: "Yes, every link to the chart page supports custom pair parameters in the URL." },
            ]}
            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: "View EUR/USD Chart", onClick: () => handlePairClick("EURUSD") }]}
          />
        </div>

        <div id="footer" data-section="footer">
            <FooterBase
            columns={[
              { title: "Product", items: currencyPairs.map(p => ({ label: p.name, href: `/chart?pair=${p.pair}` })) },
              { title: "Resources", items: [{ label: "Documentation", href: "#" }, { label: "Community", href: "#" }] },
              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy Policy", href: "#" }] },
            ]}
            logoText="ForexFlow"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}