"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeMediumTitles"
      background="circleGradient"
      cardStyle="inset"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered 
          brandName="Stemple Electric"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Call Now",
            href: "tel:+13075551234"
          }}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne 
          title="Complete Electrical Services"
          description="Professional electrical solutions for residential and light commercial properties throughout Wyoming. Licensed, insured, and committed to quality workmanship."
          tag="Our Services"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Panel Upgrades & Breaker Replacement",
              description: "Modernize your electrical system with safe, code-compliant panel upgrades and breaker installations for improved safety and capacity.",
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-using-tablet-digital-panel-control-electrical-system-analysis_169016-68336.jpg?_wi=2",
              imageAlt: "Electrical panel upgrade",
              button: { text: "Learn More", href: "/contact" }
            },
            {
              title: "Lighting Installation & Design",
              description: "Transform your space with professional indoor and outdoor lighting solutions, from recessed lighting to landscape illumination.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-embroidered-shirt_23-2149394271.jpg?_wi=2",
              imageAlt: "Modern lighting installation",
              button: { text: "Get Quote", href: "/contact" }
            },
            {
              title: "EV Charger Installation",
              description: "Future-proof your home with professional electric vehicle charging station installation, including proper grounding and safety features.",
              imageSrc: "http://img.b2bpic.net/free-photo/close-view-man-plugging-charger-into-electric-car-charging-port_1268-21379.jpg?_wi=2",
              imageAlt: "EV charger installation",
              button: { text: "Schedule", href: "/contact" }
            },
            {
              title: "Electrical Troubleshooting & Repairs",
              description: "Quick, accurate diagnosis and repair of electrical issues including flickering lights, dead outlets, and circuit problems.",
              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=3",
              imageAlt: "Electrical repair work",
              button: { text: "Emergency Service", href: "tel:+13075551234" }
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardTen 
          title="Our Service Process"
          description="Simple, straightforward process from initial request to job completion with clear communication every step of the way."
          tag="How We Work"
          textboxLayout="default"
          useInvertedBackground={false}
          metrics={[
            {
              id: "1",
              title: "Request Your Estimate",
              subtitle: "Call or use our online form to describe your electrical needs and get a free estimate.",
              category: "Step 1",
              value: "Free"
            },
            {
              id: "2",
              title: "Schedule Your Service",
              subtitle: "We find a convenient time that works best for you with minimal wait times.",
              category: "Step 2",
              value: "Flexible"
            },
            {
              id: "3",
              title: "Professional Installation",
              subtitle: "Licensed electricians complete the work to code with quality materials and clean craftsmanship.",
              category: "Step 3",
              value: "Licensed"
            }
          ]}
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase 
          title="Service Questions & Answers"
          description="Common questions about our electrical services, pricing, and scheduling processes."
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground={false}
          faqs={[
            {
              id: "1",
              title: "What types of electrical work do you specialize in?",
              content: "We specialize in residential and light commercial electrical work including panel upgrades, lighting installation, outlet and switch installation, EV charger setup, troubleshooting, and new construction wiring."
            },
            {
              id: "2",
              title: "Do you provide warranties on your electrical work?",
              content: "Yes, we stand behind our work with comprehensive warranties. All installations come with a workmanship warranty, and we use quality materials backed by manufacturer warranties."
            },
            {
              id: "3",
              title: "How do you price electrical services?",
              content: "We provide transparent, upfront pricing with free estimates. Our pricing is based on the scope of work, materials needed, and complexity of the job. No hidden fees or surprise charges."
            },
            {
              id: "4",
              title: "Can you help with electrical code compliance?",
              content: "Absolutely. All our work meets current electrical codes and safety standards. We can also help bring older electrical systems up to code during upgrades or renovations."
            }
          ]}
          faqsAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <FooterLogoReveal 
        logoText="STEMPLE ELECTRIC"
        leftLink={{
          text: "Privacy Policy",
          href: "#"
        }}
        rightLink={{
          text: "Terms of Service",
          href: "#"
        }}
      />
    </ThemeProvider>
  );
}