"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "Home", id: "#hero" },
              { name: "Stats", id: "#metrics" },
              { name: "Features", id: "#features" },
              { name: "Programs", id: "#programs" },
              { name: "Pricing", id: "#pricing" },
              { name: "Success", id: "#testimonials" },
              { name: "FAQ", id: "#faq" }
            ]}
            brandName="Fitverse"
            button={{ text: "Get Started", href: "#footer" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroBillboardCarousel
            background={{ variant: "radial-gradient" }}
            title="Redefine Your Limits with Fitverse"
            description="Unlock a new version of yourself through data-driven training, personalized nutrition, and a community built to push you further."
            tag="Start your journey"
            mediaItems={[{ imageSrc: "http://img.b2bpic.net/free-photo/athlete-swings-triceps-with-dumbbells-gym-healthy-sports-lifestyle_169016-58843.jpg?_wi=1", imageAlt: "Professional fitness athlete" }]}
          />
        </div>

        <div id="metrics" data-section="metrics">
          <MetricCardSeven
            title="Achieve Real Progress"
            description="Numbers speak louder than motivation."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            metrics={[
              { id: "m1", value: "12k+", title: "Active Sessions", items: ["Daily Tracking", "Detailed Analytics"] },
              { id: "m2", value: "8k+", title: "Goals Reached", items: ["Milestone Alerts", "Progress Reports"] },
              { id: "m3", value: "5k+", title: "Community", items: ["Social Features", "Expert Support"] }
            ]}
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardThree
            title="Training Methodology"
            description="Three pillars of fitness that ensure results and longevity."
            animationType="slide-up"
            gridVariant="bento-grid"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              { title: "Biometric Tracking", description: "Monitor every movement with precision tech.", imageSrc: "http://img.b2bpic.net/free-photo/unknown-sporty-woman-checks-pulse-neck-focused-smartwatch-dressed-beige-sportsclothes-poses-outdoors_273609-55496.jpg?_wi=1" },
              { title: "Nutritional Guidance", description: "Fuel your workouts with perfect macro-balancing.", imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-meal-prep-containers-with-eggs-brussel-sprouts-green-beans-tomato-dinner-lunch-box-top-view-flat-lay_2829-17469.jpg" },
              { title: "Holistic Wellness", description: "Balance intensity with restorative yoga sessions.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-yoga-equipment_23-2151725239.jpg" }
            ]}
          />
        </div>

        <div id="programs" data-section="programs">
          <ProductCardThree
            title="Core Training Programs"
            description="Choose a path that aligns with your specific goals."
            animationType="slide-up"
            gridVariant="uniform-all-items-equal"
            textboxLayout="default"
            useInvertedBackground={false}
            products={[
              { id: "p1", name: "Powerlifting Pro", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/towel-shorts-near-fruits_23-2147750738.jpg" },
              { id: "p2", name: "Marathon Master", price: "$39", imageSrc: "http://img.b2bpic.net/free-photo/fitness-equipments-wooden-floor_23-2147827952.jpg" },
              { id: "p3", name: "Yoga Flow", price: "$29", imageSrc: "http://img.b2bpic.net/free-photo/sports-equipment-around-blackboard_23-2147735035.jpg" }
            ]}
          />
        </div>

        <div id="pricing" data-section="pricing">
          <PricingCardTwo
            title="Membership Plans"
            description="Choose a membership that fits your lifestyle."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              { id: "basic", badge: "Starter", price: "$29", subtitle: "Essential access to our training platform.", features: ["App access", "Community feed"], buttons: [{ text: "Get Started" }] },
              { id: "pro", badge: "Pro", price: "$69", subtitle: "Full suite of performance tools.", features: ["Everything in Basic", "Nutrition guide"], buttons: [{ text: "Upgrade" }] }
            ]}
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardSixteen
            title="Member Success Stories"
            description="Real results from our global community."
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            kpiItems={[
              { value: "98%", label: "Satisfaction" },
              { value: "2M+", label: "Workouts" },
              { value: "50+", label: "Countries" }
            ]}
            testimonials={[
              { id: "1", name: "Sarah J.", role: "Athlete", company: "Fitness Fanatic", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-curly-hair-doing-sports-sunny-day-chubby-woman-grey-top-with-tattoos-looking-sideways-sport-body-positive-concept_74855-21334.jpg" }
            ]}
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitText
            sideTitle="Frequently Asked Questions"
            faqsAnimation="slide-up"
            useInvertedBackground={false}
            faqs={[
              { id: "f1", title: "Can I cancel anytime?", content: "Yes, all our plans are month-to-month." },
              { id: "f2", title: "Do I need equipment?", content: "Most workouts are equipment-free." }
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Fitverse"
            columns={[
              { title: "Links", items: [{ label: "Home", href: "#" }, { label: "Pricing", href: "#" }] }
            ]}
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}