"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";

export default function ServicesPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Reviews", id: "reviews" },
    { name: "Service Areas", id: "service-areas" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Services",
      items: [
        { label: "Plumbing Repair", href: "/services" },
        { label: "Drain Cleaning", href: "/services" },
        { label: "Water Heater Service", href: "/services" },
        { label: "Electrical Repairs", href: "/services" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/" },
        { label: "Customer Reviews", href: "/" },
        { label: "Service Areas", href: "/" },
        { label: "Contact Us", href: "/services" },
      ],
    },
    {
      title: "Contact",
      items: [
        { label: "Call: +1 (657) 439-3277", href: "tel:+16574393277" },
        { label: "24/7 Emergency Service", href: "tel:+16574393277" },
        { label: "Licensed & Insured", href: "#" },
        { label: "Request Service", href: "/services" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="large"
      background="noise"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Dickerson Plumbing & Electrical"
          navItems={navItems}
          button={{ text: "Call Now", href: "tel:+16574393277" }}
        />
      </div>

      <div id="services-detail" data-section="services-detail">
        <ProductCardTwo
          title="Our Complete Service Catalog"
          description="From emergency repairs to preventative maintenance, we offer comprehensive plumbing and electrical solutions tailored to residential and commercial needs. Every service is performed by licensed, certified technicians with years of proven experience."
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "leak-detection",
              brand: "Plumbing",
              name: "Leak Detection & Repair",
              price: "Affordable Rates",
              rating: 5,
              reviewCount: "280+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/man-with-tools-looking-closely-lamp-hand_259150-58241.jpg",
              imageAlt: "Professional leak detection",
            },
            {
              id: "drain-cleaning",
              brand: "Plumbing",
              name: "Drain Cleaning & Maintenance",
              price: "Starting at $150",
              rating: 5,
              reviewCount: "156+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990702.jpg",
              imageAlt: "Professional drain cleaning",
            },
            {
              id: "water-heater",
              brand: "Plumbing",
              name: "Water Heater Installation & Repair",
              price: "Installation & Repair",
              rating: 5,
              reviewCount: "312+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-working-as-plumber_23-2150746391.jpg",
              imageAlt: "Water heater service",
            },
            {
              id: "pipe-replacement",
              brand: "Plumbing",
              name: "Pipe Replacement & Repiping",
              price: "Full System Service",
              rating: 5,
              reviewCount: "203+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/plumbing-professional-doing-his-job_23-2150721517.jpg",
              imageAlt: "Pipe replacement service",
            },
            {
              id: "electrical-repair",
              brand: "Electrical",
              name: "Electrical Troubleshooting & Repair",
              price: "Fast Diagnosis",
              rating: 5,
              reviewCount: "189+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/male-electrician-checking-switchboard-basement_651396-3066.jpg",
              imageAlt: "Electrical repair service",
            },
            {
              id: "panel-upgrade",
              brand: "Electrical",
              name: "Electrical Panel Upgrades",
              price: "Licensed Installation",
              rating: 5,
              reviewCount: "94+ reviews",
              imageSrc: "http://img.b2bpic.net/free-photo/male-electrician-uniform-working-switchboard-electricity_169016-67806.jpg",
              imageAlt: "Electrical panel upgrade",
            },
          ]}
          buttons={[{ text: "Schedule Your Service", href: "/services" }]}
        />
      </div>

      <div id="service-process" data-section="service-process">
        <MetricCardTen
          title="Our Service Process"
          description="Transparent, professional approach to every job. We prioritize communication, quality, and your satisfaction from start to finish."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          metrics={[
            {
              id: "assessment",
              title: "Initial Assessment",
              subtitle: "Thorough inspection & diagnosis",
              category: "Phase 1",
              value: "Professional Evaluation",
            },
            {
              id: "estimate",
              title: "Transparent Estimate",
              subtitle: "Clear pricing before work begins",
              category: "Phase 2",
              value: "No Hidden Costs",
            },
            {
              id: "execution",
              title: "Expert Execution",
              subtitle: "Licensed technician performs work",
              category: "Phase 3",
              value: "Quality Workmanship",
            },
            {
              id: "guarantee",
              title: "Satisfaction Guarantee",
              subtitle: "Backed by warranty & follow-up support",
              category: "Phase 4",
              value: "100% Guaranteed",
            },
          ]}
        />
      </div>

      <div id="services-cta" data-section="services-cta">
        <ContactText
          text="Ready to Get Professional Service? Contact Us Today"
          animationType="entrance-slide"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
          buttons={[
            { text: "Call Now: +1 (657) 439-3277", href: "tel:+16574393277" },
            { text: "Request a Free Estimate", href: "/services" },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Dickerson Plumbing & Electrical"
          copyrightText="© 2025 Dickerson Plumbing & Electrical. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}