"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Award, Crown, DollarSign, HelpCircle, Mail, MessageSquare, Sparkles, Target, TrendingUp, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="medium"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Follow Trade"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{
            text: "Get Started",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="The Future of Supply Chain"
          description="Ship globally within 3 days post-production with smart fulfillment"
          background={{ variant: "animated-grid" }}
          kpis={[
            { value: "4-10 Days", label: "Worldwide Delivery" },
            { value: "99.8%", label: "Order Accuracy" },
            { value: "10x", label: "Faster Lead Times" }
          ]}
          enableKpiAnimation={true}
          tag="Trusted by 150+ Brands"
          buttons={[
            { text: "Get Started", href: "#pricing" },
            { text: "Learn More", href: "#features" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/close-up-with-businessman-patching-something-keyboard-graphics-monitor_482257-32827.jpg"
          imageAlt="Supply chain and fulfillment"
          mediaAnimation="opacity"
          imagePosition="right"
          buttonAnimation="opacity"
        />
      </div>

      <div id="about" data-section="about">
        <TestimonialAboutCard
          tag="About Follow Trade"
          tagIcon={TrendingUp}
          title="Expert-Driven Trading Recommendations for Serious Investors"
          description="Founded by professional traders with 15+ years of market experience"
          subdescription="Trusted by 10,000+ active traders worldwide"
          icon={Target}
          imageSrc="https://img.b2bpic.net/free-photo/back-view-young-business-man-talking-phone-sitting-his-office-diagrams-monitor_482257-34736.jpg"
          imageAlt="Professional trading team analysis"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwelve
          title="Why Choose Follow Trade"
          description="Comprehensive trading tools and expert guidance to elevate your investment strategy"
          tag="Key Features"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              id: "realtime",              label: "Real-Time",              title: "Instant Market Signals and Analysis",              items: [
                "Live price alerts",                "Instant entry/exit recommendations",                "Market sentiment analysis",                "Breaking news impact assessments"
              ],
              buttons: [{ text: "View Details", href: "#" }]
            },
            {
              id: "expert",              label: "Expert",              title: "Professional Trading Guidance",              items: [
                "Veteran trader insights",                "Technical analysis charts",                "Risk management strategies",                "Portfolio optimization tips"
              ],
              buttons: [{ text: "Learn Strategy", href: "#" }]
            },
            {
              id: "proven",              label: "Proven",              title: "Verified Historical Performance",              items: [
                "76% win rate on recommendations",                "Consistent monthly returns",                "Transparent trade tracking",                "Third-party audited results"
              ],
              buttons: [{ text: "See Performance", href: "#" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Transparent Pricing Plans"
          description="Choose the subscription level that fits your trading style and investment goals"
          tag="Pricing"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          plans={[
            {
              id: "starter",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "$29/month",              subtitle: "Perfect for active day traders",              buttons: [
                { text: "Start Free Trial", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Unlimited daily signals",                "Real-time alerts",                "Basic technical analysis",                "Community forum access",                "Email support"
              ]
            },
            {
              id: "professional",              badge: "Best Value",              badgeIcon: Award,
              price: "$79/month",              subtitle: "For serious professional traders",              buttons: [
                { text: "Start Free Trial", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Everything in Starter",                "Advanced technical analysis",                "Personalized recommendations",                "1-on-1 trading consultation",                "Priority support",                "Risk management tools"
              ]
            },
            {
              id: "elite",              badge: "Premium",              badgeIcon: Crown,
              price: "$199/month",              subtitle: "For elite traders and institutions",              buttons: [
                { text: "Request Demo", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Everything in Professional",                "Dedicated account manager",                "Custom trading algorithms",                "Advanced portfolio analytics",                "API access",                "Unlimited consultations",                "White-label solutions"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Trusted by Thousands of Traders"
          description="Real results from traders who've transformed their investment strategy with Follow Trade"
          tag="Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          textboxLayout="default"
          testimonials={[
            {
              id: "1",              name: "Michael Johnson",              handle: "@mjtrader - Professional Day Trader",              testimonial: "Follow Trade's signals have increased my monthly returns by 45%. The real-time alerts are exactly what I needed to stay ahead of market movements.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",              imageAlt: "Michael Johnson"
            },
            {
              id: "2",              name: "Sarah Chen",              handle: "@sarahchenfinance - Portfolio Manager",              testimonial: "The technical analysis and expert guidance have revolutionized my trading approach. I've gone from uncertain decisions to confident, data-driven trades.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "3",              name: "David Rodriguez",              handle: "@drodriguez - Swing Trader",              testimonial: "Incredible accuracy on their recommendations. I've been using Follow Trade for 8 months and haven't looked back. Best investment I've made.",              imageSrc: "https://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg",              imageAlt: "David Rodriguez"
            },
            {
              id: "4",              name: "Emma Williams",              handle: "@emmaw_investments - Retail Investor",              testimonial: "As a beginner trader, Follow Trade made learning easy. Their expert insights combined with clear signals have built my confidence significantly.",              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-posing-near-office-building_1262-21023.jpg",              imageAlt: "Emma Williams"
            },
            {
              id: "5",              name: "James Park",              handle: "@jpark_trader - Options Specialist",              testimonial: "The risk management tools are outstanding. I've protected my capital while maintaining strong returns. Follow Trade is worth every penny.",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",              imageAlt: "James Park"
            },
            {
              id: "6",              name: "Lisa Murphy",              handle: "@lisamurphy_finance - Long-term Investor",              testimonial: "Follow Trade combines short-term signals with long-term strategy. Perfect for diversified portfolio management. Highly recommended.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg",              imageAlt: "Lisa Murphy"
            }
          ]}
          animationType="slide-up"
          speed={40}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Proven Track Record of Success in Every Market Condition"
          tag="Performance"
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "76%",              description: "Average win rate on trading signals across all market conditions and timeframes"
            },
            {
              id: "2",              value: "10,000+",              description: "Active traders currently using Follow Trade for daily market insights and recommendations"
            },
            {
              id: "3",              value: "$2.3B+",              description: "Total trading volume managed by Follow Trade community members annually"
            },
            {
              id: "4",              value: "15+",              description: "Years of combined professional trading experience from our expert team"
            }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Get answers to common questions about Follow Trade and how it can transform your trading"
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqs={[
            {
              id: "1",              title: "How accurate are Follow Trade's recommendations?",              content: "Follow Trade maintains a 76% average win rate on trading signals. Our recommendations are based on technical analysis, market sentiment, and expert trader insights. However, like all trading, past performance does not guarantee future results. We recommend proper risk management on all trades."
            },
            {
              id: "2",              title: "Can I use Follow Trade if I'm a beginner?",              content: "Absolutely! Follow Trade is designed for traders of all experience levels. Our platform provides detailed explanations for each signal, technical analysis education, and resources for beginners. We also offer one-on-one consultations on Professional and Elite plans to help you learn."
            },
            {
              id: "3",              title: "What markets does Follow Trade cover?",              content: "Follow Trade provides signals for stocks, forex, cryptocurrencies, and commodities. Our expert team monitors global markets 24/7 to deliver real-time recommendations across multiple asset classes. You can customize which markets you want to follow."
            },
            {
              id: "4",              title: "Is there a free trial available?",              content: "Yes! All subscription plans offer a 7-day free trial with full access to features. No credit card required to start. During your trial, you'll get unlimited signals, real-time alerts, and access to our community forum."
            },
            {
              id: "5",              title: "How do I receive trading signals?",              content: "Signals are delivered through multiple channels: push notifications, email alerts, SMS, and our mobile app. You can customize which signals you want to receive and set your preferred notification methods in your account settings."
            },
            {
              id: "6",              title: "Can I cancel my subscription anytime?",              content: "Yes, you can cancel anytime without penalties or hidden fees. We believe in transparency and want you to only pay for the value you're receiving. Your access continues through the end of your billing period."
            }
          ]}
          faqsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Newsletter"
          tagIcon={Mail}
          title="Stay Ahead of the Market"
          description="Subscribe to our weekly market insights and exclusive trading signals. Get expert analysis delivered directly to your inbox every Friday morning."
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          imageSrc="https://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"
          imageAlt="Newsletter subscription illustration"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe Now"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, only valuable trading insights."
          tagAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Follow Trade"
          columns={[
            {
              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Testimonials", href: "#testimonials" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#about" },
                { label: "Contact", href: "#contact" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Risk Disclosure", href: "#" }
              ]
            },
            {
              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Discord", href: "https://discord.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}