"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 FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="small"
        sizing="largeSmall"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "About",
          id: "about",
        },
        {
          name: "Features",
          id: "features",
        },
        {
          name: "Products",
          id: "products",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
      ]}
      brandName="Portal"
      button={{
        text: "Contact",
        href: "#contact",
      }}
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Welcome to Our Digital Portal"
      description="Explore our curated sections, products, and services designed to empower your business growth and professional journey."
      imageSrc="http://img.b2bpic.net/free-photo/hr-employees-developing-diversity-inclusion-recruitment-strategy_482257-123207.jpg"
      imageAlt="Professional business environment"
      showDimOverlay={true}
      showBlur={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/amazed-businessman-showing-big-object-describe-something-large-looking-excited-standing-whi_1258-111973.jpg",
          alt: "Sarah Miller",
        },
        {
          src: "http://img.b2bpic.net/free-photo/black-businessman-happy-expression_1194-2580.jpg",
          alt: "John Doe",
        },
        {
          src: "http://img.b2bpic.net/free-photo/successful-businessman-rejoicing-making-fist-pump-saying-yes-achieve-goal-standing-white-ba_1258-113648.jpg",
          alt: "Emily Chen",
        },
        {
          src: "http://img.b2bpic.net/free-photo/crazy-hero-happy-expression_1194-4144.jpg",
          alt: "Michael Scott",
        },
        {
          src: "http://img.b2bpic.net/free-photo/ambitious-businesswoman-with-arms-crossed-looking-forward-future_1163-4333.jpg",
          alt: "David Zhang",
        },
      ]}
      avatarText="Join 5,000+ professionals"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Built for Professionals"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "High maintenance",
          "Slow delivery",
          "Complex setup",
        ],
      }}
      positiveCard={{
        items: [
          "Fully integrated",
          "Instant activation",
          "User-friendly interface",
        ],
      }}
      title="Feature Advantages"
      description="Compare why our platform is the superior choice for your organizational needs."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Professional Kit",
          price: "$99",
          imageSrc: "http://img.b2bpic.net/free-photo/minimal-skincare-tube-mockup-png-beauty-product-packaging_53876-110841.jpg",
        },
        {
          id: "p2",
          name: "Digital Access",
          price: "$149",
          imageSrc: "http://img.b2bpic.net/free-photo/white-usb-c-earbuds-cable-white-background_9975-133806.jpg",
        },
        {
          id: "p3",
          name: "Corporate Portfolio",
          price: "$199",
          imageSrc: "http://img.b2bpic.net/free-photo/dark-folder-wooden-table-close-up_1232-1121.jpg",
        },
        {
          id: "p4",
          name: "Advanced Tablet",
          price: "$299",
          imageSrc: "http://img.b2bpic.net/free-photo/tablet-with-blank-screen-chair_15879-293.jpg",
        },
        {
          id: "p5",
          name: "Organizational Tool",
          price: "$79",
          imageSrc: "http://img.b2bpic.net/free-photo/back-school-concept-arrangement_23-2148586703.jpg",
        },
        {
          id: "p6",
          name: "Elite Gadget",
          price: "$399",
          imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-flat-lay_23-2148837348.jpg",
        },
      ]}
      title="Featured Offerings"
      description="Explore our range of professional products curated for success."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardOne
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          badge: "Essential",
          price: "$29",
          subtitle: "For individuals",
          features: [
            "Feature A",
            "Feature B",
            "Support",
          ],
        },
        {
          id: "pro",
          badge: "Popular",
          price: "$59",
          subtitle: "For teams",
          features: [
            "Feature A",
            "Feature B",
            "Priority Support",
            "Analytics",
          ],
        },
        {
          id: "ent",
          badge: "Enterprise",
          price: "$149",
          subtitle: "For large orgs",
          features: [
            "Unlimited Features",
            "Dedicated Manager",
            "Security",
          ],
        },
      ]}
      title="Flexible Plans"
      description="Scalable pricing designed for every growth stage."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="An incredible experience. The quality and service have transformed how we operate daily."
      rating={5}
      author="Sarah Miller"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-with-curly-hair-isolated_273609-48191.jpg",
          alt: "Sarah",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-successful-businessman-smiling-posing-with-crossed-arms-office_176420-913.jpg",
          alt: "John",
        },
        {
          src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67066.jpg",
          alt: "Emily",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-sitting-stairs_1262-3109.jpg",
          alt: "Michael",
        },
        {
          src: "http://img.b2bpic.net/free-photo/diverse-business-professionals-engaged-video-call-global-meeting-using-online-communication_482257-132361.jpg",
          alt: "David",
        },
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",
          title: "How do I get started?",
          content: "Just sign up and explore our dashboard.",
        },
        {
          id: "2",
          title: "Is there a free trial?",
          content: "Yes, we offer a 14-day free trial on all plans.",
        },
        {
          id: "3",
          title: "Can I cancel anytime?",
          content: "Absolutely, no long-term contracts required.",
        },
      ]}
      title="Questions Answered"
      description="Find everything you need to know about our services and process."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Connect"
      title="Get In Touch"
      description="We are here to answer your questions and assist with your transition."
      mediaAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/skilled-leader-meeting-strategizing-with-stakeholders-discuss-ideas_482257-118713.jpg"
      imageAlt="Skilled leader in a meeting"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        {
          items: [
            {
              label: "About",
              href: "#about",
            },
            {
              label: "Features",
              href: "#features",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          items: [
            {
              label: "Support",
              href: "#",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      logoText="Portal"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
