"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactText from '@/components/sections/contact/ContactText';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { ShieldCheck, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="none"
        cardStyle="solid"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "/" },
        { name: "Loan Balances", id: "/loan-balances" },
        { name: "Products", id: "products" },
        { name: "Pricing", id: "pricing" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="BodaFund Sacco"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
        variant: "radial-gradient"}}
      title="Empowering Riders Through Financial Freedom"
      description="The trusted Sacco and lending partner for Boda Boda professionals. Grow your savings and own your bike today."
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-looking-smartphone-while-sitting-her-motorcycle_23-2148685250.jpg", imageAlt: "Boda digital finance" },
        { imageSrc: "http://img.b2bpic.net/free-photo/two-businessmen-congratulating-each-other-successful-job-giving-highfive-focus-is-young-businessman_637285-208.jpg", imageAlt: "Financial growth" },
        { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-taking-bike-ride-it-city_23-2149375681.jpg", imageAlt: "Community meeting" },
      ]}
      mediaAnimation="slide-up"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={true}
      title="Our Impact in Numbers"
      metrics={[
        { icon: Users, label: "Active Riders", value: "5,000+" },
        { icon: TrendingUp, label: "Loans Disbursed", value: "$1.2M" },
        { icon: ShieldCheck, label: "Members Insured", value: "98%" },
      ]}
      metricsAnimation="blur-reveal"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{ items: ["No hidden processing fees", "No high-interest daily debt", "No predatory repossession"] }}
      positiveCard={{ items: ["Fair interest rates", "Flexible repayment terms", "Boda ownership programs"] }}
      title="Why Choose BodaFund"
      description="We prioritize rider ownership and fair terms over predatory practices."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={true}
      products={[]}
      title="Our Financial Products"
      description="Explore tailored solutions for Boda Boda business owners."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardThree
      animationType="scale-rotate"
      textboxLayout="split"
      useInvertedBackground={false}
      plans={[]}
      title="Sacco Membership Tiers"
      description="Choose your contribution level and unlock premium benefits."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[]}
      title="Rider Success Stories"
      description="Hear from thousands of members who changed their lives with BodaFund."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[]}
      title="Need Help? Read This."
      description="Common questions regarding loans and savings."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={true}
      background={{ variant: "gradient-bars" }}
      text="Ready to own your bike and grow your savings today? Contact our support team."
      buttons={[{ text: "Contact Support", href: "tel:+254700000000" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[]}
      logoText="BodaFund Sacco"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}