"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function ServicesPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="small"
        sizing="largeSizeMediumTitles"
        background="circleGradient"
        cardStyle="layered-gradient"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleApple
            navItems={[
              { name: "Home", href: "/" },
              { name: "Products", href: "/#products" },
              { name: "Features", href: "/#features" },
              { name: "Services", href: "/services" },
              { name: "About Us", href: "/#about" },
              { name: "Contact", href: "/#contact" },
            ]}
            brandName="ElectroShop"
          />
        </div>

        <div id="services-main" data-section="services-main">
          <PricingCardNine
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={true}
            plans={[
              {
                id: "basic-install",                title: "Basic Installation",                price: "$99",                period: "one-time",                features: [
                  "Standard light fixture installation",                  "Single socket replacement",                  "Basic wiring check-up",                  "30-day service warranty"],
                button: {
                  text: "Get Started",                  href: "#contact-us-phone"},
                imageSrc: "http://img.b2bpic.net/free-photo/patch-cord-crimp-glasses-notepad_140725-8748.jpg",                imageAlt: "Electrician working with tools"},
              {
                id: "premium-install",                title: "Premium Installation",                price: "$249",                period: "one-time",                features: [
                  "Smart home device integration",                  "Multi-point lighting setup",                  "Full system wiring inspection",                  "60-day extended warranty"],
                button: {
                  text: "Schedule Now",                  href: "#contact-us-phone"},
                imageSrc: "http://img.b2bpic.net/free-photo/man-installing-smart-device_23-2149537033.jpg",                imageAlt: "Technician installing a smart device"},
              {
                id: "product-delivery",                title: "Product Delivery & Setup",                price: "Custom",                period: "per-delivery",                features: [
                  "Expedited product shipping",                  "On-site delivery and unboxing",                  "Initial product configuration",                  "Recycling of old components"],
                button: {
                  text: "Arrange Delivery",                  href: "#contact-us-phone"},
                imageSrc: "http://img.b2bpic.net/free-photo/delivery-person-bringing-package_23-2148777977.jpg",                imageAlt: "Delivery person with a package"},
            ]}
            title="Our Professional Services"
            description="ElectroShop offers comprehensive installation and delivery services to ensure your electrical components are perfectly set up and functioning. Our expert team is ready to assist with all your needs."
            tag="Services"
          />
        </div>

        <div id="contact-us-phone" data-section="contact-us-phone">
          <ContactCTA
            useInvertedBackground={false}
            background={{ variant: "radial-gradient" }}
            tag="Call Us Today!"
            title="Need Immediate Assistance? Speak to an Expert."
            description="Our customer service team is available to answer your questions, schedule installations, or assist with product delivery. We're just a phone call away."
            buttons={[
              {
                text: "Call ElectroShop: +1 (234) 567-8900",                href: "tel:+12345678900"},
            ]}
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterLogoEmphasis
            columns={[
              {
                items: [
                  { label: "Shop", href: "/#products" },
                  { label: "Bulbs", href: "/#products" },
                  { label: "Sockets", href: "/#products" },
                  { label: "Wiring", href: "/#products" },
                ],
              },
              {
                items: [
                  { label: "Company", href: "/#about" },
                  { label: "About Us", href: "/#about" },
                  { label: "Services", href: "/services" },
                  { label: "Testimonials", href: "/#testimonials" },
                ],
              },
              {
                items: [
                  { label: "Support", href: "/#contact" },
                  { label: "FAQs", href: "/#faq" },
                  { label: "Contact Us", href: "/#contact" },
                  { label: "Returns", href: "#" },
                ],
              },
            ]}
            logoText="ElectroShop"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
