"use client";

import { Instagram, Linkedin, Sparkles } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterCard from "@/components/sections/footer/FooterCard";

export default function SalonPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Tria"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Gallery", id: "gallery" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Book Now",            href: "#contact"
          }}
          animateOnLoad={true}
          navItemClassName="text-foreground font-light tracking-wide"
          buttonClassName="bg-primary-cta text-primary-cta-text hover:opacity-90 transition-opacity"
          buttonTextClassName="font-light"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Elevate Your Presence"
          description="Experience luxury hair styling in a minimalist sanctuary. Premium cuts, color expertise, and personalized care in our Scandinavian-inspired salon."
          tag="Premium Hair Care"
          tagIcon={Sparkles}
          tagAnimation="blur-reveal"
          background={{ variant: "plain" }}
          imageSrc="http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108777.jpg"
          imageAlt="Tria luxury salon interior with minimalist design"
          mediaAnimation="blur-reveal"
          testimonials={[
            {
              name: "Claire Morrison",              handle: "Fashion Director",              testimonial: "Tria transformed my hair. The expertise and attention to detail are unmatched. It's not just a salon, it's an experience.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=1"
            },
            {
              name: "James Chen",              handle: "Creative Professional",              testimonial: "The minimalist aesthetic and exceptional service make Tria my go-to. Every visit is perfectly curated.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              name: "Sofia Lindström",              handle: "Style Editor",              testimonial: "Elegant, sophisticated, and precisely executed. Tria sets the standard for luxury hair salons.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg?_wi=2"
            }
          ]}
          testimonialRotationInterval={5000}
          buttons={[
            {
              text: "Book Now",              href: "#contact"
            }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          titleClassName="font-light tracking-tight"
          descriptionClassName="font-light text-foreground/85"
          mediaWrapperClassName="rounded-2xl overflow-hidden"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Where Craftsmanship Meets Minimalism"
          description="Tria is a luxury salon founded on the principles of Scandinavian design and industrial modern aesthetics. We believe in clean lines, purposeful spaces, and exceptional expertise. Every element—from our serene interior to our personalized consultations—reflects our commitment to refined elegance and transformative hair care."
          tag="Our Philosophy"
          tagAnimation="blur-reveal"
          imageSrc="http://img.b2bpic.net/free-photo/empty-chairs-modern-brick-wall-room_482257-119333.jpg?_wi=1"
          imageAlt="Tria salon sophisticated design and aesthetic"
          buttons={[
            {
              text: "Explore Services",              href: "#services"
            }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
          titleClassName="font-light text-4xl"
          descriptionClassName="font-light text-foreground/80"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardSixteen
          title="Our Signature Services"
          description="Curated hair services designed for the discerning client. From precision cutting to sophisticated color work, we deliver excellence with understated elegance."
          tag="Expertise"
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          negativeCard={{
            items: [
              "Generic salon experiences",              "Rushed appointments",              "One-size-fits-all approaches",              "Mass-market services"
            ]
          }}
          positiveCard={{
            items: [
              "Personalized consultations",              "Unhurried, premium service",              "Bespoke hair solutions",              "Expert craftsmanship",              "Luxury products only",              "Minimalist sanctuary setting"
            ]
          }}
        />
      </div>

      <div id="gallery" data-section="gallery">
        <ProductCardThree
          title="Editorial Gallery"
          description="Browse our latest work. Each piece reflects our dedication to precision, artistry, and transformative style."
          tag="Portfolio"
          tagAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="blur-reveal"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              name: "Luxe Brunette Balayage",              price: "View Details",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-attitude-white_158595-5502.jpg",              imageAlt: "Luxury brunette balayage styling"
            },
            {
              id: "2",              name: "Precision Geometric Cut",              price: "View Details",              imageSrc: "http://img.b2bpic.net/free-photo/woman-styling-her-hair-saloon_107420-12141.jpg",              imageAlt: "Modern geometric hair cut"
            },
            {
              id: "3",              name: "Sleek Blonde Highlight",              price: "View Details",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-81883.jpg",              imageAlt: "Elegant blonde highlighting technique"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Tria redefined what I expect from a salon. The calm atmosphere, expert stylists, and meticulous attention to every detail create an experience that transcends hair care. It's truly transformative."
          rating={5}
          author="Emma Richardson, Creative Director"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",              alt: "Emma Richardson"
            },
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client"
            },
            {
              src: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg",              alt: "Client"
            },
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client"
            }
          ]}
          ratingAnimation="blur-reveal"
          avatarsAnimation="blur-reveal"
          useInvertedBackground={false}
          testimonialClassName="font-light text-2xl text-foreground/90"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Reserve Your Experience"
          description="Connect with Tria to book your appointment. Share your vision, and let our expert stylists craft your perfect look in our serene sanctuary."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Email Address",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: true
            },
            {
              name: "service",              type: "text",              placeholder: "Preferred Service",              required: true
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your hair goals and any styling preferences...",            rows: 5,
            required: false
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/empty-chairs-modern-brick-wall-room_482257-119333.jpg?_wi=2"
          imageAlt="Tria salon booking experience"
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          buttonText="Request Appointment"
          titleClassName="font-light text-3xl"
          descriptionClassName="font-light text-foreground/80"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="Tria"
          copyrightText="© 2025 Tria Salon. Luxury Hair Care & Design."
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com/triasalon",              ariaLabel: "Instagram"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/tria-salon",              ariaLabel: "LinkedIn"
            }
          ]}
          logoClassName="font-light text-xl tracking-widest"
          copyrightTextClassName="font-light text-foreground/60 text-sm"
        />
      </div>
    </ThemeProvider>
  );
}
