"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { CheckCircle, Shield, MessageSquare, Home } from "lucide-react";

export default function HomePage() {
  const handleContactSubmit = (email: string) => {
    console.log('Contact form submitted:', email);
  };

  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="hero" data-section="hero">
        <HeroCarouselLogo 
          logoText="STEMPLE ELECTRIC"
          description="Residential & light commercial electrical services across Wyoming. Clean work, clear pricing, and fast scheduling."
          buttons={[
            { text: "Call Now", href: "tel:+13075551234" },
            { text: "Get Free Estimate", href: "/contact" }
          ]}
          slides={[
            { 
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=1",
              imageAlt: "Professional electrician at electrical panel"
            }
          ]}
          autoplayDelay={3000}
          showDimOverlay={true}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne 
          title="Electrical Services"
          description="Complete electrical solutions for residential and light commercial needs across Wyoming."
          tag="What We Offer"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              title: "Panel Upgrades & Breaker Replacement",
              description: "Modern, safe electrical system updates for your home or business.",
              imageSrc: "http://img.b2bpic.net/free-photo/electrician-using-tablet-digital-panel-control-electrical-system-analysis_169016-68336.jpg?_wi=1",
              imageAlt: "Electrical panel upgrade"
            },
            {
              title: "Lighting Installation",
              description: "Indoor and outdoor lighting solutions that brighten your space.",
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-embroidered-shirt_23-2149394271.jpg?_wi=1",
              imageAlt: "Modern lighting installation"
            },
            {
              title: "EV Charger Installation",
              description: "Complete electric vehicle charging station setup and safety inspection.",
              imageSrc: "http://img.b2bpic.net/free-photo/close-view-man-plugging-charger-into-electric-car-charging-port_1268-21379.jpg?_wi=1",
              imageAlt: "EV charger installation"
            },
            {
              title: "Troubleshooting & Repairs",
              description: "Quick diagnosis and reliable repairs for electrical problems.",
              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=1",
              imageAlt: "Electrical repair work"
            },
            {
              title: "Outlets, Switches & Ceiling Fans",
              description: "Safe installation and upgrades for all outlet and switch needs.",
              imageSrc: "http://img.b2bpic.net/free-photo/hands-electrician-installing-electrical-outlet-new-house-assembly-electrical-network-room-installation-electrical-network_166373-2204.jpg",
              imageAlt: "Electrical outlets installation"
            },
            {
              title: "New Construction & Remodels",
              description: "Full electrical wiring for new builds and renovation projects.",
              imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-with-electrician-s-tools-accessories_169016-24022.jpg?_wi=2",
              imageAlt: "Construction electrical work"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout 
          title="Why Stemple Electric"
          description="We believe in honest service, professional craftsmanship, and clear communication. Every job is done right, every time."
          tag="Our Approach"
          textboxLayout="default"
          useInvertedBackground={false}
          bulletPoints={[
            {
              title: "Straight Answers",
              description: "No runaround, no upsell. We explain the problem and solution clearly.",
              icon: CheckCircle
            },
            {
              title: "Code-Compliant Work",
              description: "Clean, professional craftsmanship that meets all safety and electrical codes.",
              icon: Shield
            },
            {
              title: "Text Updates & Easy Scheduling",
              description: "Stay informed with real-time updates. Scheduling is simple and flexible.",
              icon: MessageSquare
            },
            {
              title: "Respectful Service",
              description: "We treat your home and business with the utmost care and professionalism.",
              icon: Home
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=2"
          imageAlt="Professional electrician"
          imagePosition="right"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="service-area" data-section="service-area">
        <SocialProofOne 
          title="Service Areas"
          description="We proudly serve communities throughout Wyoming with the same high-quality service."
          tag="Serving Wyoming"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Cheyenne", "Casper", "Laramie", "Gillette", "Sheridan", "Rock Springs", "Powder River", "Rawlins"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne 
          title="What Our Customers Say"
          description="Real feedback from homeowners and business owners we've served across Wyoming."
          tag="Testimonials"
          textboxLayout="default"
          useInvertedBackground={false}
          testimonials={[
            {
              id: "1",
              name: "James Mitchell",
              role: "Homeowner",
              company: "Cheyenne, WY",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",
              imageAlt: "James Mitchell"
            },
            {
              id: "2",
              name: "Sarah Anderson",
              role: "Property Manager",
              company: "Casper, WY",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",
              imageAlt: "Sarah Anderson"
            },
            {
              id: "3",
              name: "Tom Rodriguez",
              role: "Business Owner",
              company: "Laramie, WY",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3",
              imageAlt: "Tom Rodriguez"
            },
            {
              id: "4",
              name: "Linda Chen",
              role: "Homeowner",
              company: "Gillette, WY",
              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4",
              imageAlt: "Linda Chen"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="cta-band" data-section="cta-band">
        <ContactSplit 
          tag="Ready to Get Started?"
          title="Need an electrician this week?"
          description="Don't let electrical issues wait. Contact Stemple Electric for fast, reliable service."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/electrician-overalls-focused-work-switchboard-with-fuses-using-tablet_169016-66854.jpg?_wi=3"
          imageAlt="Professional electrician at work"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Get Free Estimate"
          termsText="We respect your privacy. We'll only contact you about your electrical service request."
          onSubmit={handleContactSubmit}
        />
      </div>

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