"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="largeSizeMediumTitles"
        background="noise"
        cardStyle="glass-elevated"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "features" },
        { name: "About", id: "about" },
        { name: "FAQ", id: "faq" },
      ]}
      brandName="9rib"
      button={{
        text: "Post a Task",        href: "#contact"}}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Find Trusted Local Help Near You"
      description="Post your task, get connected with reliable local workers in Casablanca, and get things done fast."
      buttons={[
        { text: "Post a Task", href: "#contact" },
        { text: "Find a Worker", href: "#catalog" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/female-engineers-gesturing-thumb-up_23-2147771750.jpg"
      avatarText="Trusted by 500+ Moroccan locals"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      features={[
        { id: "f1", title: "Fast Task Posting", tags: ["Simple", "Instant"] },
        { id: "f2", title: "Verified Professionals", tags: ["Trusted", "Safe"] },
        { id: "f3", title: "WhatsApp Integration", tags: ["Direct", "Fast"] },
      ]}
      title="Why Choose 9rib?"
      description="Tailored for the Moroccan market, simple and fast."
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="Our Moroccan Craft"
      buttons={[{ text: "Discover More", href: "#" }]}
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      products={[
        { id: "p1", name: "Plumbing", price: "From 150 MAD", imageSrc: "http://img.b2bpic.net/free-photo/cell-phone-shopping-cart-online-shopping-mobile-shopping-concept_1387-918.jpg" },
        { id: "p2", name: "Electricity", price: "From 100 MAD", imageSrc: "http://img.b2bpic.net/free-vector/gradient-patented-label-collection_23-2149733574.jpg" },
        { id: "p3", name: "Cleaning", price: "From 200 MAD", imageSrc: "http://img.b2bpic.net/free-vector/flat-e-commerce-elements_1051-481.jpg" },
      ]}
      title="Local Services"
      description="Professional services for every Moroccan home"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Trusted Nationwide"
      tag="9rib Growth"
      metrics={[
        { id: "m1", value: "100+", description: "Verified Experts" },
        { id: "m2", value: "500+", description: "Projects Completed" },
        { id: "m3", value: "95%", description: "Satisfied Clients" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      testimonials={[
        { id: "t1", title: "Excellent Service", quote: "Professional work, very satisfied!", name: "Ahmed", role: "Casa Resident" },
        { id: "t2", title: "Quick Solution", quote: "Found help instantly in my neighborhood.", name: "Fatima", role: "Local Business" },
      ]}
      title="Our Moroccan Community"
      description="Hear from our users"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        { id: "q1", title: "Is the platform local?", content: "Yes, we focus entirely on Moroccan cities." },
        { id: "q2", title: "Are workers vetted?", content: "Yes, all our professionals undergo strict identity checks." },
      ]}
      sideTitle="Need Help?"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      background={{ variant: "sparkles-gradient" }}
      tag="Connect Now"
      title="Start Your Project Today"
      description="Join the fastest growing service network in Morocco."
      buttons={[{ text: "Post a Task", href: "#" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="9rib"
      leftLink={{ text: "Terms of Service", href: "#" }}
      rightLink={{ text: "Privacy Policy", href: "#" }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}