"use client";

import { Sparkles, Star } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
import FooterBase from "@/components/sections/footer/FooterBase";
import MediaSplitTabsAbout from "@/components/sections/about/MediaSplitTabsAbout";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGallery";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Services", id: "services" },
            { name: "Why Choose Us", id: "why-choose-us" },
            { name: "About Us", id: "about" },
            { name: "Maintenance", id: "maintenance" },
          ]}
          brandName="ProTech"
          button={{ text: "Call Now", href: "tel:815-777-2744" }}
          className="py-4 px-6"
          navItemClassName="text-foreground hover:text-primary-cta"
          buttonClassName="bg-primary-cta text-secondary-cta px-6 py-3 rounded-full hover:scale-105 transition-transform duration-300"
          buttonTextClassName="font-semibold"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Elite Heating & Cooling Solutions — 24/7 Emergency Service You Can Trust"
          description="Serving Jo Daviess County with Fast, Honest & Professional HVAC Service Since Day One."
          background={{ variant: "plain" }}
          tag="ProTech Heating & Cooling Inc."
          tagIcon={Star}
          buttons={[
            { text: "Call Now – (815) 777-2744", href: "tel:815-777-2744" },
            { text: "Schedule Free Estimate", href: "#contact" },
          ]}
          mediaItems={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/coworkers-refill-air-conditioner-freon_482257-90737.jpg",              imageAlt: "HVAC technician working on a furnace"},
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-woman-work-van_23-2149891032.jpg",              imageAlt: "Clean ProTech service truck pulling up"},
            {
              imageSrc: "https://img.b2bpic.net/free-photo/full-shot-people-spending-time-indoors_23-2149535990.jpg",              imageAlt: "Homeowner smiling in a warm home"},
          ]}
          mediaAnimation="opacity"
          className="h-[90vh] lg:h-[80vh] flex items-center justify-center"
          containerClassName="py-16 md:py-24 lg:py-32"
          textBoxClassName="max-w-4xl text-center"
          titleClassName="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 text-foreground"
          descriptionClassName="text-lg md:text-xl text-foreground/80 mb-8"
          buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center"
          buttonClassName="bg-primary-cta text-secondary-cta px-8 py-4 rounded-full text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
          tagClassName="mb-4 text-primary-cta font-bold flex items-center justify-center gap-2"
          mediaWrapperClassName="absolute inset-0 z-0 opacity-20"
          imageClassName="object-cover w-full h-full"
        />
      </div>
      <div id="social-proof" data-section="social-proof">
        <TestimonialCardSixteen
          title="Trusted By Homeowners Across Jo Daviess County"
          description="Hear directly from our satisfied customers in Galena, East Dubuque, Stockton, Elizabeth, and surrounding communities. We're proud to maintain a 4.8 Google Rating across 39+ verified reviews."
          testimonials={[
            {
              id: "1",              name: "Thomas D.",              role: "Homeowner",              company: "Jo Daviess County Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-man-home-with-heater_23-2149339547.jpg",              imageAlt: "Thomas D."},
            {
              id: "2",              name: "Eric B.",              role: "Homeowner",              company: "Jo Daviess County Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg",              imageAlt: "Eric B."},
            {
              id: "3",              name: "Frank D.",              role: "Homeowner",              company: "Jo Daviess County Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/focused-businessman-signing-agreement-meeting_74855-9896.jpg",              imageAlt: "Frank D."},
            {
              id: "4",              name: "Sarah K.",              role: "Homeowner",              company: "Jo Daviess County Resident",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-man-home-with-heater_23-2149339547.jpg",              imageAlt: "Sarah K."},
          ]}
          kpiItems={[
            { value: "4.8", label: "Star Rating" },
            { value: "39+", label: "Verified Reviews" },
            { value: "24/7", label: "Emergency Service" },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          className="py-16 md:py-24"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-foreground text-center"
          textBoxDescriptionClassName="text-lg md:text-xl text-foreground/80 mb-12 text-center"
          cardClassName="relative h-64 md:h-72 lg:h-80 rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-[1.02] duration-300"
          overlayClassName="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent flex flex-col justify-end p-6"
          ratingClassName="text-yellow-400 mb-2"
          nameClassName="text-lg font-semibold text-foreground"
          roleClassName="text-sm text-foreground/70"
          companyClassName="text-sm text-foreground/70"
          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardThree
          title="Complete Comfort Solutions for Your Home"
          description="From emergency repairs to proactive maintenance, ProTech Heating & Cooling has you covered."
          features={[
            {
              id: "🔥",              title: "Furnace Repair & Installation",              description: "Emergency heating repairs, new furnace installs, and high-efficiency upgrades to keep you warm.",              imageSrc: "https://img.b2bpic.net/free-photo/coworkers-refill-air-conditioner-freon_482257-90737.jpg"},
            {
              id: "❄",              title: "AC Repair & Replacement",              description: "Fast AC diagnostics, system replacements, and seasonal tune-ups for reliable cooling.",              imageSrc: "https://img.b2bpic.net/free-photo/coworkers-refill-air-conditioner-freon_482257-90737.jpg"},
            {
              id: "🛠",              title: "24-Hour Emergency HVAC",              description: "Rapid response times for nights, weekends, and holidays with fully stocked service vehicles.",              imageSrc: "https://img.b2bpic.net/free-photo/plumber-holding-clock_1368-6309.jpg"},
            {
              id: "🧰",              title: "Preventative Maintenance Plans",              description: "Worry-Free Maintenance Agreements with priority scheduling and extended system lifespan.",              imageSrc: "https://img.b2bpic.net/free-photo/repairman-reporting-found-freon-leaks_482257-92670.jpg"},
            {
              id: "💳",              title: "Financing Options",              description: "Flexible payment plans, affordable monthly options, and fast approvals for your convenience.",              imageSrc: "https://img.b2bpic.net/free-photo/male-plumber-working-with-client-fix-kitchen-problems_23-2150990687.jpg"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          className="py-16 md:py-24"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-foreground text-center"
          textBoxDescriptionClassName="text-lg md:text-xl text-foreground/80 mb-12 text-center"
          cardClassName="relative group block w-full aspect-[4/3] rounded-xl overflow-hidden shadow-lg transform transition-transform hover:scale-[1.02] duration-300"
          cardTitleClassName="text-xl md:text-2xl font-bold text-foreground mb-2 group-hover:text-primary-cta transition-colors duration-300"
          cardDescriptionClassName="text-foreground/80 text-base"
          itemContentClassName="absolute inset-0 bg-gradient-to-t from-background via-background/80 to-transparent flex flex-col justify-end p-6"
          gridClassName="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        />
      </div>
      <div id="why-choose-us" data-section="why-choose-us">
        <MediaSplitTabsAbout
          title="Why Homeowners Choose ProTech"
          description="Discover the core values that make us the preferred HVAC service provider in Jo Daviess County. We treat your home like it's our own."
          tabs={[
            {
              id: "rapid-response",              label: "Rapid Response Times",              description: "When you have an HVAC emergency, waiting is not an option. Our team is dispatched quickly to address your needs promptly, ensuring minimal discomfort and potential damage."},
            {
              id: "transparent-pricing",              label: "Honest, Transparent Pricing",              description: "No surprises, no hidden fees. We provide clear, upfront pricing for all our services, ensuring you understand the cost before any work begins."},
            {
              id: "no-upselling",              label: "No Upselling — Just What You Need",              description: "Our focus is on solving your problem efficiently and effectively, without pushing unnecessary services or products. We recommend only what truly benefits you."},
            {
              id: "locally-owned",              label: "Locally Owned & Operated",              description: "As a local business, we're deeply invested in the community of Jo Daviess County. We understand local needs and are dedicated to serving our neighbors with integrity."},
            {
              id: "experienced-technicians",              label: "Experienced Technicians",              description: "Our certified technicians are highly trained, skilled, and continuously updated on the latest HVAC technologies and best practices."},
            {
              id: "respect-for-home",              label: "Respect for Your Home",              description: "We pride ourselves on leaving your home as clean as we found it, taking every precaution to protect your property during service."},
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/happy-manual-worker-presenting-results-business-development-while-giving-presentation-company-leaders-his-team-factory_637285-4144.jpg"
          imageAlt="ProTech Heating & Cooling team"
          mediaAnimation="opacity"
          imagePosition="right"
          useInvertedBackground={true}
          className="py-16 md:py-24"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          contentCardClassName="rounded-xl shadow-lg p-8 md:p-10"
          titleClassName="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-foreground"
          titleDescriptionClassName="text-lg md:text-xl text-foreground/80 mb-8"
          tabsContainerClassName="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 mb-8"
          tabClassName="text-foreground/70 font-semibold hover:text-primary-cta transition-colors duration-200"
          activeTabClassName="text-primary-cta"
          descriptionClassName="text-base md:text-lg text-foreground/90 leading-relaxed"
          mediaCardClassName="rounded-xl shadow-lg overflow-hidden"
          mediaClassName="w-full h-full object-cover"
        />
      </div>
      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Serving Galena & Jo Daviess County With Integrity"
          description="At ProTech Heating & Cooling Inc., we believe comfort should never be compromised. Whether it’s frozen pipes in the dead of winter or an AC failure in the middle of summer, our team responds quickly, diagnoses accurately, and fixes it right the first time. We are a family-owned business proudly serving all of Jo Daviess County, offering 24/7 emergency availability."
          tabs={[
            {
              id: "our-mission",              label: "Our Mission",              description: "To provide unparalleled heating and cooling services with honesty, integrity, and a commitment to customer satisfaction."},
            {
              id: "our-values",              label: "Our Values",              description: "We prioritize rapid response, transparent pricing, no upselling, and treating every home with respect."},
            {
              id: "our-coverage",              label: "Our Coverage",              description: "Proudly serving Galena, East Dubuque, Stockton, Elizabeth, and all surrounding communities in Jo Daviess County."},
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/happy-manual-worker-presenting-results-business-development-while-giving-presentation-company-leaders-his-team-factory_637285-4144.jpg"
          imageAlt="ProTech Heating & Cooling team members"
          mediaAnimation="opacity"
          imagePosition="left"
          useInvertedBackground={false}
          className="py-16 md:py-24"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          contentCardClassName="rounded-xl shadow-lg p-8 md:p-10"
          titleClassName="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-foreground"
          titleDescriptionClassName="text-lg md:text-xl text-foreground/80 mb-8"
          tabsContainerClassName="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 mb-8"
          tabClassName="text-foreground/70 font-semibold hover:text-primary-cta transition-colors duration-200"
          activeTabClassName="text-primary-cta"
          descriptionClassName="text-base md:text-lg text-foreground/90 leading-relaxed"
          mediaCardClassName="rounded-xl shadow-lg overflow-hidden"
          mediaClassName="w-full h-full object-cover"
        />
      </div>
      <div id="maintenance-plan" data-section="maintenance-plan">
        <PricingCardThree
          title="Worry-Free Comfort All Year Long"
          description="Protect your home and ensure optimal performance with our comprehensive HVAC maintenance agreements."
          plans={[
            {
              id: "standard-plan",              price: "Starting at $149/year",              name: "Standard Maintenance",              buttons: [
                { text: "Learn More", href: "#contact" },
                { text: "Call Now", href: "tel:815-777-2744" },
              ],
              features: [
                "Annual heating & cooling inspections",                "Priority service scheduling",                "10% Discount on repairs",                "Extend system lifespan",                "Peace of mind"],
            },
            {
              id: "premium-plan",              badge: "Most Popular",              badgeIcon: Sparkles,
              price: "Starting at $249/year",              name: "Premium Maintenance",              buttons: [
                { text: "Learn More", href: "#contact" },
                { text: "Call Now", href: "tel:815-777-2744" },
              ],
              features: [
                "Two comprehensive tune-ups per year",                "Highest priority scheduling",                "15% Discount on repairs",                "Enhanced system efficiency",                "Exclusive member benefits"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          className="py-16 md:py-24"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"
          textBoxTitleClassName="text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight mb-4 text-foreground text-center"
          textBoxDescriptionClassName="text-lg md:text-xl text-foreground/80 mb-12 text-center"
          cardClassName="rounded-xl shadow-lg p-8 md:p-10 bg-card flex flex-col h-full justify-between"
          badgeClassName="bg-primary-cta text-secondary-cta rounded-full px-4 py-1 text-sm font-semibold inline-flex items-center gap-1"
          priceClassName="text-5xl font-extrabold text-foreground mb-2"
          nameClassName="text-xl font-semibold text-foreground mb-6"
          planButtonContainerClassName="flex flex-col gap-3 mt-6"
          planButtonClassName="w-full py-3 px-6 rounded-full font-semibold transition-all duration-300"
          featuresClassName="text-foreground/90 text-base space-y-2"
          featureItemClassName="flex items-center gap-2"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Your Free Estimate Today"
          title="Don’t Wait Until It Breaks."
          description="Call Now for Fast, Professional HVAC Service."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="Your Name"
          buttonText="Schedule Estimate"
          termsText="By submitting this form, you agree to receive communications from ProTech Heating & Cooling Inc."
          onSubmit={(value) => console.log('Form submitted with value:', value)}
          className="py-20 md:py-28 lg:py-36 bg-foreground text-background-accent"
          containerClassName="max-w-3xl mx-auto text-center"
          contentClassName="bg-card rounded-xl p-8 md:p-12 shadow-2xl"
          tagClassName="text-primary-cta font-semibold mb-3"
          titleClassName="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4 text-background"
          descriptionClassName="text-lg md:text-xl text-background/80 mb-10"
          formWrapperClassName="w-full flex flex-col md:flex-row gap-4 items-center justify-center"
          formClassName="flex flex-col md:flex-row gap-4 w-full"
          inputClassName="w-full md:w-1/2 p-3 rounded-full border border-background-accent focus:border-primary-cta focus:ring-1 focus:ring-primary-cta text-foreground"
          buttonClassName="w-full md:w-auto px-8 py-3 rounded-full bg-primary-cta text-secondary-cta font-semibold hover:opacity-90 transition-opacity"
          termsClassName="text-sm text-background/60 mt-6"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterBase
          columns={[
            {
              title: "Services",              items: [
                { label: "Furnace Repair", href: "#services" },
                { label: "AC Replacement", href: "#services" },
                { label: "Emergency HVAC", href: "#services" },
                { label: "Maintenance Plans", href: "#maintenance-plan" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Why Choose Us", href: "#why-choose-us" },
                { label: "Contact", href: "#contact" },
                { label: "Reviews", href: "#social-proof" },
              ],
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
              ],
            },
          ]}
          logoText="ProTech Heating & Cooling"
          copyrightText="© 2024 ProTech Heating & Cooling Inc. All rights reserved."
          className="py-12 md:py-16 lg:py-20 bg-foreground text-background-accent"
          containerClassName="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-8"
          logoTextClassName="text-2xl font-bold text-background mb-6"
          columnsClassName="grid grid-cols-2 md:grid-cols-3 gap-8 col-span-full md:col-span-3"
          columnTitleClassName="text-lg font-semibold text-background mb-4"
          columnItemClassName="text-background/80 hover:text-primary-cta transition-colors duration-200"
          copyrightContainerClassName="mt-8 md:mt-0 text-background/60 text-sm"
          copyrightTextClassName="mb-2"
          privacyButtonClassName="text-primary-cta hover:underline"
        />
      </div>
    </ThemeProvider>
  );
}
