"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitTestimonial from "@/components/sections/hero/HeroSplitTestimonial";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
import TeamCardTen from "@/components/sections/team/TeamCardTen";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { Award, HelpCircle, MessageSquare, Sparkles, Star, ThumbsUp, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="AMOUR HAIR"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Now", href: "#contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Transform Your Look at AMOUR HAIR"
          description="Experience professional hair styling and beauty services in Košice. We specialize in expert coloring, precision cuts, and personalized treatments that bring out your best self."
          tag="Premium Beauty Salon"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-photo/woman-styling-her-hair-saloon_107420-12141.jpg"
          imageAlt="Professional hair salon interior"
          mediaAnimation="opacity"
          imagePosition="right"
          testimonials={[
            {
              name: "Michaela Bodnárová",              handle: "Regular Client",              testimonial: "Janka provided exceptional service with amazing balayage work. My hair has never looked better!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg"
            },
            {
              name: "Zdenka Pechová",              handle: "Satisfied Customer",              testimonial: "Beautiful salon, professional staff, and impeccable cleanliness. The gel manicure work exceeded expectations.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg"
            },
            {
              name: "Tímea Kovácsová",              handle: "Returning Guest",              testimonial: "The stylist skillfully fixed my hair and gave me the most beautiful color. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg"
            }
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            { text: "Book Appointment", href: "#contact" },
            { text: "Learn More", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Welcome to AMOUR HAIR"
          description={[
            "AMOUR HAIR is a premier beauty salon located in Košice, Slovakia, dedicated to providing exceptional hair and aesthetic services. With a team of highly skilled professionals, we pride ourselves on creating a welcoming atmosphere where every client feels valued and pampered.",            "Our commitment to excellence is reflected in our comprehensive range of services, from precision haircuts and vibrant coloring to luxurious treatments and professional styling. With 99 satisfied reviews and a 4.7-star rating, we've earned the trust of our community through consistent quality and personalized attention.",            "We believe that true beauty comes from feeling confident and cared for. That's why we invest in the latest techniques, premium products, and ongoing professional development to ensure our clients always receive the best possible experience."
          ]}
          buttons={[
            { text: "View Our Services", href: "#services" }
          ]}
          buttonAnimation="slide-up"
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSixteen
          title="Why Choose AMOUR HAIR"
          description="Experience the difference between good and exceptional beauty services. Here's what sets us apart from other salons."
          tag="Our Advantages"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="slide-up"
          negativeCard={{
            items: [
              "Inexperienced staff",              "Unprofessional results",              "Poor client communication",              "Uncomfortable atmosphere",              "Damage to hair health"
            ]
          }}
          positiveCard={{
            items: [
              "Highly trained professionals with years of experience",              "Outstanding results every time",              "Personalized consultation and attention",              "Welcoming and relaxing environment",              "Premium products and cutting-edge techniques",              "Consistent 4.7-star client satisfaction"
            ]
          }}
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardOne
          title="Our Success by Numbers"
          description="Trusted by hundreds of satisfied clients in Košice"
          tag="Proven Track Record"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          metrics={[
            {
              id: "1",              value: "99",              title: "Reviews",              description: "Happy and satisfied clients",              icon: ThumbsUp
            },
            {
              id: "2",              value: "4.7",              title: "Rating",              description: "Consistent excellence",              icon: Star
            },
            {
              id: "3",              value: "500+",              title: "Clients",              description: "Served in Košice",              icon: Users
            },
            {
              id: "4",              value: "10+",              title: "Years",              description: "Professional experience",              icon: Award
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Clients Say"
          description="Real experiences from our valued clients at AMOUR HAIR"
          tag="Client Testimonials"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          textboxLayout="default"
          testimonials={[
            {
              id: "1",              name: "Michaela Bodnárová",              date: "Date: 2 years ago",              title: "Outstanding balayage and professional care!",              quote: "Janka provided exceptional service with amazing balayage work. My hair looked absolutely beautiful and wasn't damaged at all. I left the salon extremely happy and satisfied.",              tag: "Hair Coloring",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              avatarAlt: "Michaela",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg"
            },
            {
              id: "2",              name: "Zdenka Pechová",              date: "Date: 3 years ago",              title: "Beautiful salon with professional staff",              quote: "The salon is gorgeous, professional, and very clean with tasteful decoration. The manicure work by Mirka Galova exceeded my expectations.",              tag: "Nail Services",              avatarSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              avatarAlt: "Zdenka",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg"
            },
            {
              id: "3",              name: "Tímea Kovácsová",              date: "Date: 8 months ago",              title: "Skillful hair repair and beautiful color",              quote: "The hairstylist expertly repaired my hair damage with a beautiful color and perfect cut. Professional, fast, and highly recommended.",              tag: "Hair Cutting",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              avatarAlt: "Tímea",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg"
            },
            {
              id: "4",              name: "Kristina Haľková",              date: "Date: 2 years ago",              title: "Perfect eyelash extensions",              quote: "I was completely satisfied with the 3D eyelash extensions and the excellent work by Ms. Nikolka. First-time experience was perfect!",              tag: "Eyelash Services",              avatarSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",              avatarAlt: "Kristina",              imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg"
            },
            {
              id: "5",              name: "Haňka",              date: "Date: 2 years ago",              title: "Excellent manicure and pleasant atmosphere",              quote: "Very satisfied with the manicure work and the pleasant atmosphere in the salon. Perfect timing and great experience overall.",              tag: "Nail Services",              avatarSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              avatarAlt: "Haňka",              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg"
            },
            {
              id: "6",              name: "Mária Kovalčíková",              date: "Date: 2 years ago",              title: "Warm welcome and beautiful styling",              quote: "Even without an appointment, the team welcomed me and provided beautiful haircut services. Very grateful for the wonderful experience.",              tag: "Hair Cutting",              avatarSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg",              avatarAlt: "Mária",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-attractive-woman-showing-thumb-up-outdoors_1262-12526.jpg"
            }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTen
          title="Meet Our Expert Team"
          tag="Professional Stylists"
          tagAnimation="slide-up"
          membersAnimation="slide-up"
          members={[
            {
              id: "1",              name: "Janka",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-caucasian-woman-black-medical-uniform-standing-studio-competent-female-cosmetologist-holding-arms-crossed-grey-background_7502-9241.jpg",              imageAlt: "Janka - Senior Hair Stylist"
            },
            {
              id: "2",              name: "Mirka Galová",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-caucasian-woman-black-medical-uniform-standing-studio-competent-female-cosmetologist-holding-arms-crossed-grey-background_7502-9241.jpg",              imageAlt: "Mirka Galová - Nail Specialist"
            },
            {
              id: "3",              name: "Nikolka",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-beautiful-caucasian-woman-black-medical-uniform-standing-studio-competent-female-cosmetologist-holding-arms-crossed-grey-background_7502-9241.jpg",              imageAlt: "Nikolka - Eyelash & Makeup Artist"
            }
          ]}
          memberVariant="card"
          useInvertedBackground={false}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services and booking process"
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I book an appointment?",              content: "You can book an appointment through our contact form, by phone, or by visiting our salon in person. We offer convenient scheduling and try to accommodate your preferred time whenever possible."
            },
            {
              id: "2",              title: "What is your cancellation policy?",              content: "We request at least 24 hours notice for cancellations. This allows us to offer the time slot to other clients and ensures the best service for everyone."
            },
            {
              id: "3",              title: "Do you offer color correction services?",              content: "Yes, we specialize in color correction and repair. Our experienced stylists can help fix color mistakes and restore hair health. Consultation is recommended for best results."
            },
            {
              id: "4",              title: "Are your products professional quality?",              content: "We use only premium, professional-grade products for all our services. Our team carefully selects products that deliver excellent results while protecting hair health."
            },
            {
              id: "5",              title: "Do you offer bridal or special event styling?",              content: "Yes, we provide beautiful bridal and special event styling services. Please book a consultation in advance to discuss your vision and ensure perfect results for your special day."
            },
            {
              id: "6",              title: "Is the salon accessible and clean?",              content: "Our salon maintains the highest cleanliness standards. The space is beautifully decorated, comfortable, and welcomes all clients. We pride ourselves on creating a relaxing, professional environment."
            }
          ]}
          animationType="smooth"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Ready to transform your look? Contact us today to book your appointment at AMOUR HAIR. We're here to answer any questions and help you schedule the perfect service."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true },
            { name: "phone", type: "tel", placeholder: "Your Phone Number", required: true },
            { name: "service", type: "text", placeholder: "Service Interested In", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your desired look or ask any questions...",            rows: 5,
            required: true
          }}
          buttonText="Book Now"
          imageSrc="http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg"
          imageAlt="AMOUR HAIR Salon Interior"
          mediaAnimation="opacity"
          mediaPosition="right"
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="AMOUR HAIR"
          columns={[
            {
              title: "Services",              items: [
                { label: "Hair Cutting", href: "#services" },
                { label: "Hair Coloring", href: "#services" },
                { label: "Styling", href: "#services" },
                { label: "Treatments", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Team", href: "#team" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "FAQ", href: "#faq" },
                { label: "Booking", href: "#contact" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 AMOUR HAIR. All rights reserved. Beauty salon in Košice, Slovakia."
        />
      </div>
    </ThemeProvider>
  );
}
