"use client"

import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Calendar, CheckCircle, Heart, Scissors, Sparkles, Star, Users, Zap } from "lucide-react";

export default function SalonPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="large"
      background="plain"
      cardStyle="soft-shadow"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Sharp Cuts"
          navItems={[
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" },
            { name: "Book Now", id: "cta" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Premium Haircuts. Honest Prices. Zero Ego."
          description="Trusted by West Campus students and locals for impeccable cuts, fair pricing, and a welcoming vibe. Get sharp, confident results without the pretense."
          tag="Campus Favorite"
          tagIcon={Sparkles}
          buttons={[
            { text: "Book Appointment", href: "cta" },
            { text: "View Services", href: "services" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg"
          imageAlt="Modern luxury salon interior with professional styling stations"
          ariaLabel="Hero section showcasing premium salon experience"
        />
      </div>

      <div id="trust" data-section="trust">
        <MetricCardOne
          title="Why We Stand Out"
          description="Trusted by the West Campus community for exceptional quality, honest pricing, and genuine care."
          metrics={[
            {
              id: "rating",              value: "4.6",              title: "Star Rating",              description: "From 226+ verified customer reviews",              icon: Star
            },
            {
              id: "happy",              value: "98%",              title: "Satisfaction Rate",              description: "Consistent, quality haircuts every time",              icon: CheckCircle
            },
            {
              id: "loyal",              value: "7yrs",              title: "Campus Staple",              description: "Serving students and locals since 2017",              icon: Heart
            },
            {
              id: "trusted",              value: "5K+",              title: "Happy Clients",              description: "Growing community of sharp-looking people",              icon: Users
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardFour
          title="Our Services"
          description="Clean, sharp cuts tailored to your style. Honest pricing. No hidden fees."
          tag="Transparent Pricing"
          tagIcon={Zap}
          products={[
            {
              id: "haircut",              name: "Classic Haircut",              price: "$25",              variant: "Men's cuts, precise lines, fresh fades",              imageSrc: "https://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6410.jpg",              imageAlt: "Professional men's haircut with sharp lines"
            },
            {
              id: "trim",              name: "Beard Trim & Line",              price: "$15",              variant: "Detailed beard shaping, edge work",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205857.jpg",              imageAlt: "Professional beard grooming station"
            },
            {
              id: "touch-up",              name: "Quick Touch-Up",              price: "$18",              variant: "Fade refresh, shape-up between cuts",              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149220553.jpg",              imageAlt: "Professional stylist performing quick touch-up"
            },
            {
              id: "styling",              name: "Style Consultation",              price: "$20",              variant: "Personalized cut design, styling advice included",              imageSrc: "https://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985714.jpg",              imageAlt: "Confident client showing off styled haircut"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="We Listen. We Cut. You Look Sharp."
          description="Sharp Cuts isn't just a salon—it's where West Campus comes to feel confident. Our stylists are chatty, experienced, and genuinely invested in understanding what you want. We keep our space clean, our prices fair, and our vibe welcoming. Whether you're a regular or first-timer, you'll walk out looking your absolute best."
          tag="About Our Shop"
          tagIcon={Scissors}
          buttons={[
            { text: "Meet the Team", href: "about" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149141753.jpg"
          imageAlt="Clean, welcoming salon environment with modern styling stations"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Loved by the Community"
          description="Real feedback from real clients who trust Sharp Cuts with their look."
          testimonials={[
            {
              id: "1",              name: "Marcus Chen",              handle: "@west_campus_student",              testimonial: "Finally found a place that gets clean fades and doesn't charge like a downtown boutique. Sharp Cuts is the real deal.",              imageSrc: "https://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg",              imageAlt: "Marcus Chen"
            },
            {
              id: "2",              name: "Sarah Mitchell",              handle: "@sarahm_styling",              testimonial: "The stylists actually listen to what you want. Every cut is tailored perfectly. Best value for quality in the area.",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "Sarah Mitchell"
            },
            {
              id: "3",              name: "David Torres",              handle: "@dtorres_fit",              testimonial: "Been going for three years. Consistency, professionalism, and genuine friendliness. That's Sharp Cuts.",              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1626.jpg",              imageAlt: "David Torres"
            },
            {
              id: "4",              name: "Jessica Wong",              handle: "@jessicaw_campus",              testimonial: "Clean space, friendly staff, and my hair looks incredible. Worth every penny. Highly recommended.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-cute-smiling-boy-cafe_23-2148436234.jpg",              imageAlt: "Jessica Wong"
            },
            {
              id: "5",              name: "Alex Rodriguez",              handle: "@alexrod_barber",              testimonial: "The skill here is undeniable. Sharp lines, perfect fades, and the team cares about getting it right.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-man-with-bright-smile_23-2148563438.jpg",              imageAlt: "Alex Rodriguez"
            },
            {
              id: "6",              name: "Emma Larson",              handle: "@emmalove_beauty",              testimonial: "First-time jitters gone. The vibe is welcoming, the cut is flawless, and I'm already booking my next appointment.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Emma Larson"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          speed={40}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactCenter
          tag="Ready to Look Sharp?"
          title="Your Haircut. Done Right."
          description="Book your appointment now and experience the Sharp Cuts difference. Walk-ins welcome. Located steps from West Campus."
          tagIcon={Calendar}
          useInvertedBackground="noInvert"
          inputPlaceholder="your.email@example.com"
          buttonText="Book Now"
          termsText="We'll send booking info and special offers to your email. No spam, just sharp cuts and good vibes."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Sharp Cuts"
          ariaLabel="Sharp Cuts salon footer"
        />
      </div>
    </ThemeProvider>
  );
}