"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 FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="medium"
        sizing="mediumLarge"
        background="none"
        cardStyle="layered-gradient"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="solid"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "#hero",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "Pricing",
          id: "#pricing",
        },
        {
          name: "Team",
          id: "#team",
        },
        {
          name: "Contact",
          id: "#contact",
        },
      ]}
      brandName="Ammar's Barbershop"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{
        variant: "gradient-bars",
      }}
      title="Precision Cuts. Classic Style."
      description="Experience superior grooming at Ammar's Barbershop. From modern fades to classic hot towel shaves, we redefine excellence."
      buttons={[
        {
          text: "Book Appointment",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg"
      imageAlt="Ammar's Barbershop Interior"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
          alt: "Full shot of barber at hair salon",
        },
        {
          src: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg",
          alt: "Male barber giving his client a nice haircut",
        },
        {
          src: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg",
          alt: "Customer standing in front of mirror at barbershop",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg",
          alt: "Young man at the barber's shop getting his beard trimmed",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-surprised-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60279.jpg",
          alt: "Young surprised blonde male barber",
        },
      ]}
      avatarText="Trusted by 500+ happy clients"
      marqueeItems={[
        {
          type: "text",
          text: "Expert Grooming",
        },
        {
          type: "text",
          text: "Modern Fades",
        },
        {
          type: "text",
          text: "Classic Shaves",
        },
        {
          type: "text",
          text: "Premium Products",
        },
        {
          type: "text",
          text: "Tailored Styling",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      negativeCard={{
        items: [
          "No Rushed Service",
          "No Generic Styles",
          "No Compromise on Hygiene",
        ],
      }}
      positiveCard={{
        items: [
          "Modern Fades",
          "Classic Scissor Cuts",
          "Hot Towel Shave",
        ],
      }}
      title="Our Expert Services"
      description="We specialize in tailored grooming that brings out the best in every client."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardEight
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",
          badge: "Popular",
          price: "$30",
          subtitle: "Classic Haircut",
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
          features: [
            "Consultation",
            "Precision Cut",
            "Style Finish",
          ],
        },
        {
          id: "pro",
          badge: "Recommended",
          price: "$45",
          subtitle: "The Full Experience",
          buttons: [
            {
              text: "Book Now",
              href: "#contact",
            },
          ],
          features: [
            "Classic Haircut",
            "Hot Towel Shave",
            "Beard Sculpt",
          ],
        },
      ]}
      title="Transparent Pricing"
      description="Premium services at honest rates."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardFive
      animationType="slide-up"
      textboxLayout="inline-image"
      useInvertedBackground={false}
      team={[
        {
          id: "1",
          name: "Ammar",
          role: "Master Barber",
          imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg",
        },
        {
          id: "2",
          name: "John",
          role: "Senior Barber",
          imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-with-shaving-foam-his-face-shaving-himself-using-razor-standing-purple-wall_141793-50724.jpg",
        },
        {
          id: "3",
          name: "David",
          role: "Barber Stylist",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-with-tattooed-crossed-arms-grey-background_613910-1610.jpg",
        },
      ]}
      title="Meet Your Barbers"
      description="The masters of the craft dedicated to your style."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="split"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          name: "Alex R.",
          date: "Oct 2023",
          title: "Great Experience",
          quote: "The best haircut in town, bar none.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg",
          imageAlt: "happy client after haircut",
        },
        {
          id: "2",
          name: "Ben S.",
          date: "Sept 2023",
          title: "Highly Recommend",
          quote: "Clean, professional, and excellent quality.",
          tag: "First Timer",
          avatarSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102219.jpg",
          imageAlt: "happy client after haircut",
        },
        {
          id: "3",
          name: "Chris M.",
          date: "Aug 2023",
          title: "Mastery",
          quote: "Ammar truly knows what works for my hair type.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/side-view-man-bathroom_23-2150323118.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/client-getting-beard-shaving-barber-shop_1163-2028.jpg",
          imageAlt: "happy client after haircut",
        },
        {
          id: "4",
          name: "Dan K.",
          date: "Aug 2023",
          title: "Top Notch",
          quote: "Always leave looking sharp.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-beard-long-hair-wearing-casual-clothes-pointing-thumb-up-side-smiling-happy-with-open-mouth_839833-12966.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",
          imageAlt: "happy client after haircut",
        },
        {
          id: "5",
          name: "Eric P.",
          date: "July 2023",
          title: "Consistent",
          quote: "Reliable and precise service every single time.",
          tag: "Regular",
          avatarSrc: "http://img.b2bpic.net/free-photo/man-apron-posing-with-coffee-machine-component_23-2148366661.jpg",
          imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg",
          imageAlt: "happy client after haircut",
        },
      ]}
      title="Client Stories"
      description="Don't take our word for it, hear what our community says."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "Do I need an appointment?",
          content: "Yes, we recommend booking online to guarantee your preferred time.",
        },
        {
          id: "f2",
          title: "Do you accept walk-ins?",
          content: "We try to accommodate walk-ins, but scheduling is preferred.",
        },
        {
          id: "f3",
          title: "Where are you located?",
          content: "We are conveniently located in the downtown district.",
        },
      ]}
      sideTitle="Frequently Asked"
      sideDescription="Everything you need to know about our services."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "plain",
      }}
      tag="Get in touch"
      title="Ready to Look Your Best?"
      description="Secure your spot at Ammar's Barbershop today."
      buttons={[
        {
          text: "Book Appointment",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      logoText="Ammar's Barbershop"
      columns={[
        {
          title: "Menu",
          items: [
            {
              label: "Home",
              href: "#hero",
            },
            {
              label: "Services",
              href: "#services",
            },
            {
              label: "Pricing",
              href: "#pricing",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Book Now",
              href: "#contact",
            },
            {
              label: "FAQs",
              href: "#faq",
            },
          ],
        },
      ]}
      copyrightText="© 2024 Ammar's Barbershop."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
