"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Scissors, Sparkles, Mail, Award, Users, Star, Phone, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="medium"
      background="noiseGradient"
      cardStyle="neon-glow"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Barber Shop"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "services" },
            { name: "Team", id: "team" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardRotatedCarousel
          title="Precision Grooming Redefined"
          description="Experience classic barbering combined with modern technique. Where tradition meets excellence in every cut."
          tag="Premium Barbershop"
          tagIcon={Scissors}
          buttons={[
            { text: "Book an Appointment" },
            { text: "Learn More", href: "#about" }
          ]}
          carouselItems={[
            { id: "1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg", imageAlt: "Professional barber cutting hair" },
            { id: "2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg", imageAlt: "Barber with satisfied client" },
            { id: "3", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850166105-8f5807nc.jpg", imageAlt: "Barbershop interior" },
            { id: "4", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041840554-dzv57h1m.jpg", imageAlt: "Professional grooming service" },
            { id: "5", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041983536-0lwj9u7n.jpg", imageAlt: "Classic barber techniques" },
            { id: "6", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg", imageAlt: "Customer service excellence" }
          ]}
          autoPlay={true}
          autoPlayInterval={4000}
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="The Barber Shop Legacy"
          description="A tradition of excellence since 1995"
          tabs={[
            {
              id: "tradition",
              label: "Our Tradition",
              description: "For nearly three decades, we have been the go-to destination for discerning gentlemen who value quality craftsmanship. Our legacy is built on precision, respect, and the time-honored art of classic barbering."
            },
            {
              id: "expertise",
              label: "Master Barbers",
              description: "Our team consists of certified master barbers with 15+ years of combined experience. We stay current with trends while maintaining the classic techniques that define true barbering."
            },
            {
              id: "commitment",
              label: "Our Commitment",
              description: "We commit to delivering an exceptional experience with every visit. From the moment you enter our shop, you'll experience the warmth of a true community barbershop with premium services."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041984566-9y9n4by0.jpg"
          imageAlt="Barbershop interior with classic design"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="services" data-section="services">
        <FeatureCardNineteen
          title="Our Services"
          description="Premium grooming services tailored to your style and personality"
          tag="Expertise"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          features={[
            {
              id: 1,
              tag: "Classic",
              title: "Precision Haircuts",
              subtitle: "Fade, Crew, and Pompadour cuts",
              description: "Our signature haircuts are executed with precision using traditional techniques. From modern fades to classic styles, each cut is tailored to your face shape and preferences.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg",
              imageAlt: "Professional barber performing precision haircut"
            },
            {
              id: 2,
              tag: "Grooming",
              title: "Beard Grooming",
              subtitle: "Shaping, trimming, and maintenance",
              description: "Keep your beard looking sharp with our expert grooming services. From full shaping to weekly maintenance, we help you maintain the perfect facial hair style.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg",
              imageAlt: "Expert beard grooming and shaping"
            },
            {
              id: 3,
              tag: "Finishing",
              title: "Styling & Finishing",
              subtitle: "Product application and styling",
              description: "Complete your look with our styling services. We apply premium products that enhance your style while keeping your hair healthy and manageable all day.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg",
              imageAlt: "Professional hair styling and product application"
            }
          ]}
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Barbers"
          description="Expert craftspeople dedicated to your grooming"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          members={[
            {
              id: "1",
              name: "Marcus Reid",
              role: "Head Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850165195-selv2sf8.jpg",
              imageAlt: "Marcus Reid, Head Barber"
            },
            {
              id: "2",
              name: "James Thompson",
              role: "Master Stylist",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "James Thompson, Master Stylist"
            },
            {
              id: "3",
              name: "David Martinez",
              role: "Senior Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg",
              imageAlt: "David Martinez, Senior Barber"
            },
            {
              id: "4",
              name: "Chris Anderson",
              role: "Certified Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Chris Anderson, Certified Barber"
            }
          ]}
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardNine
          title="What Our Clients Say"
          description="Real feedback from satisfied customers"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              quote: "The best haircut I've had in years. The barbers really know their craft and take pride in their work. Highly recommended!",
              name: "Robert Johnson",
              role: "Business Owner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850166105-8f5807nc.jpg",
              imageAlt: "Robert Johnson"
            },
            {
              id: "2",
              quote: "Finally found a barber who understands what I want. Great attention to detail and friendly atmosphere.",
              name: "Michael Chen",
              role: "Marketing Director",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171104-55aomfy3.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              quote: "Been going here for two years now. The consistency and quality are unmatched. Marcus is a true artist.",
              name: "David Wilson",
              role: "Attorney",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041840554-dzv57h1m.jpg",
              imageAlt: "David Wilson"
            },
            {
              id: "4",
              quote: "Worth every penny. The staff makes you feel welcome and the results are always excellent.",
              name: "Christopher Lee",
              role: "Entrepreneur",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041986944-fqslofvg.jpg",
              imageAlt: "Christopher Lee"
            },
            {
              id: "5",
              quote: "This is where real barbering happens. Professional, skilled, and they actually listen to what you want.",
              name: "James Rodriguez",
              role: "Executive",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041839169-yw95y472.jpg",
              imageAlt: "James Rodriguez"
            },
            {
              id: "6",
              quote: "I drive 30 minutes just to get my hair cut here. That's how good they are. Absolutely worth it!",
              name: "Thomas Anderson",
              role: "Sales Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041987774-pdy6zoar.jpg",
              imageAlt: "Thomas Anderson"
            }
          ]}
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="By The Numbers"
          description="Our commitment to excellence reflected in our growth"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          metrics={[
            {
              id: "1",
              value: "28",
              title: "Years",
              description: "Of Barbering Excellence",
              icon: Award
            },
            {
              id: "2",
              value: "5000+",
              title: "Clients",
              description: "Served with Precision",
              icon: Users
            },
            {
              id: "3",
              value: "4",
              title: "Master",
              description: "Certified Barbers",
              icon: Scissors
            },
            {
              id: "4",
              value: "98%",
              title: "Satisfaction",
              description: "Customer Satisfaction Rate",
              icon: Star
            }
          ]}
        />
      </div>
      
      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our services"
          textPosition="left"
          useInvertedBackground="noInvert"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How do I book an appointment?",
              content: "You can book directly through our website contact form, call us at (555) 123-4567, or walk in during business hours. We recommend booking ahead, especially for weekends."
            },
            {
              id: "2",
              title: "What is your cancellation policy?",
              content: "We require 24 hours notice for cancellations or rescheduling. Cancellations made less than 24 hours before your appointment may be subject to a cancellation fee."
            },
            {
              id: "3",
              title: "Do you offer walk-in services?",
              content: "Yes, we welcome walk-ins! However, during peak hours (Thursday-Saturday evenings), wait times may be 20-30 minutes. We recommend booking ahead for the best experience."
            },
            {
              id: "4",
              title: "What payment methods do you accept?",
              content: "We accept cash, all major credit cards (Visa, Mastercard, American Express), and digital payments through Apple Pay and Google Pay."
            },
            {
              id: "5",
              title: "Do you offer discounts or loyalty programs?",
              content: "Yes! We offer a loyalty program where every 10th haircut is complimentary. We also provide discounts for first-time customers and corporate packages for businesses."
            }
          ]}
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          tagIcon={Mail}
          title="Stay Updated"
          description="Subscribe to our newsletter for grooming tips, special offers, and new service announcements."
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767041985501-5037pacx.jpg"
          imageAlt="Barbershop interior"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We'll send you grooming tips and exclusive offers. You can unsubscribe anytime."
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="Barber Shop"
          columns={[
            {
              title: "Services",
              items: [
                { label: "Haircuts", href: "#services" },
                { label: "Beard Grooming", href: "#services" },
                { label: "Styling", href: "#services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Reviews", href: "#testimonials" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Terms of Service", href: "/terms" },
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Cancellation Policy", href: "/cancellation" }
              ]
            }
          ]}
          title="Your destination for premium grooming and expert barbering since 1995"
          contactItems={[
            { icon: Phone, text: "(555) 123-4567" },
            { icon: Mail, text: "hello@barbershop.com" },
            { icon: MapPin, text: "123 Main Street, Downtown District" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}