"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import AboutMetric from '@/components/sections/about/AboutMetric';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award, Scissors, User } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLargeSizeLargeTitles"
        background="grid"
        cardStyle="gradient-bordered"
        primaryButtonStyle="diagonal-gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Home", id: "#hero" },
        { name: "About", id: "#about" },
        { name: "Services", id: "#services" },
        { name: "Pricing", id: "#pricing" },
        { name: "Contact", id: "#contact" }
      ]}
      brandName="Traffic Jam Saloon"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Welcome to Traffic Jam Saloon"
      description="Professional Haircuts, Beard Styling, Facial & Grooming Services. Style That Stops Traffic."
      buttons={[
        { text: "Book Your Spot", href: "#contact" },
        { text: "Call Now", href: "tel:+910000000000" }
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg?_wi=1"
      showDimOverlay={true}
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg", alt: "A master hairdresser prepares the face for shaving in the barber shop." },
        { src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", alt: "Hairdresser cutting a man's hair at the barber shop" },
        { src: "http://img.b2bpic.net/free-photo/full-shot-man-barber-shop_23-2149141768.jpg", alt: "Full shot man at barber shop" },
        { src: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", alt: "Barber doing haircut bearded aged client in hair salon" },
        { src: "http://img.b2bpic.net/free-photo/shot-professional-barber-work-handsome-young-man-getting-haircut-local-barbershop_7502-5658.jpg", alt: "Professional barber at work" }
      ]}
      avatarText="Join 500+ satisfied clients"
    />
  </div>

  <div id="about" data-section="about">
      <AboutMetric
      useInvertedBackground={false}
      title="About Traffic Jam Saloon"
      metrics={[
        { icon: Scissors, label: "Haircuts", value: "1000+" },
        { icon: Award, label: "Premium Experience", value: "5 Stars" },
        { icon: User, label: "Satisfied Clients", value: "500+" }
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { id: "1", title: "Hair Cut", tags: ["Professional"], imageSrc: "http://img.b2bpic.net/free-photo/client-getting-new-haircut-from_23-2148257051.jpg" },
        { id: "2", title: "Beard Trim", tags: ["Style"], imageSrc: "http://img.b2bpic.net/free-photo/sideways-customer-with-eyes-closed_23-2148256865.jpg" },
        { id: "3", title: "Facial", tags: ["Treatment"], imageSrc: "http://img.b2bpic.net/free-photo/male-patient-receiving-massage-from-doctor_107420-65165.jpg" }
      ]}
      title="Our Professional Services"
      description="Comprehensive grooming solutions in Sangrampur."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        { id: "2", tag: "Popular", price: "₹300", period: "service", description: "Professional Facial", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Cleansing", "Massage", "Glow"] },
        { id: "1", tag: "Basic", price: "₹100", period: "service", description: "Classic Hair Cut", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Wash", "Cut", "Style"] },
        { id: "3", tag: "Complete", price: "₹400", period: "service", description: "Hair Spa Package", button: { text: "Book", href: "#contact" }, featuresTitle: "Includes", features: ["Massage", "Treatment", "Relaxation"] }
      ]}
      title="Transparent Pricing"
      description="Premium services at affordable prices."
    />
  </div>

  <div id="gallery" data-section="gallery">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Chair Work", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506216.jpg" },
        { id: "p2", name: "Styling", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-barber-trimming-beard-man_23-2147778850.jpg" },
        { id: "p3", name: "Facials", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/masseur-taking-care-her-client_23-2149273895.jpg" },
        { id: "p4", name: "Experience", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-barbershop-with-classic-styling_618663-34.jpg" },
        { id: "p5", name: "Tools", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18507.jpg" },
        { id: "p6", name: "Atmosphere", price: "Gallery", variant: "Image", imageSrc: "http://img.b2bpic.net/free-photo/beautician-doing-cleaning-face-with-cosmetics-patient_7502-7526.jpg" }
      ]}
      title="Salon Gallery"
      description="Take a look at our premium workspace."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFifteen
      useInvertedBackground={false}
      testimonial="Best salon experience ever! Professional staff, great service, highly recommend."
      rating={5}
      author="Rahul Kumar"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", alt: "Customer" },
        { src: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-4252.jpg", alt: "Customer" },
        { src: "http://img.b2bpic.net/free-photo/pets-winter-holidays-new-year-concept-happy-young-man-celebrating-christmas-with-cute-black-dog_1258-173085.jpg", alt: "Customer" },
        { src: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg", alt: "Customer" },
        { src: "http://img.b2bpic.net/free-photo/crazy-hippie-man-happy-expression_1194-3937.jpg", alt: "Customer" }
      ]}
      ratingAnimation="slide-up"
      avatarsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplit
        tag="Contact"
        title="Book Your Slot"
        description="Ready for a fresh new look? Book your appointment now."
        background={{ variant: "canvas-reveal" }}
        useInvertedBackground={false}
        imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg?_wi=2"
        mediaPosition="right"
        buttonText="Book Now"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
        columns={[
            { title: "Services", items: [{ label: "Haircuts" }, { label: "Styling" }, { label: "Facials" }] },
            { title: "Company", items: [{ label: "About Us" }, { label: "Contact" }, { label: "Privacy Policy" }] }
        ]}
        bottomLeftText="© 2026 Traffic Jam Saloon"
        bottomRightText="All rights reserved."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}