"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactText from '@/components/sections/contact/ContactText';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          navItems={[{name: "Services", id: "services"}, {name: "Pricing", id: "pricing"}, {name: "Team", id: "team"}, {name: "Reviews", id: "testimonials"}, {name: "FAQ", id: "faq"}]}
          button={{text: "Book Now", href: "contact"}}
          brandName="Royal Parlor"
          className="relative z-50"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogo 
          logoText="Royal Parlor"
          description="Experience the art of grooming where tradition meets modern style."
          buttons={[{text: "Book Your Cut", href: "#contact"}, {text: "Our Services", href: "#services"}]}
          imageSrc="https://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg"
          imageAlt="Classic barbershop interior with empty chairs and barber tools"
          showDimOverlay={true}
          ariaLabel="Hero section with Royal Parlor logo and barbershop background"
          className="min-h-screen relative flex items-center justify-center"
          logoClassName="text-[10vw] md:text-[8vw] lg:text-[6vw] font-bold tracking-tight"
          descriptionClassName="max-w-xl text-center text-lg md:text-xl"
          buttonContainerClassName="flex-col sm:flex-row gap-4"
          buttonClassName="px-8 py-3"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout 
          title="About Royal Parlor"
          description="At Royal Parlor, we blend classic barbering techniques with contemporary styles to provide an unparalleled grooming experience. Our skilled barbers are dedicated to precision, artistry, and creating a relaxed atmosphere where every client feels like royalty."
          bulletPoints={[{title: "Expert Barbers", description: "Our team consists of highly trained and experienced barbers."}, {title: "Premium Products", description: "We use only the finest grooming products for exceptional results."}, {title: "Relaxing Atmosphere", description: "Enjoy a comfortable and inviting environment during your visit."}]}
          imageSrc="https://img.b2bpic.net/free-photo/professional-barber-with-scissors-styling-old-man-hair_23-2148181945.jpg"
          imageAlt="Barber cutting a client's hair in a traditional barbershop setting"
          mediaAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          imagePosition="right"
          tag="Our Story"
          containerClassName="py-16 md:py-24"
          textBoxClassName="order-2 md:order-1"
          mediaWrapperClassName="order-1 md:order-2"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardEight 
          title="Our Signature Services"
          description="Discover the range of services designed to perfect your look."
          features={[{id: 1, title: "The Royal Cut", description: "Precision haircut tailored to your style, includes wash and finish.", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg", imageAlt: "Barber giving a classic fade haircut"}, {id: 2, title: "Master Beard Trim", description: "Expert shaping, trimming, and conditioning for a flawless beard.", imageSrc: "https://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg", imageAlt: "Man receiving a professional beard trim"}, {id: 3, title: "Traditional Hot Shave", description: "Experience the ultimate in relaxation with a luxurious hot towel shave.", imageSrc: "https://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148122002.jpg", imageAlt: "Barber performing a traditional hot towel shave"}]}
          textboxLayout="default"
          useInvertedBackground={false}
          mediaContainerClassName="h-[250px] md:h-[400px] lg:h-[500px]"
          cardClassName="backdrop-blur-sm bg-card/70"
          containerClassName="py-16 md:py-24"
          mediaClassName="object-cover"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight 
          title="Our Pricing"
          description="Find the perfect service for your grooming needs."
          plans={[{id: "cut", badge: "Classic", price: "$40", subtitle: "A fresh, precision haircut", buttons: [{text: "Book Now", href: "#contact"}], features: ["Haircut & Style", "Wash & Rinse", "Hot Towel Finish"]}, {id: "cut-beard", badge: "Royal Combo", price: "$65", subtitle: "The ultimate grooming experience", buttons: [{text: "Book Now", href: "#contact"}], features: ["Haircut & Style", "Precision Beard Trim", "Hot Towel Finish", "Premium Product Application"]}, {id: "shave", badge: "Signature", price: "$35", subtitle: "Luxurious straight razor shave", buttons: [{text: "Book Now", href: "#contact"}], features: ["Hot Towel Prep", "Straight Razor Shave", "Aftershave Treatment"]}]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-16 md:py-24"
          cardClassName="shadow-lg bg-background"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix 
          title="Meet Our Barbers"
          description="Our team of expert barbers are dedicated to perfecting your style."
          members={[{id: "john", name: "John Davis", role: "Master Barber", imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg", imageAlt: "Portrait of John Davis, a master barber"}, {id: "mike", name: "Mike Chen", role: "Senior Stylist", imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg", imageAlt: "Portrait of Mike Chen, a senior stylist"}]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-16 md:py-24"
          cardClassName="bg-card/80 backdrop-blur-sm border border-accent/20"
          nameClassName="text-2xl font-semibold"
          roleClassName="text-foreground/70"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix 
          title="What Our Clients Say"
          description="Hear from those who've experienced the Royal Parlor difference."
          testimonials={[{id: "1", name: "Sarah L.", handle: "Regular Client", testimonial: "Royal Parlor is simply the best barbershop in town. The attention to detail is unmatched, and I always leave feeling fresh and confident. Highly recommended!", imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "Client Sarah L."}, {id: "2", name: "David K.", handle: "Satisfied Customer", testimonial: "Finally, a barbershop that understands classic grooming. The hot towel shave is a game-changer. I won't go anywhere else.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "Client David K."}, {id: "3", name: "Emily R.", handle: "First-timer", testimonial: "My first visit to Royal Parlor exceeded all expectations. The staff were friendly, the atmosphere was great, and my haircut was perfect. I'll definitely be back!", imageSrc: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg", imageAlt: "Client Emily R."}, {id: "4", name: "Chris M.", handle: "Loyal Patron", testimonial: "Consistently excellent service and a fantastic vibe. Royal Parlor always delivers a top-notch experience. Truly a cut above the rest.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Client Chris M."}, {id: "5", name: "Alex P.", handle: "Happy Customer", testimonial: "The best haircut I've had in years. The atmosphere is top-notch and the barbers are true professionals. Highly recommend this place!", imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "Client Alex P."}, {id: "6", name: "Jessica T.", handle: "Regular Client", testimonial: "I love coming to Royal Parlor. The team is so friendly and skilled. It's more than just a haircut, it's a great experience.", imageSrc: "https://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg", imageAlt: "Client Jessica T."}]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-16 md:py-24"
          cardClassName="bg-card/80 border border-accent/20 shadow-sm"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble 
          title="Frequently Asked Questions"
          description="Got questions? We've got answers."
          faqs={[{id: "1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure you get your preferred time and barber."}, {id: "2", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and cash. Digital payments like Apple Pay and Google Pay are also available."}, {id: "3", title: "Do you offer gift cards?", content: "Yes, gift cards are available for purchase in-store and can be used for any service or product."}, {id: "4", title: "What is your cancellation policy?", content: "We kindly ask for at least 24 hours' notice for cancellations or rescheduling. This allows us to offer the slot to other clients."}]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          containerClassName="py-16 md:py-24"
          faqsContainerClassName="bg-card/80 border border-accent/20 shadow-sm rounded-soft"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText 
          text="Ready for a fresh look? Book your next appointment at Royal Parlor today."
          animationType="entrance-slide"
          buttons={[{text: "Book Now", href: "https://example.com/booking"}]}
          background={{variant: "plain"}}
          useInvertedBackground={false}
          className="py-16 md:py-24"
          contentClassName="bg-card shadow-lg rounded-soft border border-accent/20"
          textClassName="text-3xl md:text-4xl font-bold tracking-tight"
        />
      </div>

    </ThemeProvider>
  );
}
