"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, BarChart2, Cog, Crown, DollarSign, Lightbulb, ShieldCheck, Sparkles, Wallet } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSizeMediumTitles"
        background="blurBottom"
        cardStyle="gradient-mesh"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "About",          id: "#about"},
        {
          name: "Features",          id: "#features"},
        {
          name: "Metrics",          id: "#metrics"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "FAQ",          id: "#faq"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      button={{
        text: "Start Predicting Free",        href: "#contact"}}
      brandName="TradeForm"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "sparkles-gradient"}}
      imagePosition="right"
      title="Trade football predictions. No money. No losses."
      description="Learn to analyze like a pro using AI-powered insights and real match data. Build your verified analyst reputation, compete on global leaderboards, and earn from your knowledge—not from gambling."
      kpis={[
        {
          value: "100%",          label: "Ethical Platform"},
        {
          value: "500K+",          label: "Analysts Engaged"},
        {
          value: "90%",          label: "Prediction Accuracy"},
      ]}
      enableKpiAnimation={true}
      buttons={[
        {
          text: "Start Predicting Free",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/side-view-man-running-with-stats_23-2150040512.jpg"
      imageAlt="Sports prediction dashboard interface"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-handsome-hipster-man-with-beard-smiling-laughing_176420-12167.jpg",          alt: "Happy analyst"},
        {
          src: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-standing-park_839833-33955.jpg",          alt: "Confident predictor"},
        {
          src: "http://img.b2bpic.net/free-photo/lifestyle-summer-people-emotions-concept-enthusiastic-handsome-male-model-with-happy-smile-white-teeth-standing-casual-t-shirt-yellow-background-satisfied_1258-60040.jpg",          alt: "Enthusiastic community member"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-casual-guy-posing-studio_176420-28909.jpg",          alt: "Focused trader"},
        {
          src: "http://img.b2bpic.net/free-photo/handsome-man-outdoors-portrait_158595-3551.jpg",          alt: "Experienced strategist"},
      ]}
      avatarText="Join 500k+ skilled analysts"
      marqueeItems={[
        {
          type: "text-icon",          text: "AI-Powered Analysis",          icon: Lightbulb
        },
        {
          type: "text-icon",          text: "Ethical Skill-Based",          icon: ShieldCheck
        },
        {
          type: "text",          text: "Global Leaderboards"},
        {
          type: "text-icon",          text: "Real-Time Data",          icon: BarChart2
        },
        {
          type: "text",          text: "Community & Support"}
      ]}
      marqueeSpeed={40}
      showMarqueeCard={true}
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={false}
      title="Your Ethical Edge in Sports Analysis"
      description="TradeForm offers a safe, skill-focused environment to master football prediction. Move beyond the risks of traditional betting and build a reputation for genuine analytical prowess."
      bulletPoints={[
        {
          title: "Risk-Free Learning",          description: "Practice and refine your prediction strategies without real money at stake, using our fake-credit trading system.",          icon: Wallet
        },
        {
          title: "AI-Powered Insights",          description: "Leverage advanced AI guidance and real match data to sharpen your analytical skills and make smarter predictions.",          icon: Cog
        },
        {
          title: "Build Real Reputation",          description: "Establish a verified analyst profile, track your performance, and gain recognition on global leaderboards.",          icon: Award
        },
        {
          title: "Monetize Your Knowledge",          description: "Earn ethically through verified analyst profiles, premium tools, and exclusive content—not through gambling.",          icon: DollarSign
        }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/close-up-people-having-fun-while-playing-table-soccer_23-2149060296.jpg"
      imageAlt="People collaborating on sports analysis"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      features={[
        {
          title: "AI-Powered Insights",          description: "Get an edge with intelligent algorithms that analyze vast amounts of data to provide actionable prediction guidance.",          imageSrc: "http://img.b2bpic.net/free-vector/artificial-intelligence-elements-collection-flat-style_23-2147880704.jpg",          imageAlt: "AI brain icon"},
        {
          title: "Global Leaderboards",          description: "Compete against the best analysts worldwide and showcase your skills on our transparent, real-time leaderboards.",          imageSrc: "http://img.b2bpic.net/free-vector/tips-playing-online-games-with-moderation_23-2148527134.jpg",          imageAlt: "Trophy icon"},
        {
          title: "Verified Analyst Profiles",          description: "Build credibility with a verified track record of accurate predictions, attracting followers and earning potential.",          imageSrc: "http://img.b2bpic.net/free-vector/shield-with-star_78370-6551.jpg",          imageAlt: "Verified badge icon"},
        {
          title: "Real Match Data",          description: "Access comprehensive, real-time football match data to inform your analysis and refine your predictive models.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-american-footballs_23-2148878374.jpg",          imageAlt: "Real-time data chart icon"}
      ]}
      title="Unlock Your Analyst Potential"
      description="Our platform provides cutting-edge tools and a supportive community to transform your prediction hobby into a recognized skill."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      animationType="slide-up"
      metrics={[
        {
          id: "m1",          value: "200M+",          description: "Predictions Made Ethically"},
        {
          id: "m2",          value: "75%",          description: "Average Community Accuracy"},
        {
          id: "m3",          value: "$5M+",          description: "Earned by Top Analysts"}
      ]}
      title="Proof of Skill, Not Luck"
      description="Track your progress and climb the ranks with transparent metrics. See how real data empowers accurate predictions and ethical earnings."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Analytica Pro",        "Ethical Gaming Alliance",        "Football Insights Network",        "Sports Data Hub",        "Prediction Pros",        "Skill League",        "FairPlay Foundation"
      ]}
      title="Trusted by a Growing Community"
      description="Join thousands of users who are redefining sports analysis. Our platform is endorsed by leading ethical gaming advocates."
      speed={40}
      showCard={true}
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "free",          badge: "Starter",          price: "Free",          subtitle: "Basic features for new analysts",          buttons: [
            {
              text: "Start Free",              href: "#contact"}
          ],
          features: [
            "Fake-credit trading",            "Basic AI insights",            "Public leaderboards",            "Community forums"]
        },
        {
          id: "pro",          badge: "Pro Analyst",          badgeIcon: Sparkles,
          price: "$19/month",          subtitle: "Advanced tools for serious players",          buttons: [
            {
              text: "Go Pro",              href: "#contact"}
          ],
          features: [
            "All Starter features",            "Advanced AI models",            "Deeper match statistics",            "Private league creation",            "Priority support"]
        },
        {
          id: "elite",          badge: "Elite Tier",          badgeIcon: Crown,
          price: "$49/month",          subtitle: "Unlock full platform potential",          buttons: [
            {
              text: "Become Elite",              href: "#contact"}
          ],
          features: [
            "All Pro features",            "Exclusive premium tools",            "Personalized analyst coaching",            "Early access to new features",            "Direct monetization channels"]
        }
      ]}
      title="Elevate Your Game"
      description="Access advanced tools and exclusive insights to become a top-tier analyst. Our premium plans are designed for serious learners."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={true}
      testimonial="This platform changed my relationship with sports. I'm learning, earning, and loving football again without the pressure of gambling. It's truly a game-changer for ethical sports enthusiasts."
      rating={5}
      author="Sarah M., Recovering Bettor"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man_158595-284.jpg",          alt: "Sarah M. avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",          alt: "Michael T. avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/bearded-man-posing-with-striped-shirt_343059-1138.jpg",          alt: "Emily R. avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-having-fun_23-2147812523.jpg",          alt: "David L. avatar"},
        {
          src: "http://img.b2bpic.net/free-photo/serious-male-enterpreneur-with-oval-face-has-mustache-small-beard_273609-8636.jpg",          alt: "Jessica P. avatar"}
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "faq1",          title: "How does fake-credit trading work?",          content: "Our platform uses virtual credits to simulate real-money betting. You make predictions, and your virtual balance fluctuates, allowing you to experience the thrill without any financial risk."},
        {
          id: "faq2",          title: "Can I really earn money on TradeForm?",          content: "Yes! Top analysts can monetize their verified profiles through premium content, exclusive access to advanced tools, or by hosting sponsored private leagues. This is skill-based earning, not gambling."},
        {
          id: "faq3",          title: "Is TradeForm suitable for recovering bettors?",          content: "Absolutely. Our core mission is to provide an engaging, risk-free alternative to traditional gambling, focusing on skill development and ethical competition. We provide resources to support responsible engagement."},
        {
          id: "faq4",          title: "What sports are covered?",          content: "Currently, we focus primarily on football (soccer), with plans for multi-sport expansion in the near future. Stay tuned for updates on new sports!"}
      ]}
      title="Common Questions"
      description="Find answers to frequently asked questions about TradeForm, our ethical approach, and how you can get started."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={true}
      background={{
        variant: "plain"}}
      tag="Get in Touch"
      title="Start Your Ethical Prediction Journey"
      description="Have questions, suggestions, or want to partner with us? Reach out and our team will be happy to assist you."
      imageSrc="http://img.b2bpic.net/free-photo/network-concept-with-yellow-squares_23-2148999199.jpg"
      imageAlt="Person interacting with contact form"
      mediaAnimation="slide-up"
      mediaPosition="left"
      inputPlaceholder="Enter your email"
      buttonText="Join Now"
      termsText="By joining, you agree to our Terms and Conditions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Platform",          items: [
            {
              label: "Fake-Credit Trading",              href: "#features"},
            {
              label: "AI Analytics",              href: "#features"},
            {
              label: "Leaderboards",              href: "#features"},
            {
              label: "Pricing",              href: "#pricing"}
          ]
        },
        {
          title: "Resources",          items: [
            {
              label: "Blog",              href: "#"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Support",              href: "#contact"}
          ]
        },
        {
          title: "Company",          items: [
            {
              label: "About Us",              href: "#about"},
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Careers",              href: "#"},
            {
              label: "Privacy Policy",              href: "#"}
          ]
        }
      ]}
      logoText="TradeForm"
      copyrightText="© 2024 TradeForm. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}