"use client";

import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Palette, Scissors, Shield, Sparkles, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <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: "Testimonials", id: "testimonials" }
          ]}
          button={{ text: "Book Now", href: "contact" }}
          brandName="Animate Salon"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="Animate Salon"
          description="Elevate your beauty with expert hair styling and professional salon services. Experience transformation through artistry and precision."
          buttons={[
            { text: "Book Appointment", href: "contact" },
            { text: "Explore Services", href: "services" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="http://img.b2bpic.net/free-photo/hairstylist-using-brush-dryer_23-2147769850.jpg"
          imageAlt="Animate Salon luxury interior"
          frameStyle="card"
          mediaAnimation="slide-up"
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Transforming Hair," },
            { type: "text", content: "Transforming Lives" }
          ]}
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Story", href: "#" }
          ]}
          buttonAnimation="blur-reveal"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBorderGlow
          title="Premium Hair Services"
          description="Discover our comprehensive range of professional hair care and styling services tailored to your unique needs."
          tag="Services"
          features={[
            { icon: Scissors, title: "Expert Haircuts", description: "Precision cuts designed to complement your face shape and personal style" },
            { icon: Palette, title: "Color Treatment", description: "Professional coloring with premium products for vibrant, healthy-looking results" },
            { icon: Sparkles, title: "Styling & Blowouts", description: "Custom styling services for any occasion, from casual to formal events" },
            { icon: Zap, title: "Hair Treatments", description: "Restorative treatments to nourish, repair, and strengthen your hair" },
            { icon: Shield, title: "Scalp Care", description: "Specialized scalp treatments for health, comfort, and optimal hair growth" },
            { icon: Award, title: "Extensions", description: "High-quality hair extensions for volume, length, and transformative styles" }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="What Our Clients Say"
          description="Real stories from satisfied customers who have experienced transformation at Animate Salon"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Regular Client",              company: "Animate Salon",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg",              imageAlt: "Sarah Mitchell testimonial"
            },
            {
              id: "2",              name: "Emma Johnson",              role: "Bride",              company: "Animate Salon",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/front-view-cute-girl-looking-away_23-2148436134.jpg",              imageAlt: "Emma Johnson testimonial"
            },
            {
              id: "3",              name: "Jessica Chen",              role: "New Client",              company: "Animate Salon",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/blond-business-woman-blue-shirt_23-2148095792.jpg",              imageAlt: "Jessica Chen testimonial"
            },
            {
              id: "4",              name: "Rachel Adams",              role: "Regular Visitor",              company: "Animate Salon",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg",              imageAlt: "Rachel Adams testimonial"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardSix
          title="Meet Our Expert Team"
          description="Talented stylists dedicated to creating the perfect look for you"
          tag="Our Stylists"
          members={[
            {
              id: "1",              name: "Maria Rossi",              role: "Lead Stylist & Color Specialist",              imageSrc: "http://img.b2bpic.net/free-photo/two-hairstylers-posing-standing-modern-spacy-beaty-salon_651396-986.jpg?_wi=1",              imageAlt: "Maria Rossi, Lead Stylist"
            },
            {
              id: "2",              name: "Jessica Wei",              role: "Senior Stylist",              imageSrc: "http://img.b2bpic.net/free-photo/two-hairstylers-posing-standing-modern-spacy-beaty-salon_651396-986.jpg?_wi=2",              imageAlt: "Jessica Wei, Senior Stylist"
            },
            {
              id: "3",              name: "Amanda Brooks",              role: "Specialist Stylist",              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: "Amanda Brooks, Specialist Stylist"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get in Touch"
          title="Ready for Your Transformation?"
          description="Book your appointment today and discover why clients love Animate Salon. Our expert stylists are ready to create your perfect look."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg"
          imageAlt="Animate Salon contact"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Now"
          termsText="We'll contact you shortly to confirm your appointment. Your privacy is important to us."
          tagAnimation="blur-reveal"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSimple
          columns={[
            {
              title: "Navigate",              items: [
                { label: "Home", href: "#hero" },
                { label: "About", href: "#about" },
                { label: "Services", href: "#services" }
              ]
            },
            {
              title: "Services",              items: [
                { label: "Haircuts", href: "#services" },
                { label: "Coloring", href: "#services" },
                { label: "Styling", href: "#services" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "#contact" },
                { label: "Book Now", href: "#contact" },
                { label: "Follow Us", href: "#" }
              ]
            }
          ]}
          bottomLeftText="© 2025 Animate Salon. All rights reserved."
          bottomRightText="Crafted with care for your beauty"
        />
      </div>
    </ThemeProvider>
  );
}
