"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Zap, Lightbulb, Sun, Wrench, Home, CheckCircle, MessageCircle, Calendar, Phone } from "lucide-react";

export default function ServicesPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="small"
      sizing="medium"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
            { name: "Reviews", id: "/reviews" }
          ]}
          brandName="Stemple Electric"
          bottomLeftText="Licensed • Insured • Fast Response"
          bottomRightText="(307) 555-ELEC"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive 
          title="Complete Electrical Services"
          description="Professional electrical solutions for homes and light commercial properties throughout Wyoming"
          tag="Services"
          tagIcon={Zap}
          features={[
            {
              title: "Panel Upgrades & Breaker Replacement",
              description: "Safe, code-compliant electrical panel upgrades and repairs",
              icon: Lightbulb,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/electrician-switchboard-room-cable-connection-electrical-system-installation_169016-68225.jpg?_wi=2",
                  imageAlt: "Electrical panel upgrade in progress"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/electrical-technician-looking-focused-while-working-switchboard-with-fuses_169016-23482.jpg?_wi=2",
                  imageAlt: "Modern electrical panel installation"
                }
              ]
            },
            {
              title: "Lighting Installation",
              description: "Indoor & outdoor lighting design and installation",
              icon: Sun,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-embroidered-shirt_23-2149394271.jpg?_wi=2",
                  imageAlt: "Modern interior lighting installation"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/two-waiters-far-away-ready-service-prepared-desk-waiting-food-visitors-evening-time_146671-14405.jpg?_wi=2",
                  imageAlt: "Outdoor lighting installation"
                }
              ]
            },
            {
              title: "Electrical Troubleshooting & Repairs",
              description: "Fast diagnosis and repair of electrical issues",
              icon: Wrench,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=3",
                  imageAlt: "Electrician diagnosing electrical problem"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=4",
                  imageAlt: "Professional electrical repair work"
                }
              ]
            },
            {
              title: "EV Charger Installation",
              description: "Home electric vehicle charging station setup & installation",
              icon: Zap,
              mediaItems: [
                {
                  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 at home"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/woman-charging-electro-car-by-her-house_1303-17808.jpg?_wi=2",
                  imageAlt: "Modern EV charging station"
                }
              ]
            },
            {
              title: "Outlets, Switches & Ceiling Fans",
              description: "Installation and replacement of outlets, switches, and ceiling fans",
              icon: Home,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/light-switch-block-white-wall-modern-apartment-light-control_169016-69630.jpg",
                  imageAlt: "Modern outlet installation"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/modern-decorative-lamps_23-2148164736.jpg",
                  imageAlt: "Ceiling fan installation"
                }
              ]
            },
            {
              title: "New Construction & Remodel Wiring",
              description: "Complete wiring for new builds and renovation projects",
              icon: Home,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/electrician-hard-hat-looks-wall-while-holding-electric-cable_169016-12103.jpg",
                  imageAlt: "New construction wiring installation"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/electrician-hard-hat-looks-wall-while-holding-electric-cable_169016-12106.jpg",
                  imageAlt: "Remodel electrical wiring"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentyFive 
          title="How We Work"
          description="Simple, transparent process from estimate to completion"
          tag="Process"
          tagIcon={CheckCircle}
          features={[
            {
              title: "Request Estimate",
              description: "Contact us by phone, text, or email to describe your electrical needs",
              icon: MessageCircle,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/businessman-using-tablet-online-connect_1421-103.jpg",
                  imageAlt: "Contact form on device"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/happy-blonde-female-manager-has-conversation-with-male-colleague_273609-5014.jpg",
                  imageAlt: "Phone call consultation"
                }
              ]
            },
            {
              title: "Schedule Service",
              description: "We'll confirm your appointment with fast, flexible scheduling",
              icon: Calendar,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148655618.jpg",
                  imageAlt: "Calendar scheduling interface"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/schedule-time-management-planner-concept_53876-121130.jpg",
                  imageAlt: "Appointment confirmation"
                }
              ]
            },
            {
              title: "Complete & Walkthrough",
              description: "Expert work completed on time, with full walkthrough and warranty info",
              icon: CheckCircle,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/electrician-installing-laying-electrical-cables-ceiling-inside-house_169016-53936.jpg",
                  imageAlt: "Completed electrical work"
                },
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/factory-engineer-team-worker-unifrom-are-walking-through-industrial-machinery-manufacturing-facilitieswarehouse-factory-background_609648-706.jpg",
                  imageAlt: "Final inspection walkthrough"
                }
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq 
          ctaTitle="Ready to Get Started?"
          ctaDescription="Contact Stemple Electric today for a free estimate on your electrical project."
          ctaButton={{ text: "Get Your Free Estimate", href: "/contact" }}
          ctaIcon={Phone}
          useInvertedBackground={false}
          animationType="slide-up"
          faqs={[
            {
              id: "1",
              title: "What types of electrical work do you do?",
              content: "We handle all residential and light commercial electrical work including panel upgrades, lighting installation, EV chargers, troubleshooting, repairs, outlets, switches, ceiling fans, and new construction wiring."
            },
            {
              id: "2",
              title: "Are you licensed and insured?",
              content: "Yes. Stemple Electric is fully licensed, insured, and bonded to perform all electrical work in Wyoming. We carry comprehensive liability coverage and workers compensation insurance."
            },
            {
              id: "3",
              title: "Do you offer emergency services?",
              content: "We offer same-day service for urgent electrical issues. Call or text for availability on emergency work. Some after-hours rates may apply."
            }
          ]}
        />
      </div>

      <FooterMedia 
        imageSrc="http://img.b2bpic.net/free-vector/electrical-works-horizontal-banners_1284-10214.jpg?_wi=2"
        imageAlt="Modern electrical work and safety"
        logoText="Stemple Electric LLC"
        copyrightText="© 2025 Stemple Electric LLC. All rights reserved."
        columns={[
          {
            title: "Services",
            items: [
              { label: "Panel Upgrades", href: "/services#panel-upgrades" },
              { label: "Lighting Installation", href: "/services#lighting" },
              { label: "EV Chargers", href: "/services#ev-chargers" },
              { label: "Troubleshooting & Repairs", href: "/services#repairs" }
            ]
          },
          {
            title: "Company",
            items: [
              { label: "About Us", href: "/about" },
              { label: "Contact", href: "/contact" },
              { label: "Reviews", href: "/reviews" },
              { label: "FAQ", href: "/#faq" }
            ]
          },
          {
            title: "Connect",
            items: [
              { label: "Phone: (307) 555-ELEC", href: "tel:+13075551352" },
              { label: "Email: info@stempleelectric.com", href: "mailto:info@stempleelectric.com" },
              { label: "License & Insurance", href: "#" },
              { label: "Privacy Policy", href: "#" }
            ]
          }
        ]}
      />
    </ThemeProvider>
  );
}