"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogo from "@/components/sections/hero/HeroLogo";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { CheckCircle } from "lucide-react";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="ProServices"
          navItems={navItems}
          button={{
            text: "Call (555) 123-4567",
            href: "tel:+15551234567",
          }}
        />
      </div>

      {/* Services Hero Section */}
      <div id="services-hero" data-section="services-hero">
        <HeroLogo
          logoText="Our Complete Service Solutions"
          description="Comprehensive solutions tailored to your specific needs. Professional quality. Local expertise."
          imageSrc="http://img.b2bpic.net/free-photo/low-angle-engineers-hand-shake_23-2148480373.jpg"
          imageAlt="Professional service team"
          buttons={[
            {
              text: "Call for Consultation: (555) 123-4567",
              href: "tel:+15551234567",
            },
          ]}
          buttonAnimation="slide-up"
          showDimOverlay={false}
          ariaLabel="Services page hero section"
        />
      </div>

      {/* Services Detail Section */}
      <div id="services-detail" data-section="services-detail">
        <FeatureCardTwelve
          title="Detailed Service Information"
          description="Each service is completed with precision and care to ensure your complete satisfaction."
          features={[
            {
              id: "detail-1",
              label: "Pressure Washing",
              title: "Professional Pressure Washing",
              items: [
                "Removes tough stains and grime",
                "Protects surfaces from damage",
                "Improves curb appeal instantly",
                "Safe for all surfaces",
                "Eco-friendly cleaning solutions available",
              ],
            },
            {
              id: "detail-2",
              label: "Landscaping",
              title: "Expert Landscaping Services",
              items: [
                "Regular lawn maintenance programs",
                "Professional landscape design",
                "Seasonal plantings and care",
                "Tree and hedge management",
                "Mulch and soil services",
              ],
            },
            {
              id: "detail-3",
              label: "Cleaning",
              title: "Comprehensive Cleaning Solutions",
              items: [
                "Thorough deep cleaning services",
                "Move-in and move-out specials",
                "Post-construction cleanup",
                "Customized cleaning plans",
                "Non-toxic cleaning products",
              ],
            },
            {
              id: "detail-4",
              label: "Special Services",
              title: "Specialty & Seasonal Work",
              items: [
                "Gutter and downspout cleaning",
                "Roof and fascia services",
                "Holiday decoration installation",
                "Spring and fall cleanup",
                "Emergency response available",
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          tag="Complete Solutions"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          buttons={[
            {
              text: "Schedule Your Service Today",
              href: "/contact",
            },
          ]}
          buttonAnimation="slide-up"
          ariaLabel="Detailed services information"
        />
      </div>

      {/* Services Footer */}
      <div id="services-footer" data-section="services-footer">
        <FooterBaseCard
          logoText="ProServices"
          columns={[
            {
              title: "Quick Links",
              items: [
                {
                  label: "Home",
                  href: "/",
                },
                {
                  label: "Services",
                  href: "/services",
                },
                {
                  label: "About",
                  href: "/about",
                },
                {
                  label: "Contact",
                  href: "/contact",
                },
              ],
            },
            {
              title: "Service Categories",
              items: [
                {
                  label: "Pressure Washing",
                  href: "/services",
                },
                {
                  label: "Landscaping",
                  href: "/services",
                },
                {
                  label: "Interior Cleaning",
                  href: "/services",
                },
                {
                  label: "Seasonal Services",
                  href: "/services",
                },
              ],
            },
            {
              title: "Get in Touch",
              items: [
                {
                  label: "Call: (555) 123-4567",
                  href: "tel:+15551234567",
                },
                {
                  label: "Email: info@proservices.com",
                  href: "mailto:info@proservices.com",
                },
                {
                  label: "Hours: Mon-Sat 8AM-6PM",
                  href: "#",
                },
                {
                  label: "Emergency: Available 24/7",
                  href: "tel:+15551234567",
                },
              ],
            },
          ]}
          copyrightText="© 2025 ProServices. Locally owned and operated."
          ariaLabel="Services page footer"
        />
      </div>
    </ThemeProvider>
  );
}