"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: "How it works",
          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"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-man-showing-thumbs-up-shirt-helmet-looking-happy_176474-11011.jpg",
          alt: "Young man showing thumbs up in shirt, helmet and looking happy.",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-adult-builder-man-uniform-holds-out-hand-isolated-olive-green-wall_141793-66479.jpg",
          alt: "Smiling adult builder man in uniform holds out hand isolated on olive green wall",
        },
        {
          src: "http://img.b2bpic.net/free-photo/builder-young-man-construction-uniform-safety-helmet-wearing-rubber-gloves-showing-thumb-up-happy-positive-smiling-standing-blue-background_141793-134413.jpg",
          alt: "Builder young man in construction uniform and safety helmet wearing rubber gloves showing thumb up happy and positive smiling standing over blue background",
        },
        {
          src: "http://img.b2bpic.net/free-photo/front-view-rejoicing-male-engineer-sitting-his-working-place-writing-notes-document-plan-business-contractor-agenda-corporate-job-property-builder_140725-155596.jpg",
          alt: "Front view rejoicing male engineer sitting behind his working place and writing notes document plan business contractor agenda corporate job property builder",
        },
        {
          src: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
          alt: "Happy customer portrait",
        },
      ]}
      avatarText="Trusted by 500+ locals"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Fast Task Posting",
          tags: [
            "Simple",
            "Instant",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/illustration-reverse-clock-icon_53876-5629.jpg",
        },
        {
          id: "f2",
          title: "Verified Professionals",
          tags: [
            "Trusted",
            "Safe",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/shields-with-checkmarks-set_78370-7864.jpg",
        },
        {
          id: "f3",
          title: "WhatsApp Integration",
          tags: [
            "Direct",
            "Fast",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/shop-online-e-commerce-marketing-business-concept_53876-123778.jpg",
        },
      ]}
      title="Why Choose 9rib?"
      description="Simple, fast, and local. Everything you need to get help in your city."
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="How it Works"
      buttons={[
        {
          text: "Learn More",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="catalog" data-section="catalog">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      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",
        },
        {
          id: "p4",
          name: "Gardening",
          price: "From 180 MAD",
          imageSrc: "http://img.b2bpic.net/free-vector/help-support-25-line-icon-pack-including-communication-call-phone-support-file_1142-26479.jpg",
        },
        {
          id: "p5",
          name: "Painting",
          price: "From 300 MAD",
          imageSrc: "http://img.b2bpic.net/free-vector/check-mark-star-stamp-set_78370-8832.jpg",
        },
        {
          id: "p6",
          name: "Moving",
          price: "From 500 MAD",
          imageSrc: "http://img.b2bpic.net/free-vector/shopping_24908-54092.jpg",
        },
      ]}
      title="Popular Categories"
      description="Browse by task type"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="9rib in Numbers"
      tag="Growing Every Day"
      metrics={[
        {
          id: "m1",
          value: "100+",
          description: "Verified Workers",
        },
        {
          id: "m2",
          value: "500+",
          description: "Tasks Completed",
        },
        {
          id: "m3",
          value: "95%",
          description: "Client Satisfaction",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          title: "Great Plumber!",
          quote: "Found a plumber within 10 minutes. Very professional.",
          name: "Ahmed",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
        },
        {
          id: "t2",
          title: "Highly Recommended",
          quote: "9rib makes finding help so much easier.",
          name: "Fatima",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businesswoman-city-with-blurred-background_1139-257.jpg",
        },
        {
          id: "t3",
          title: "Fast and Simple",
          quote: "The platform is incredibly user-friendly.",
          name: "Youssef",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-showing-people-tablet-what-she-got-sales-shopping_23-2148695607.jpg",
        },
        {
          id: "t4",
          title: "Lifesaver!",
          quote: "Needed electrical work done immediately.",
          name: "Nadia",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-girl-posing-studio_176474-68234.jpg",
        },
        {
          id: "t5",
          title: "Trustworthy",
          quote: "I feel safe using workers from here.",
          name: "Omar",
          role: "User",
          imageSrc: "http://img.b2bpic.net/free-photo/business-lady-looking-copyspace-with-interest_1262-2957.jpg",
        },
      ]}
      title="Customer Stories"
      description="See why people trust us"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Is 9rib free?",
          content: "Posting a task is free for customers.",
        },
        {
          id: "q2",
          title: "How are workers verified?",
          content: "We check CIN and conduct interviews.",
        },
        {
          id: "q3",
          title: "How do I pay?",
          content: "Pay the worker directly after completion.",
        },
      ]}
      sideTitle="Questions?"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get Started"
      title="Ready to Post Your First Task?"
      description="It only takes a minute to get help."
      buttons={[
        {
          text: "Post a Task Now",
          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>
  );
}
