"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav" className="transition-all duration-300">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "services" },
        { name: "Gallery", id: "gallery" },
        { name: "Contact", id: "contact" }
      ]}
      brandName="Elite Barber Shop"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardCarousel
      background={{ variant: "gradient-bars" }}
      title="Elite Barber Shop — Fresh Cuts & Clean Fades in City Center"
      description="Walk-Ins Welcome • Book Online • Premium Grooming Experience. Your go-to spot for modern styles."
      buttons={[
        { text: "Book Now", href: "#contact" },
        { text: "Call Now", href: "tel:5550123456" }
      ]}
      mediaItems={[
        { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg", imageAlt: "barber cutting hair with scissors" },
        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-leather-armchair_1156-3.jpg", imageAlt: "modern barber shop interior" },
        { imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148122052.jpg", imageAlt: "barber tools and accessories" },
        { imageSrc: "http://img.b2bpic.net/free-photo/barber-spraying-hair-man_23-2147778776.jpg", imageAlt: "happy customer at barber shop" },
        { imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barbershop_1157-21635.jpg?_wi=1", imageAlt: "close up fresh fade haircut" },
        { imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg", imageAlt: "barber grooming kit accessories" }
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyFour
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { id: "f1", title: "Classic Cuts", author: "Precision", description: "Timeless styles meeting modern standards.", tags: ["Hair", "Classic"], imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barbershop_1157-21635.jpg?_wi=2" },
        { id: "f2", title: "Skin Fades", author: "Expertise", description: "Detailed fades with perfect blending techniques.", tags: ["Fade", "Modern"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWODXzGSyTdm5m9Zkudsgd49uo/uploaded-1774605354725-rywizbmw.jpg" },
        { id: "f3", title: "Beard Trim", author: "Detail", description: "Sharp lines and clean finishes for a sharp look.", tags: ["Beard", "Grooming"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWODXzGSyTdm5m9Zkudsgd49uo/uploaded-1774605404651-twd0ruf0.jpg" },
        { id: "f4", title: "Full Package", author: "Premium", description: "Complete haircut and beard grooming combination.", tags: ["Combo", "Premium"], imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BWODXzGSyTdm5m9Zkudsgd49uo/uploaded-1774605418984-4k3t5xch.jpg" }
      ]}
      title="Our Services"
      description="Professional grooming services tailored for every individual need."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", brand: "Style", name: "Modern Fade", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-psd/barbershop-instagram-posts-collection_23-2149487551.jpg" },
        { id: "p2", brand: "Style", name: "Sharp Beard", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-with-beard-smiling_23-2148618892.jpg" },
        { id: "p3", brand: "Style", name: "Classic Taper", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylist-drying-wet-hair_23-2147769808.jpg" },
        { id: "p4", brand: "Style", name: "Interior", price: "Featured", rating: 5, reviewCount: "1", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-talking-phone_23-2149361903.jpg" }
      ]}
      title="Portfolio"
      description="Browse our latest work from the shop floor."
      cardRatingClassName="text-orange-500"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "John D.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-talking-phone_23-2149235740.jpg" },
        { id: "t2", name: "Mike S.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-blazer-beauty-style_1139-773.jpg" },
        { id: "t3", name: "Alex R.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-with-tablet_23-2149927583.jpg" },
        { id: "t4", name: "Sam B.", role: "Local", company: "Resident", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-tablet-close-up_23-2148943517.jpg" }
      ]}
      kpiItems={[
        { value: "1000+", label: "Satisfied Customers" },
        { value: "5", label: "Years Experience" },
        { value: "4.9", label: "Avg Rating" }
      ]}
      title="Happy Clients"
      description="What our local community has to say about us."
      ratingClassName="text-orange-500"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Contact"
      title="Ready for a Fresh Cut?"
      description="Book your appointment now or call us to reserve a time."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      columns={[
        {
          title: "Location",          items: [
            { label: "123 Main St, City", href: "#" },
            { label: "555-012-3456", href: "tel:5550123456" }
          ]
        },
        {
          title: "Company",          items: [
            { label: "Privacy Policy", href: "#" },
            { label: "Terms of Service", href: "#" }
          ]
        }
      ]}
      copyrightText="© 2024 Elite Barber Shop. All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}