"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { CheckCircle } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmall"
        background="blurBottom"
        cardStyle="inset"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarLayoutFloatingInline
            navItems={[
              { name: "About", id: "#about" },
              { name: "Services", id: "#services" },
              { name: "Team", id: "#team" },
              { name: "Contact", id: "#contact" },
            ]}
            brandName="Mr. Blendz"
            button={{ text: "Book Now", href: "#contact" }}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroCarouselLogo
            logoText="Mr. Blendz"
            description="Craftsmanship meets contemporary style in the heart of Somerset. Experience the tradition of a perfect shave and precision haircut."
            buttons={[{ text: "Book Appointment", href: "#contact" }]}
            slides={[
              { imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg", imageAlt: "Barbershop interior" },
              { imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table-with-electric-machines_627829-6252.jpg", imageAlt: "Barbershop interior" },
              { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg", imageAlt: "Barbershop interior" },
              { imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg", imageAlt: "Barbershop interior" },
              { imageSrc: "http://img.b2bpic.net/free-photo/barber-equipment-working-surface-by-mirror-barbershop_627829-8282.jpg", imageAlt: "Barbershop interior" },
              { imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7242.jpg", imageAlt: "Barbershop interior" },
            ]}
          />
        </div>

        <div id="about" data-section="about">
          <InlineImageSplitTextAbout
            useInvertedBackground={false}
            heading={[
              { type: "text", content: "The Mr. Blendz Experience" },
              { type: "image", src: "http://img.b2bpic.net/free-photo/hairdresser-preparing-equipment-work-barber-shop_23-2148182010.jpg", alt: "Shop interior" },
            ]}
            buttons={[{ text: "Book Now", href: "#contact" }]}
          />
        </div>

        <div id="services" data-section="services">
          <FeatureCardTen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            features={[
              {
                title: "Precision Haircuts",                description: "Classic and modern styles customized to your hair texture.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313067.jpg", imageAlt: "Grooming" },
                items: [{ icon: CheckCircle, text: "Scissor Cut" }, { icon: CheckCircle, text: "Fades" }],
                reverse: false
              },
              {
                title: "Traditional Hot Shaves",                description: "Relax with a hot towel treatment and professional straight razor shave.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121970.jpg", imageAlt: "Shaving" },
                items: [{ icon: CheckCircle, text: "Hot Towel" }, { icon: CheckCircle, text: "Straight Razor" }],
                reverse: true
              },
              {
                title: "Beard Sculpting",                description: "Detailed beard trimming and edge-up for a clean professional look.",                media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205855.jpg", imageAlt: "Beard" },
                items: [{ icon: CheckCircle, text: "Lineup" }, { icon: CheckCircle, text: "Trimming" }],
                reverse: false
              }
            ]}
            title="Precision Grooming"
            description="Our services go beyond just a haircut; they're an experience in classic grooming techniques tailored for modern life."
          />
        </div>

        <div id="team" data-section="team">
          <TeamCardFive
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            team={[
              { id: "t1", name: "Mark Blendz", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-man-with-apron_23-2148366567.jpg" },
              { id: "t2", name: "Sarah Styles", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg" },
              { id: "t3", name: "David Clipper", role: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg" },
            ]}
            title="Meet The Masters"
            description="Our barbers are dedicated professionals who believe in craftsmanship and hospitality."
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={false}
            products={[
              { id: "p1", name: "Signature Beard Oil", price: "$25", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232232.jpg" },
              { id: "p2", name: "Hold Wax", price: "$20", variant: "Strong", imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307225.jpg" },
              { id: "p3", name: "Conditioner", price: "$18", variant: "Moisturizing", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-male-beauty-products-with-display_23-2150435188.jpg" },
              { id: "p4", name: "Matte Paste", price: "$22", variant: "Matte", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506261.jpg" },
              { id: "p5", name: "Styling Cream", price: "$21", variant: "Light", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-male-beauty-products-with-display_23-2150435189.jpg" },
              { id: "p6", name: "Aftershave Balm", price: "$24", variant: "Soothing", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232237.jpg" },
            ]}
            title="Premium Products"
            description="Maintain your look with our professional grooming range."
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardFifteen
            useInvertedBackground={false}
            testimonial="The best barbershop in Somerset! Consistently high quality and great environment."
            rating={5}
            author="James R."
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg", alt: "Client" },
              { src: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg", alt: "Client" },
              { src: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg", alt: "Client" },
              { src: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506215.jpg", alt: "Client" },
              { src: "http://img.b2bpic.net/free-photo/middle-age-man-with-grey-hair-dark-color-shirt-looking-aside-with-pensive-expression-thinking-standing-brown-background_141793-133905.jpg", alt: "Client" },
            ]}
            ratingAnimation="slide-up"
            avatarsAnimation="slide-up"
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqBase
            textboxLayout="default"
            useInvertedBackground={false}
            faqs={[
              { id: "f1", title: "Do you accept walk-ins?", content: "Yes, we accept walk-ins on availability, but appointments are recommended." },
              { id: "f2", title: "What are your hours?", content: "We are open Monday to Friday, 9am to 7pm, and Saturdays 9am to 4pm." },
              { id: "f3", title: "Where are you located?", content: "We are centrally located in Somerset, MA." },
            ]}
            title="Frequently Asked"
            description="Have questions? We've got answers."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactCenter
            useInvertedBackground={false}
            background={{ variant: "canvas-reveal" }}
            tag="Visit Us"
            title="Book Your Spot"
            description="Get in touch or book an appointment online."
            buttonText="Secure Your Appointment"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoText="Mr. Blendz"
            columns={[
              { title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
              { title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
            ]}
            copyrightText="© 2024 Mr. Blendz Barbershop"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}