"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-magnetic"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmall"
        background="noise"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "About", id: "about" },
        { name: "Services", id: "services" },
        { name: "Testimonials", id: "testimonials" },
        { name: "Book Now", id: "contact" },
      ]}
      brandName="Rockledge Barber Shop"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDoubleCarousel
      background={{ variant: "gradient-bars" }}
      title="Precision Cuts. Classic Style."
      description="Experience professional grooming in a welcoming, comfortable environment. Rockledge Barber Shop provides the finest cuts and shaves."
      leftCarouselItems={[
        { imageSrc: "https://img.b2bpic.net/free-photo/barber-giving-haircut-man_23-2149186458.jpg", imageAlt: "Professional barber cutting hair" },
        { imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-trimmed_23-2148256979.jpg", imageAlt: "Hair trimming detail" },
        { imageSrc: "https://img.b2bpic.net/free-photo/barber-using-clippers-customer-hair_23-2148560055.jpg", imageAlt: "Barber using equipment" },
      ]}
      rightCarouselItems={[
        { imageSrc: "https://img.b2bpic.net/free-photo/barber-shaving-man-s-beard-with-straight-razor_23-2148560068.jpg", imageAlt: "Straight razor shave" },
        { imageSrc: "https://img.b2bpic.net/free-photo/hairdresser-trimming-beard-man-barbershop_23-2149141768.jpg", imageAlt: "Beard grooming service" },
        { imageSrc: "https://img.b2bpic.net/free-photo/barber-smiling-client-after-service_23-2148750955.jpg", imageAlt: "Satisfied client" },
      ]}
      buttons={[
        { text: "Book Appointment", href: "#contact" },
        { text: "Call Now", href: "tel:5550123" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Crafted for You."
      description="At Rockledge Barber Shop, we treat every client with the respect they deserve. From our clean, modern space to our focus on high-quality grooming, we’re here to help you look and feel your absolute best."
      metrics={[
        { value: "100%", title: "Satisfaction Guaranteed" },
        { value: "5+", title: "Years Experienced" },
        { value: "Unlimited", title: "Style Options" },
      ]}
      imageSrc="https://img.b2bpic.net/free-photo/professional-barber-working-modern-shop_23-2149141768.jpg"
      imageAlt="Our barbershop interior"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",          title: "The Classic Cut",          author: "Style",          description: "A timeless haircut designed to keep you sharp and polished.",          tags: ["Cut", "Classic"],
          imageSrc: "https://img.b2bpic.net/free-photo/barber-cutting-man-hair-professional-salon_23-2148750955.jpg"
        },
        {
          id: "s2",          title: "Signature Shave",          author: "Premium",          description: "A relaxing hot towel shave experience with premium finishing touches.",          tags: ["Relaxing", "Premium"],
          imageSrc: "https://img.b2bpic.net/free-photo/barber-shaving-bearded-man-barbershop_23-2148256979.jpg"
        },
      ]}
      title="Our Services"
      description="Choose the service that best suits your lifestyle."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      testimonial="Finally a barbershop that really cares. I always walk out looking like a new man. Professional service and a great atmosphere every time!"
      rating={5}
      author="Michael Smith, Local Regular"
      avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-man-after-barber-visit_23-2149186474.jpg", alt: "Client" }]}
      ratingAnimation="blur-reveal"
      avatarsAnimation="slide-up"
      useInvertedBackground={false}
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="The Rockledge Standard"
      tag="Quality Assurance"
      metrics={[
        { id: "m1", value: "5k+", description: "Cuts Completed" },
        { id: "m2", value: "100%", description: "Safety Focused" },
        { id: "m3", value: "Daily", description: "Client Satisfaction" },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "How can I book an appointment?", content: "You can book directly through our website contact link or give us a call." },
        { id: "q2", title: "Is the shop open on weekends?", content: "Yes, we are open on weekends to accommodate your busy schedule." },
      ]}
      title="FAQs"
      description="Got questions? We have answers."
      faqsAnimation="blur-reveal"
      imageSrc="https://img.b2bpic.net/free-photo/barber-shop-interior-design_23-2148242807.jpg"
      imageAlt="Shop details"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Booking"
      title="Book Your Chair"
      description="Join the hundreds of happy clients at Rockledge Barber Shop. Click below to secure your spot."
      imageSrc="https://img.b2bpic.net/free-photo/barber-equipment-detail_23-2149205856.jpg"
      imageAlt="Barber equipment"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Quick Links",          items: [
            { label: "About", href: "#about" },
            { label: "Services", href: "#services" },
          ]
        },
        {
          title: "Info",          items: [
            { label: "Contact", href: "#contact" },
          ]
        }
      ]}
      logoText="Rockledge Barber Shop"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}