"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterBase from '@/components/sections/footer/FooterBase';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="medium"
      background="noise"
      cardStyle="gradient-mesh"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Hair Studio 168"
          navItems={[
            { name: "Home", id: "#home" },
            { name: "About", id: "#about" },
            { name: "Services", id: "#services" },
            { name: "Gallery", id: "#gallery" },
            { name: "Reviews", id: "#reviews" },
            { name: "Book Now", id: "#contact" }
          ]}
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1daoxj"
          logoAlt="Hair Studio 168 Logo"
        />
      </div>
      <div id="home" data-section="home">
        <HeroSplit
          title="Professional Hair Styling for Your Best Look"
          description="Premium Haircuts, Coloring, Perming, and Hair Care Services for men, women, students, office workers, and families. Experience luxury and care in Nonthaburi."
          background={{
            variant: "plain"
          }}
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "View Services", href: "#services" }
          ]}
          mediaAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/front-view-expensive-barber-shop-chair_23-2148257054.jpg"
          imageAlt="Modern hair salon interior with professional styling"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>
      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Our Story: The Art of Hair Studio 168" }
          ]}
          buttons={[
            { text: "Learn More", href: "#" }
          ]}
          useInvertedBackground={false}
        />
      </div>
      <div id="services" data-section="services">
        <ProductCardOne
          title="Our Premium Hair Services"
          description="Discover a full range of luxurious hair care services tailored for your unique style. From precision cuts to vibrant colors and revitalizing treatments, our expert stylists are here to transform your look."
          products={[
            { id: "mens-haircut", name: "Men's Haircut", price: "Starting from 500 THB", imageSrc: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186495.jpg", imageAlt: "Professional men's haircut" },
            { id: "womens-haircut", name: "Women's Haircut", price: "Starting from 700 THB", imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg", imageAlt: "Stylish women's haircut" },
            { id: "hair-coloring", name: "Hair Coloring", price: "Starting from 1500 THB", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167366.jpg", imageAlt: "Vibrant hair coloring" },
            { id: "hair-perm", name: "Hair Perm", price: "Starting from 2000 THB", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-red-haired-woman-sitts-green-background_1304-3629.jpg", imageAlt: "Modern hair perm" },
            { id: "hair-straightening", name: "Hair Straightening", price: "Starting from 2500 THB", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-redhead-ideal-straight-hair_633478-277.jpg", imageAlt: "Smooth hair straightening" },
            { id: "hair-treatment", name: "Hair Treatment", price: "Starting from 1000 THB", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108839.jpg", imageAlt: "Deep hair treatment" },
            { id: "hair-spa", name: "Hair Spa", price: "Starting from 1200 THB", imageSrc: "http://img.b2bpic.net/free-photo/spa-concept-with-relaxed-woman-with-long-dark-hair_23-2147821172.jpg", imageAlt: "Relaxing hair spa" },
            { id: "styling", name: "Styling & Special Occasion Hair", price: "Starting from 800 THB", imageSrc: "http://img.b2bpic.net/free-photo/close-view-lovely-face-young-girl-which-have-brunette-curly-hair-cute-makeup-holding-bridal-flowers-looking-down-while-smelling-it_8353-12351.jpg", imageAlt: "Elegant hair styling" }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="why-choose-us" data-section="why-choose-us">
        <FeatureCardSix
          title="Why Hair Studio 168 is Your Best Choice"
          description="We are dedicated to providing an unparalleled salon experience, blending luxury, expertise, and personalized care to achieve your perfect look."
          features={[
            { title: "Professional Stylists", description: "Our team of highly trained and experienced stylists are masters of their craft, staying updated with the latest trends and techniques.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-expensive-barber-shop-chair_23-2148257054.jpg", imageAlt: "Professional stylist working on client hair" },
            { title: "Premium Products", description: "We exclusively use top-tier, quality hair care products to ensure the best results and maintain the health and vitality of your hair.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108839.jpg", imageAlt: "Premium hair products displayed" },
            { title: "Modern Equipment", description: "Equipped with state-of-the-art tools and technology, our salon provides efficient, safe, and advanced hair services.", imageSrc: "http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059673.jpg", imageAlt: "Modern salon equipment" },
            { title: "Excellent Customer Reviews", description: "With a 4.4/5 rating from over 100 happy customers, our commitment to satisfaction is evident in every review.", imageSrc: "http://img.b2bpic.net/free-photo/successful-business-woman_1328-2322.jpg", imageAlt: "Happy client smiling" }
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="gallery" data-section="gallery">
        <BlogCardThree
          title="Our Transformations & Studio"
          description="Explore our stunning portfolio of before & after hair transformations, glimpse inside our luxurious salon, and discover our latest styling creations."
          blogs={[
            { id: "gallery-1", category: "Before & After", title: "Radiant Blonde Balayage", excerpt: "A beautiful transformation featuring a seamless blonde balayage, adding brightness and dimension.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-with-long-hair-bangs-with-nude-makeup-multi-colored-bright-fluffy-sweater-beige-background-smiles-cheerfully_343596-7906.jpg", imageAlt: "Before and after balayage transformation", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/successful-business-woman_1328-2322.jpg", date: "Oct 26, 2023" },
            { id: "gallery-2", category: "Before & After", title: "Voluminous Perm Rejuvenation", excerpt: "Witness the magic of a fresh perm, bringing life and bounce to previously flat hair.", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-with-bright-manicure-running-through-long-wavy-blond-hair_633478-2056.jpg", imageAlt: "Before and after perm transformation", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/wardrobe-renovation-winter_23-2149183914.jpg", date: "Nov 15, 2023" },
            { id: "gallery-3", category: "Salon Interior", title: "A Glimpse Inside Our Sanctuary", excerpt: "Step into our serene and elegant salon, designed for your comfort and ultimate relaxation.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102198.jpg", imageAlt: "Interior view of Hair Studio 168", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/blond-ethnic-coworkers-doing-selfie-workplace_23-2148180695.jpg", date: "Dec 01, 2023" },
            { id: "gallery-4", category: "Styling Portfolio", title: "Elegant Bridal Updo", excerpt: "Exquisite bridal hair styling for that special day, combining elegance with a touch of modern flair.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-model-posing_1122-488.jpg", imageAlt: "Elegant bridal updo hairstyle", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/stressed-young-female-student-wearing-headphones-bandana-neck-backpack-holding-open-note-book-head-looking-camera-screaming-isolated-olive-green-background_141793-137014.jpg", date: "Jan 10, 2024" },
            { id: "gallery-5", category: "Styling Portfolio", title: "Bold & Edgy Pixie Cut", excerpt: "A fierce and fashionable pixie cut, showcasing precision and a confident, modern aesthetic.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-girl-with-gray-short-hairstyle-gray-background-she-wears-white-dress-light-makeup-bangs-covers-half-face-her-hand-touches-face_197531-350.jpg", imageAlt: "Bold and edgy pixie haircut", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/lady-with-beautiful-makeup-playing-her-blonde-hair-attractive-happy-woman-silver-top-widely-smiling-posing-against-window_197531-29165.jpg", date: "Feb 20, 2024" },
            { id: "gallery-6", category: "Styling Portfolio", title: "Vibrant Creative Coloring", excerpt: "Unleash your personality with a vibrant and artistic hair color creation, expertly applied.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-emo-boy-playing-guitar_23-2149542283.jpg", imageAlt: "Vibrant creative hair coloring", authorName: "Hair Studio 168 Team", authorAvatar: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg", date: "Mar 05, 2024" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="reviews" data-section="reviews">
        <TestimonialCardSixteen
          title="What Our Clients Say About Us"
          description="Our passion is your perfect hair. Hear from over 100 satisfied customers who trust Hair Studio 168 for their styling and care needs."
          testimonials={[
            { id: "1", name: "Nisa S.", role: "Office Worker", company: "Bangkok", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/successful-business-woman_1328-2322.jpg", imageAlt: "Nisa S. client testimonial" },
            { id: "2", name: "Pimchanok K.", role: "Student", company: "Nonthaburi", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/wardrobe-renovation-winter_23-2149183914.jpg", imageAlt: "Pimchanok K. client testimonial" },
            { id: "3", name: "Anuwat T.", role: "Entrepreneur", company: "Pak Kret", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-ethnic-coworkers-doing-selfie-workplace_23-2148180695.jpg", imageAlt: "Anuwat T. client testimonial" },
            { id: "4", name: "Chaiyot W.", role: "Family Man", company: "Nonthaburi", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stressed-young-female-student-wearing-headphones-bandana-neck-backpack-holding-open-note-book-head-looking-camera-screaming-isolated-olive-green-background_141793-137014.jpg", imageAlt: "Chaiyot W. client testimonial" },
            { id: "5", name: "Rachaya P.", role: "Marketing Director", company: "Nonthaburi", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lady-with-beautiful-makeup-playing-her-blonde-hair-attractive-happy-woman-silver-top-widely-smiling-posing-against-window_197531-29165.jpg", imageAlt: "Rachaya P. client testimonial" },
            { id: "6", name: "Sopon B.", role: "Local Resident", company: "Ngamwongwan", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg", imageAlt: "Sopon B. client testimonial" }
          ]}
          kpiItems={[
            { value: "4.4/5", label: "Customer Rating" },
            { value: "100+", label: "Happy Clients" },
            { value: "15+", label: "Years Experience" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactText
          title="Visit Us or Book Your Appointment"
          text="Hair Studio 168 provides professional hair styling in a luxurious, welcoming atmosphere. We are conveniently located at Grand Plaza Ngamwongwan, opposite The Mall Ngamwongwan, Nonthaburi, Thailand. Book your personalized consultation today! Our expert team is ready to help you achieve your best look.\n\nOpening Hours: Mon-Sat: 10AM - 8PM, Sun: Closed"
          background={{
            variant: "plain"
          }}
          buttons={[
            { text: "Book Appointment", href: "tel:+66802879899" },
            { text: "Call Us: +66 80 287 9899", href: "tel:+66802879899" },
            { text: "WhatsApp Us", href: "https://wa.me/66802879899" },
            { text: "Line Chat", href: "https://line.me/ti/p/@hairstudio168" },
            { text: "Get Directions", href: "https://maps.app.goo.gl/gpm9hV3pA8Vq24X1A" }
          ]}
          useInvertedBackground={true}
          animationType="entrance-slide"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Hair Studio 168"
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1daoxj"
          logoAlt="Hair Studio 168 Logo"
          columns={[
            { title: "Quick Links", items: [{ label: "Home", href: "#home" }, { label: "About Us", href: "#about" }, { label: "Services", href: "#services" }, { label: "Gallery", href: "#gallery" }, { label: "Reviews", href: "#reviews" }] },
            { title: "Contact Us", items: [{ label: "Phone: +66 80 287 9899", href: "tel:+66802879899" }, { label: "Grand Plaza Ngamwongwan", href: "https://maps.app.goo.gl/gpm9hV3pA8Vq24X1A" }, { label: "Nonthaburi, Thailand", href: "https://maps.app.goo.gl/gpm9hV3pA8Vq24X1A" }, { label: "Opening Hours: Mon-Sat: 10AM - 8PM", href: "#" }, { label: "Sunday: Closed", href: "#" }] },
            { title: "Follow Us", items: [{ label: "Facebook", href: "https://facebook.com/hairstudio168" }, { label: "Line", href: "https://line.me/ti/p/@hairstudio168" }] }
          ]}
          copyrightText="© 2024 Hair Studio 168 | All Rights Reserved"
        />
      </div>
    </ThemeProvider>
  );
}
