"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { CheckCircle, DollarSign, Shield, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="ServicePro"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "services" },
            { name: "Why Us", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Call Now", href: "tel:+1-555-0123" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Fast, Reliable Local Service You Can Trust"
          description="Available 24/7 for emergency service. Licensed, insured, and backed by 15+ years of local expertise."
          background={{ variant: "plain" }}
          kpis={[
            { value: "15+", label: "Years Experience" },
            { value: "1000+", label: "Happy Customers" },
            { value: "24/7", label: "Emergency Service" }
          ]}
          enableKpiAnimation={true}
          tag="Licensed & Insured"
          tagIcon={Shield}
          buttons={[
            { text: "Call Now", href: "tel:+1-555-0123" },
            { text: "Request Free Quote", href: "#contact" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-957.jpg?_wi=1"
          imageAlt="Professional service team"
          mediaAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Why Local Homeowners Choose Us"
          metrics={[
            { icon: Zap, label: "Fast Response", value: "Same Day" },
            { icon: DollarSign, label: "Transparent Pricing", value: "No Surprises" },
            { icon: CheckCircle, label: "Satisfaction Guarantee", value: "100%" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Core Services"
          description="Complete range of professional services to keep your home and business running smoothly"
          features={[
            {
              id: "plumbing",              label: "Plumbing",              title: "Expert plumbing solutions for any issue",              items: ["Leak repairs", "Drain cleaning", "Emergency service", "Water heater installation"],
              buttons: [{ text: "Learn More", href: "#" }]
            },
            {
              id: "electrical",              label: "Electrical",              title: "Safe, code-compliant electrical work",              items: ["Panel upgrades", "Outlet installation", "Troubleshooting", "Emergency repairs"],
              buttons: [{ text: "Learn More", href: "#" }]
            },
            {
              id: "hvac",              label: "HVAC",              title: "Climate control for year-round comfort",              items: ["Installation", "Maintenance plans", "Emergency service", "Energy optimization"],
              buttons: [{ text: "Learn More", href: "#" }]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Trusted by Homeowners Across the Region"
          description="See why families and businesses rely on us for their most important service needs"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Homeowner",              company: "Downtown Area",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Business Owner",              company: "Local Retail",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Property Manager",              company: "Residential Complex",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2"
            },
            {
              id: "4",              name: "David Kim",              role: "Homeowner",              company: "Suburbs",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/satisfied-happy-female-customer-making-like-gesture_74855-3668.jpg"
            }
          ]}
          kpiItems={[
            { value: "1000+", label: "Projects Completed" },
            { value: "4.9/5", label: "Average Rating" },
            { value: "98%", label: "Satisfaction Rate" }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Ready to Schedule Service?"
          description="Contact us today for a free quote. Our team responds within hours to get your problem solved fast."
          tagIcon={Zap}
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-female-support-phone-operator-speaking-consulting-office_176420-957.jpg?_wi=2"
          imageAlt="Contact us for service"
          mediaAnimation="slide-up"
          inputPlaceholder="Enter your email"
          buttonText="Get Free Quote"
          termsText="We'll never spam you. Unsubscribe at any time."
          onSubmit={(email) => console.log('Form submitted:', email)}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="ServicePro"
          columns={[
            {
              items: [
                { label: "Services", href: "#services" },
                { label: "Why Us", href: "#features" },
                { label: "Reviews", href: "#testimonials" }
              ]
            },
            {
              items: [
                { label: "Contact", href: "#contact" },
                { label: "Call Now", href: "tel:+1-555-0123" },
                { label: "Emergency Service", href: "tel:+1-555-0124" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Licensing", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
