"use client";

import { Calendar, Scissors, Sparkles } from "lucide-react";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="fluid"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="MO Cuts"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" }
          ]}
          button={{ text: "Book Now", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Premium Barbering Excellence"
          description="Experience classic craftsmanship and modern grooming techniques. MO Cuts delivers precision haircuts, expert beard care, and traditional straight razor shaves in a welcoming atmosphere."
          background={{ variant: "radial-gradient" }}
          kpis={[
            { value: "15+", label: "Years Experience" },
            { value: "5000+", label: "Satisfied Clients" },
            { value: "100%", label: "Satisfaction Rate" }
          ]}
          enableKpiAnimation={true}
          tag="Professional Barbershop"
          tagIcon={Scissors}
          imageSrc="http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-20497.jpg"
          imageAlt="Premium barber shop interior with professional styling chairs"
          mediaAnimation="blur-reveal"
          buttons={[{ text: "Book Your Cut", href: "#contact" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="Our Services"
          description="Each service is tailored to your needs with expert precision and attention to detail"
          tag="What We Offer"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Precision Haircuts",              description: "Classic and modern cuts tailored to your style. Our barbers master every technique from fades to shape-ups.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-tattooed-male-barber-holds-sharp-scissors-blade_613910-1390.jpg?_wi=1",              imageAlt: "Professional haircut service"
            },
            {
              id: 2,
              title: "Beard Grooming",              description: "Complete beard care including trimming, shaping, and conditioning treatments for optimal facial hair health.",              imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5408.jpg",              imageAlt: "Expert beard grooming and trimming"
            },
            {
              id: 3,
              title: "Straight Razor Shaves",              description: "Traditional hot lather shaves with straight razors. A luxurious experience that leaves your skin smooth and refreshed.",              imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg",              imageAlt: "Classic straight razor shaving service"
            },
            {
              id: 4,
              title: "Hair & Beard Treatments",              description: "Premium treatments including scalp massage, beard oil application, and specialty grooming products for maintenance.",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-tattooed-male-barber-holds-sharp-scissors-blade_613910-1390.jpg?_wi=2",              imageAlt: "Professional grooming treatments"
            }
          ]}
          buttons={[{ text: "View Pricing", href: "#pricing" }]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="About MO Cuts"
          description={[
            "MO Cuts was founded with a simple mission: to bring traditional barbering excellence to the modern customer. We believe in quality over quantity, taking time to understand each client's unique style preferences.",            "Our team of certified barbers brings decades of combined experience in men's grooming. We use only premium products and maintain the highest standards of hygiene and professionalism.",            "Whether you're looking for a quick trim or a complete grooming experience, MO Cuts is your destination for expert care in a comfortable, welcoming environment."
          ]}
          useInvertedBackground={true}
          buttons={[{ text: "Meet Our Team", href: "#team" }]}
          showBorder={true}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFive
          title="Transparent Pricing"
          description="Quality service at fair prices. All services include consultations and premium product application."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          plans={[
            {
              id: "haircut",              tag: "Standard Haircut",              price: "$35",              period: "/service",              description: "Professional haircut with consultation and styling",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "Includes:",              features: [
                "Expert consultation",                "Precision cutting",                "Styling gel application",                "Neck cleanup"
              ]
            },
            {
              id: "beard",              tag: "Beard Grooming",              price: "$25",              period: "/service",              description: "Comprehensive beard trim and shape-up service",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "Includes:",              features: [
                "Full beard trim",                "Line definition",                "Beard oil treatment",                "Shape consultation"
              ]
            },
            {
              id: "shave",              tag: "Luxury Shave",              price: "$40",              period: "/service",              description: "Traditional straight razor shave with hot lather",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "Includes:",              features: [
                "Hot towel prep",                "Premium lather",                "Straight razor shave",                "Aftershave treatment"
              ]
            },
            {
              id: "combo",              tag: "Complete Package",              price: "$65",              period: "/service",              description: "Haircut, beard trim, and straight razor shave combo",              button: { text: "Book Now", href: "#contact" },
              featuresTitle: "Includes:",              features: [
                "Professional haircut",                "Beard grooming",                "Luxury shave",                "Premium styling products"
              ]
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet the masters behind MO Cuts. Our barbers bring passion, precision, and years of expertise to every service."
          tag="Expert Barbers"
          tagAnimation="slide-up"
          membersAnimation="blur-reveal"
          members={[
            {
              id: "1",              name: "Maurice Thompson",              imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon_613910-5075.jpg?_wi=1",              imageAlt: "Maurice Thompson, Lead Barber"
            },
            {
              id: "2",              name: "Omar Perez",              imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",              imageAlt: "Omar Perez, Senior Barber"
            },
            {
              id: "3",              name: "Marcus Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon_613910-5075.jpg?_wi=2",              imageAlt: "Marcus Johnson, Grooming Specialist"
            }
          ]}
          memberVariant="card"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Real feedback from satisfied customers who trust MO Cuts for their grooming needs"
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground={true}
          gridVariant="uniform-all-items-equal"
          animationType="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "James Martinez",              role: "Business Owner",              company: "Local Tech Firm",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=1",              imageAlt: "James Martinez"
            },
            {
              id: "2",              name: "David Chen",              role: "Marketing Director",              company: "Creative Agency",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=2",              imageAlt: "David Chen"
            },
            {
              id: "3",              name: "Robert Williams",              role: "Financial Advisor",              company: "Wealth Management",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=3",              imageAlt: "Robert Williams"
            },
            {
              id: "4",              name: "Anthony Rodriguez",              role: "Attorney",              company: "Legal Practice",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg?_wi=4",              imageAlt: "Anthony Rodriguez"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Book Your Appointment Today"
          description="Reserve your spot for a premium grooming experience. Walk-ins welcome, but appointments ensure minimal wait times."
          tagIcon={Calendar}
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your phone number"
          buttonText="Book Appointment"
          termsText="We respect your privacy. Your booking information is secure and confidential."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#" },
                { label: "Services", href: "#services" },
                { label: "Pricing", href: "#pricing" },
                { label: "Team", href: "#team" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Haircuts", href: "#services" },
                { label: "Beard Grooming", href: "#services" },
                { label: "Straight Razor Shaves", href: "#services" },
                { label: "Treatments", href: "#services" }
              ]
            },
            {
              title: "Contact",              items: [
                { label: "Book Now", href: "#contact" },
                { label: "About Us", href: "#about" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Call Us", href: "tel:+1234567890" }
              ]
            }
          ]}
          bottomLeftText="© 2025 MO Cuts Barbershop. All rights reserved."
          bottomRightText="Premium Grooming Since 2010"
        />
      </div>
    </ThemeProvider>
  );
}
