"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Wrench, Volume2, Radio, Package, Music, Zap } from "lucide-react";

const navItems = [
  { name: "Home", id: "home" },
  { name: "Shop", id: "shop" },
  { name: "Services", id: "services" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" }
];

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="medium"
      background="blurBottom"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple navItems={navItems} brandName="Sadek Music" />
      </div>

      <div id="services-intro" data-section="services-intro">
        <div className="mx-auto px-4 md:px-6">
          <FeatureBento
            title="Professional Music Services"
            description="Expert technicians dedicated to keeping your instruments in perfect condition"
            tag="🔧 Expert Service"
            tagIcon={Wrench}
            animationType="slide-up"
            features={[
              {
                title: "Instrument Setup & Repair",
                description: "Professional maintenance, repairs, and adjustments for all instruments",
                bentoComponent: "reveal-icon",
                icon: Wrench
              },
              {
                title: "Guitar Setup",
                description: "Action adjustment, fret leveling, neck relief, and complete setups",
                bentoComponent: "reveal-icon",
                icon: Music
              },
              {
                title: "String Replacement",
                description: "Expert string installation and winding for guitars, basses, and more",
                bentoComponent: "reveal-icon",
                icon: Zap
              },
              {
                title: "Audio System Consultation",
                description: "Professional advice on selecting and setting up audio equipment",
                bentoComponent: "reveal-icon",
                icon: Volume2
              },
              {
                title: "Live Sound Support",
                description: "Sound engineering and equipment rental for events and performances",
                bentoComponent: "reveal-icon",
                icon: Radio
              },
              {
                title: "Custom Orders",
                description: "Special requests, customization, and bespoke instrument services",
                bentoComponent: "reveal-icon",
                icon: Package
              }
            ]}
            textboxLayout="default"
            useInvertedBackground={false}
            buttons={[
              { text: "Book Service Now", href: "/contact" }
            ]}
          />
        </div>
      </div>

      <div id="services-contact" data-section="services-contact">
        <div className="mx-auto px-4 md:px-6">
          <ContactText
            text="Need professional music services? Contact our expert technicians today. We're ready to help with repairs, setup, consultations, and custom orders. Visit us in downtown Dubai or call for more information."
            background={{ variant: "radial-gradient" }}
            useInvertedBackground={false}
            buttons={[
              { text: "📞 Call Service", href: "tel:+971-4-XXXXXXX" },
              { text: "💬 WhatsApp Support", href: "https://wa.me/971XXXXXXXXX" },
              { text: "📍 Visit Store", href: "/contact" }
            ]}
          />
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="mx-auto px-4 md:px-6">
          <FooterLogoReveal
            logoText="Sadek Music"
            leftLink={{ text: "Privacy Policy", href: "/" }}
            rightLink={{ text: "Contact Us", href: "/contact" }}
          />
        </div>
      </div>
    </ThemeProvider>
  );
}