"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterSocial from '@/components/sections/footer/FooterSocial';
import { Scissors, Calendar, Instagram, Facebook, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="large"
      background="noiseDiagonalGradient"
      cardStyle="spotlight"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[
            {name: "Home", id: "hero"},
            {name: "About", id: "about"},
            {name: "Services", id: "services"},
            {name: "Team", id: "team"},
            {name: "Contact", id: "contact"}
          ]}
          button={{text: "Book Now", href: "contact"}}
          brandName="Barber & Co"
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboard 
          title="Premium Barbershop Experience"
          description="Expert haircuts, traditional techniques, and exceptional service. Step into style at Barber & Co."
          tag="Professional Grooming"
          tagIcon={Scissors}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269522492-kckitytb.jpg"
          imageAlt="Modern barbershop interior with vintage aesthetic"
          frameStyle="card"
          buttons={[
            {text: "Book Appointment", href: "contact"},
            {text: "Learn More", href: "about"}
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <MediaSplitTabsAbout 
          title="Craftsmanship Since 2015"
          description="Barber & Co has been delivering world-class grooming services for nearly a decade"
          tabs={[
            {
              id: "craft",
              label: "Our Craft",
              description: "We specialize in classic and modern haircuts, precise beard shaping, and complete grooming services. Every cut is personalized to match your style and face shape."
            },
            {
              id: "experience",
              label: "Experience",
              description: "Our barbers bring 15+ years of combined experience, trained in traditional techniques and contemporary styles. We stay updated with the latest grooming trends."
            },
            {
              id: "community",
              label: "Community",
              description: "We're more than just a barbershop - we're a gathering place for the neighborhood. Join our community of satisfied clients who trust us with their appearance."
            }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269523676-h3h9y5ct.jpg"
          imageAlt="Barber & Co professional interior and workspace"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="services" data-section="services">
        <FeatureCardNine 
          title="Our Services"
          description="Explore our full range of professional grooming services"
          features={[
            {
              id: 1,
              title: "Classic Fade",
              description: "Perfectly blended fades with sharp lines. Ideal for a clean, professional look that works for any occasion.",
              phoneOne: {imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg"},
              phoneTwo: {imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269522492-kckitytb.jpg"}
            },
            {
              id: 2,
              title: "Beard Shaping",
              description: "Expert beard trimming and shaping. We define your beard's natural contours for maximum style and grooming.",
              phoneOne: {imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg"},
              phoneTwo: {imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg"}
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardSix 
          title="Meet Our Barbers"
          description="Skilled professionals dedicated to your perfect haircut"
          members={[
            {
              id: "1",
              name: "Marcus Johnson",
              role: "Master Barber & Owner",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850169290-83ozx3zs.jpg",
              imageAlt: "Marcus Johnson, Master Barber"
            },
            {
              id: "2",
              name: "David Rodriguez",
              role: "Senior Barber",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg",
              imageAlt: "David Rodriguez, Senior Barber"
            },
            {
              id: "3",
              name: "James Chen",
              role: "Specialist - Modern Cuts",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850167641-vivcegq3.jpg",
              imageAlt: "James Chen, Modern Cuts Specialist"
            },
            {
              id: "4",
              name: "Alex Thompson",
              role: "Beard & Grooming Expert",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850172828-hk05nqhi.jpg",
              imageAlt: "Alex Thompson, Grooming Expert"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive 
          title="What Our Clients Say"
          description="Real feedback from satisfied customers"
          testimonials={[
            {
              id: "1",
              name: "Michael Stevens, Tech Professional",
              date: "Date: 15 November 2024",
              title: "Best haircut I've had in years",
              quote: "Marcus listened to exactly what I wanted and delivered perfectly. The attention to detail is incredible. I'm a regular now and couldn't imagine going anywhere else.",
              tag: "Premium Service",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183586665-q5sajrdt.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269522492-kckitytb.jpg"
            },
            {
              id: "2",
              name: "Robert Wilson, Business Owner",
              date: "Date: 10 November 2024",
              title: "Professional and welcoming",
              quote: "This barbershop has become my go-to place. Every visit feels premium, and the barbers are true craftsmen. Highly recommend to anyone serious about their appearance.",
              tag: "Premium Service",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140062551-7eyqwr2v.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269523676-h3h9y5ct.jpg"
            },
            {
              id: "3",
              name: "David Lee, Creative Director",
              date: "Date: 5 November 2024",
              title: "Fantastic beard work",
              quote: "Alex transformed my beard. I've tried other places but the expertise here is unmatched. The beard shaping service is worth every penny.",
              tag: "Specialist Work",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766746405873-1spwsbig.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850171967-vqv1el7d.jpg"
            },
            {
              id: "4",
              name: "James Martinez, Entrepreneur",
              date: "Date: 1 November 2024",
              title: "Consistently excellent",
              quote: "I've been going to Barber & Co for 2 years now. The quality never wavers, and they always make me feel welcome. That's the kind of consistency you need in a barbershop.",
              tag: "Loyal Customer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140063369-vzpeyskp.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766850164268-l89tn75w.jpg"
            },
            {
              id: "5",
              name: "Christopher Brown, Corporate Executive",
              date: "Date: 28 October 2024",
              title: "Five-star barbershop experience",
              quote: "Every detail matters at Barber & Co - from the welcoming atmosphere to the flawless execution. This is my sanctuary for quality grooming.",
              tag: "Premium Service",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269525719-6xvd4t1k.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767269523676-h3h9y5ct.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Ready to Book?"
          ctaDescription="Schedule your appointment with one of our expert barbers today."
          ctaButton={{text: "Book Your Appointment", href: "#"}}
          ctaIcon={Calendar}
          faqs={[
            {
              id: "1",
              title: "How do I book an appointment?",
              content: "You can book directly through our website, call us at the number below, or walk in during business hours. We accept same-day appointments based on availability."
            },
            {
              id: "2",
              title: "What is your pricing?",
              content: "Standard haircuts start at $35, fades at $40, and beard services at $25. Premium services and longer sessions are available. We offer first-time customer discounts."
            },
            {
              id: "3",
              title: "Do you take walk-ins?",
              content: "Yes, we welcome walk-ins! However, booking an appointment ensures you won't have to wait. During peak hours, we may have a short queue for walk-in customers."
            },
            {
              id: "4",
              title: "What are your hours?",
              content: "Monday-Friday: 9am-7pm, Saturday: 8am-6pm, Sunday: 10am-5pm. We're closed on major holidays. Extended hours available on request."
            },
            {
              id: "5",
              title: "Can I request a specific barber?",
              content: "Absolutely! Let us know your preference when booking. Each of our barbers has unique strengths, and we're happy to match you with the perfect barber for your needs."
            }
          ]}
          useInvertedBackground="noInvert"
          animationType="slide-up"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterSocial 
          logoText="Barber & Co"
          columns={[
            {
              title: "Services",
              items: [
                {label: "Haircuts", href: "services"},
                {label: "Beard Shaping", href: "services"},
                {label: "Grooming", href: "services"}
              ]
            },
            {
              title: "Company",
              items: [
                {label: "About Us", href: "about"},
                {label: "Our Team", href: "team"},
                {label: "Contact", href: "contact"}
              ]
            },
            {
              title: "Info",
              items: [
                {label: "Hours", href: "#"},
                {label: "Location", href: "#"},
                {label: "Pricing", href: "#"}
              ]
            }
          ]}
          socialLinks={[
            {icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram"},
            {icon: Facebook, href: "https://facebook.com", ariaLabel: "Follow us on Facebook"},
            {icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter"}
          ]}
          copyrightText="© Barber & Co, 2024. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}