"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Scissors, Briefcase, Zap, Star, Phone, Facebook, Instagram } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="inset"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Mo's Barber"
          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"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Welcome to Mo's Barber"
          description="Experience premium grooming and expert haircuts in a welcoming atmosphere. Our master barbers bring decades of craftsmanship to every cut."
          tag="Premium Grooming"
          tagIcon={Scissors}
          tagAnimation="slide-up"
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "Learn More", href: "#about" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-man-getting-groomed_23-2149220517.jpg"
          imageAlt="Professional barber cutting hair with precision"
          showDimOverlay={false}
          showBlur={true}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="About Mo's Barber"
          description="Founded with a passion for quality grooming, Mo's Barber has been serving our community with excellence for over 15 years. We believe every client deserves personalized attention and expert craftsmanship. Our shop is more than just a place to get a haircut—it's a sanctuary for relaxation, conversation, and self-care."
          tag="Our Story"
          tagIcon={Briefcase}
          tagAnimation="blur-reveal"
          buttons={[
            { text: "Book Now", href: "#contact" }
          ]}
          buttonAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/man-getting-new-haircut-from_23-2148257052.jpg"
          imageAlt="Mo's Barber shop interior with traditional aesthetic"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="Our Services"
          description="We offer a full range of professional grooming services tailored to your needs. From classic cuts to modern styles, beard grooming, and premium shaves, every service is delivered with precision and care."
          tag="Premium Grooming"
          tagIcon={Zap}
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            {
              id: 1,
              title: "Classic Haircuts",              description: "Expert cuts tailored to your style and face shape. From fades to full shapes, we deliver precision every time.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",              imageAlt: "Professional haircut and styling service"
            },
            {
              id: 2,
              title: "Beard Grooming",              description: "Complete beard care including trimming, shaping, and conditioning. Look sharp and well-maintained.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-man-getting-groomed_23-2149220521.jpg",              imageAlt: "Professional beard trim and grooming"
            },
            {
              id: 3,
              title: "Straight Razor Shaves",              description: "Traditional hot towel shaves with a straight razor. A luxurious experience you won't forget.",              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-getting-groomed_23-2149220518.jpg",              imageAlt: "Traditional straight razor shaving service"
            }
          ]}
          buttons={[
            { text: "Book a Service", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet Our Barbers"
          tag="Expert Professionals"
          tagAnimation="blur-reveal"
          membersAnimation="blur-reveal"
          members={[
            {
              id: "1",              name: "Mo",              imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg",              imageAlt: "Mo - Master Barber and Shop Owner"
            },
            {
              id: "2",              name: "Marcus",              imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg",              imageAlt: "Marcus - Senior Stylist"
            },
            {
              id: "3",              name: "David",              imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-male-barber-wearing-uniform-holding-scissors-with-cash-isolated-olive-green-background_141793-119410.jpg",              imageAlt: "David - Expert Barber"
            }
          ]}
          memberVariant="card"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",              name: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-smiling-confident-looking-side-street_839833-27819.jpg",              imageAlt: "James Wilson - Satisfied Customer"
            },
            {
              id: "2",              name: "Robert Chen",              imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",              imageAlt: "Robert Chen - Satisfied Customer"
            },
            {
              id: "3",              name: "Michael Turner",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bearded-smiling-black-man-wool-suit_613910-15883.jpg",              imageAlt: "Michael Turner - Satisfied Customer"
            },
            {
              id: "4",              name: "Christopher Lee",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-approval-gesture_1187-2502.jpg",              imageAlt: "Christopher Lee - Satisfied Customer"
            }
          ]}
          cardTitle="What Our Clients Say"
          cardTag="5-Star Rated"
          cardTagIcon={Star}
          cardAnimation="blur-reveal"
          useInvertedBackground={true}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          faqs={[
            {
              id: "1",              title: "How do I book an appointment?",              content: "You can book an appointment by calling us at (555) 123-4567 or visiting us in person. We also accept walk-ins based on availability."
            },
            {
              id: "2",              title: "What payment methods do you accept?",              content: "We accept cash, credit cards, and debit cards. We also offer digital payment options for your convenience."
            },
            {
              id: "3",              title: "How long does a typical haircut take?",              content: "Most haircuts take 30-45 minutes depending on the style and complexity. Beard grooming and shaves typically take 20-30 minutes."
            },
            {
              id: "4",              title: "Are you experienced with all hair types?",              content: "Yes, our barbers are trained to work with all hair types and textures. We specialize in creating personalized styles that suit your features."
            }
          ]}
          ctaTitle="Ready to Get a Fresh Cut?"
          ctaDescription="Book your appointment today and experience the Mo's Barber difference. Walk-ins welcome!"
          ctaButton={{
            text: "Call Us: (555) 123-4567",            href: "tel:+15551234567"
          }}
          ctaIcon={Phone}
          useInvertedBackground={false}
          animationType="blur-reveal"
          accordionAnimationType="smooth"
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Mo's Barber"
          copyrightText="© 2025 Mo's Barber. All rights reserved."
          socialLinks={[
            {
              icon: Facebook,
              href: "https://facebook.com",              ariaLabel: "Follow us on Facebook"
            },
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Follow us on Instagram"
            },
            {
              icon: Phone,
              href: "tel:+15551234567",              ariaLabel: "Call us"
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
