"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Raleway } from "next/font/google";

const raleway = Raleway({
  variable: "--font-raleway",  subsets: ["latin"]
});

const assetMap = [
  {"id":"hero-plumber","url":"http://img.b2bpic.net/free-photo/man-opening-faucet-looking-jet-water_259150-59268.jpg","alt":"professional plumber working residential home"},
  {"id":"avatar-1","url":"http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg","alt":"professional male worker profile picture"},
  {"id":"avatar-2","url":"http://img.b2bpic.net/free-photo/woman-wearing-special-industrial-protective-equipment_23-2148991969.jpg","alt":"professional female worker profile picture"},
  {"id":"avatar-3","url":"http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg","alt":"experienced technician profile picture"},
  {"id":"avatar-4","url":"http://img.b2bpic.net/free-photo/young-woman-looking-away-with-crossed-arms-red-t-shirt-looking-merry_176474-17926.jpg","alt":"young plumber profile picture"},
  {"id":"avatar-5","url":"http://img.b2bpic.net/free-photo/friendly-looking-casual-boyish-dark-skinned-woman-with-afro-hairstyle-glasses-trendy-shirt-smiling-broadly-standing-gray-wall-with-carefree-relaxed-look_176420-23134.jpg","alt":"commercial worker profile picture"},
  {"id":"service-phone-1-1","url":"http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881677.jpg","alt":"plumbing services app interface"},
  {"id":"service-phone-1-2","url":"http://img.b2bpic.net/free-photo/music-streaming-app-mobile-phone_53876-98071.jpg","alt":"plumbing technician mobile workflow"},
  {"id":"service-phone-2-1","url":"http://img.b2bpic.net/free-photo/person-disinfecting-smartphone_23-2148577827.jpg","alt":"heating services app thermostat control"},
  {"id":"service-phone-2-2","url":"http://img.b2bpic.net/free-photo/electrical-technician-looking-focused-while-working-switchboard-with-fuses_169016-23720.jpg","alt":"heating technician mobile diagnostic tool"},
  {"id":"service-phone-3-1","url":"http://img.b2bpic.net/free-photo/close-up-hands-holding-pan_23-2148994137.jpg","alt":"gas fitting app safety check"},
  {"id":"service-phone-3-2","url":"http://img.b2bpic.net/free-photo/businesswoman-explaining-her-renovation-vision-laptop_482257-90952.jpg","alt":"gas technician mobile safety checklist"},
  {"id":"service-phone-4-1","url":"http://img.b2bpic.net/free-photo/young-woman-using-home-technology_23-2149216629.jpg","alt":"renovation services app project planner"},
  {"id":"service-phone-4-2","url":"http://img.b2bpic.net/free-photo/man-contractor-using-mobile-phone-design-building-model-construction-plan-layout-architect-working-blueprints-plan-maquette-create-industrial-development-smartphone_482257-38835.jpg","alt":"construction technician mobile project tracker"},
  {"id":"service-phone-5-1","url":"http://img.b2bpic.net/free-photo/close-up-finger-setting-alarm_23-2148994166.jpg","alt":"emergency services app quick response"},
  {"id":"service-phone-5-2","url":"http://img.b2bpic.net/free-photo/customer-text-messaging-mobile_1170-1418.jpg","alt":"emergency technician mobile dispatch system"},
  {"id":"why-choose-phone-1-1","url":"http://img.b2bpic.net/free-photo/top-view-yellow-office-desk-table-with-lot-things-it_1150-12893.jpg","alt":"24/7 emergency service icon on phone"},
  {"id":"why-choose-phone-1-2","url":"http://img.b2bpic.net/free-photo/internet-speed-test-software-concept_53876-120119.jpg","alt":"emergency hotline display on phone"},
  {"id":"why-choose-phone-2-1","url":"http://img.b2bpic.net/free-photo/young-man-pointing-mobile-phone-shirt-cap-looking-cheerful-front-view_176474-58122.jpg","alt":"certified gas fitter badge on phone screen"},
  {"id":"why-choose-phone-2-2","url":"http://img.b2bpic.net/free-photo/woman-working-laptop_53876-25064.jpg","alt":"gas safety certificate on tablet"},
  {"id":"why-choose-phone-3-1","url":"http://img.b2bpic.net/free-photo/couple-ordering-food-restaurant_23-2149269229.jpg","alt":"residential plumbing services on phone"},
  {"id":"why-choose-phone-3-2","url":"http://img.b2bpic.net/free-photo/african-american-guy-looking-blonde-client-holding-tablet_74855-8793.jpg","alt":"homeowner and business owner support app"},
  {"id":"why-choose-phone-4-1","url":"http://img.b2bpic.net/free-photo/businessman-holding-tablet-hands_23-2148308603.jpg","alt":"5-star customer service rating on phone"},
  {"id":"why-choose-phone-4-2","url":"http://img.b2bpic.net/free-photo/portrait-smiling-young-man_171337-4244.jpg","alt":"positive client feedback on tablet"},
  {"id":"process-phone-1-1","url":"http://img.b2bpic.net/free-photo/high-angle-hand-holding-smartphone_23-2149930146.jpg","alt":"contact us button on smartphone"},
  {"id":"process-phone-1-2","url":"http://img.b2bpic.net/free-photo/incoming-call-screen-from-new-year-close-up_169016-43490.jpg","alt":"chat support window on mobile"},
  {"id":"process-phone-2-1","url":"http://img.b2bpic.net/free-photo/couple-traveling-with-vaccination-passports_23-2149351564.jpg","alt":"calendar schedule appointment on phone"},
  {"id":"process-phone-2-2","url":"http://img.b2bpic.net/free-photo/person-holding-cellphone-front-workplace_23-2147890226.jpg","alt":"appointment reminder on tablet"},
  {"id":"process-phone-3-1","url":"http://img.b2bpic.net/free-photo/close-up-woman-car_23-2148906368.jpg","alt":"plumbing inspection checklist on phone"},
  {"id":"process-phone-3-2","url":"http://img.b2bpic.net/free-photo/close-up-hands-taking-photos_23-2149191772.jpg","alt":"leak detection report on tablet"},
  {"id":"process-phone-4-1","url":"http://img.b2bpic.net/free-photo/medium-shot-man-wearing-face-mask_23-2149412774.jpg","alt":"plumber working on pipe on phone screen"},
  {"id":"process-phone-4-2","url":"http://img.b2bpic.net/free-photo/professional-unscrewing-case-metallic-slim-laptop-his-electric-service-lab-clean-repair-it_346278-1794.jpg","alt":"finished repair showcase on tablet"},
  {"id":"process-phone-5-1","url":"http://img.b2bpic.net/free-photo/new-mobile-app_1098-15440.jpg","alt":"customer satisfaction survey on phone"},
  {"id":"process-phone-5-2","url":"http://img.b2bpic.net/free-photo/data-protection-shield-secured-permission-graphic-concept_53876-122466.jpg","alt":"follow-up message on tablet"},
  {"id":"renovation-project-1","url":"http://img.b2bpic.net/free-photo/male-plumber-working-fix-problems-client-s-house_23-2150990696.jpg","alt":"modern bathroom renovation plumbing pipes"},
  {"id":"renovation-project-2","url":"http://img.b2bpic.net/free-photo/dreamy-interior-mall_23-2151591532.jpg","alt":"contemporary en suite rough-in shower"},
  {"id":"renovation-project-3","url":"http://img.b2bpic.net/free-photo/woman-calling-plumber-fox-bathroom-problems_23-2150990699.jpg","alt":"efficient water heater installation residential"},
  {"id":"renovation-project-4","url":"http://img.b2bpic.net/free-photo/modern-sink-black-faucet-marble-countertop_169016-69284.jpg","alt":"luxury kitchen island plumbing pre-install"},
  {"id":"renovation-project-5","url":"http://img.b2bpic.net/free-photo/view-exposed-plumbing-pipes_23-2150990678.jpg","alt":"elegant laundry room plumbing hookups"},
  {"id":"renovation-project-6","url":"http://img.b2bpic.net/free-photo/multiethnic-specialists-engineers-doing-teamwork-modern-production-line_482257-125956.jpg","alt":"stylish wet bar plumbing rough-in complete"},
  {"id":"testimonial-1","url":"http://img.b2bpic.net/free-photo/smiling-businessman-with-tablet-calling-waiter_1262-1976.jpg","alt":"smiling man happy customer review"},
  {"id":"testimonial-2","url":"http://img.b2bpic.net/free-photo/supportive-girlfriend-giving-thumbs-up-decision-boyfriend-move-friendlylooking-tender-charm_1258-142625.jpg","alt":"smiling woman happy customer review"},
  {"id":"testimonial-3","url":"http://img.b2bpic.net/free-photo/closeup-cheerful-middleaged-man-smiling-happy-satisfied-showing-thumbsup-expressing-approval_1258-130248.jpg","alt":"smiling senior man happy customer review"},
  {"id":"testimonial-4","url":"http://img.b2bpic.net/free-photo/positive-excited-young-woman-showing-thumbs-up-having-fun_1262-14331.jpg","alt":"smiling young woman happy customer review"},
  {"id":"testimonial-5","url":"http://img.b2bpic.net/free-photo/man-talking-phone-by-window_23-2148238877.jpg","alt":"smiling diverse man happy customer review"},
  {"id":"calgary-map","url":"http://img.b2bpic.net/free-photo/female-tourist-looking-map_23-2147981939.jpg","alt":"map of calgary and surrounding areas"}
];

function getAssetUrl(id) {
  const asset = assetMap.find(item => item.id === id);
  return asset ? asset.url : ''; // Fallback to empty string if not found
}

function getAssetAlt(id, fallback) {
  const asset = assetMap.find(item => item.id === id);
  return asset ? asset.alt : fallback;
}

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="fluid"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav" className={`${raleway.variable} antialiased`}>
        <NavbarStyleApple
          brandName="Tank Bros. Mechanical LTD."
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "Services", id: "#services" },
            { name: "Why Choose Us", id: "#why-choose" },
            { name: "Process", id: "#process" },
            { name: "Renovations", id: "#renovations" },
            { name: "Reviews", id: "#reviews" },
            { name: "Service Areas", id: "#service-areas" },
            { name: "Get a Quote", id: "#contact" }
          ]}
        />
      </div>
      <div id="hero" data-section="hero" className={`${raleway.variable} antialiased`}>
        <HeroCentered
          title="Calgary's Trusted Plumbing, Heating & Gas Experts"
          description="24/7 Emergency Plumbing, Heating, Furnace & Gas Fitting Services for Residential and Commercial Properties Throughout Calgary."
          background={{ variant: "plain" }}
          avatars={[
            { src: getAssetUrl("avatar-1"), alt: getAssetAlt("avatar-1", "5-Star Rated") },
            { src: getAssetUrl("avatar-2"), alt: getAssetAlt("avatar-2", "Certified Gas Fitter") },
            { src: getAssetUrl("avatar-3"), alt: getAssetAlt("avatar-3", "Residential & Commercial") },
            { src: getAssetUrl("avatar-4"), alt: getAssetAlt("avatar-4", "24/7 Emergency Service") },
            { src: getAssetUrl("avatar-5"), alt: getAssetAlt("avatar-5", "Licensed & Insured") }
          ]}
          avatarText="Trusted by 11+ 5-Star Reviews"
          buttons={[
            { text: "Get A Free Quote", href: "#contact" },
            { text: "Call Now", href: "tel:+14036516599" }
          ]}
          buttonAnimation="opacity"
        />
      </div>
      <div id="services" data-section="services" className={`${raleway.variable} antialiased`}>
        <FeatureCardNine
          title="Comprehensive Plumbing, Heating & Gas Services"
          description="From emergency repairs to full system installations, Tank Bros. Mechanical LTD. is your reliable partner for all residential and commercial needs."
          features={[
            { title: "Plumbing Services", description: "Drain Cleaning, Faucet & Toilet Repair/Installation, Water Heater Services, Leak Detection, Sewer Repair, Home & New Plumbing Systems.", phoneOne: { imageSrc: getAssetUrl("service-phone-1-1"), imageAlt: getAssetAlt("service-phone-1-1", "Plumbing Services App") }, phoneTwo: { imageSrc: getAssetUrl("service-phone-1-2"), imageAlt: getAssetAlt("service-phone-1-2", "Plumbing Tech Workflow") } },
            { title: "Heating Services", description: "Furnace Cleaning, Installation & Maintenance, Heating & Cooling Solutions, Commercial Heating, Garage Heaters.", phoneOne: { imageSrc: getAssetUrl("service-phone-2-1"), imageAlt: getAssetAlt("service-phone-2-1", "Heating Services App") }, phoneTwo: { imageSrc: getAssetUrl("service-phone-2-2"), imageAlt: getAssetAlt("service-phone-2-2", "Heating Tech Diagnostic") } },
            { title: "Gas Fitting Services", description: "Certified Gas Fitter for safe and code-compliant Gas Fitting, Gas Lines, and Plumbing & Gas installations.", phoneOne: { imageSrc: getAssetUrl("service-phone-3-1"), imageAlt: getAssetAlt("service-phone-3-1", "Gas Fitting App") }, phoneTwo: { imageSrc: getAssetUrl("service-phone-3-2"), imageAlt: getAssetAlt("service-phone-3-2", "Gas Tech Safety") } },
            { title: "Renovation & Construction", description: "Full Renovations, New Plumbing Systems, Rough-Ins for Residential Homes & Commercial Projects, Plumbing & Gas Installations.", phoneOne: { imageSrc: getAssetUrl("service-phone-4-1"), imageAlt: getAssetAlt("service-phone-4-1", "Renovation Planner App") }, phoneTwo: { imageSrc: getAssetUrl("service-phone-4-2"), imageAlt: getAssetAlt("service-phone-4-2", "Construction Tracker") } },
            { title: "Emergency Services", description: "Available 24/7 for Emergency Service Calls for all plumbing, heating, and gas problems. Fast, reliable 24/7 Support.", phoneOne: { imageSrc: getAssetUrl("service-phone-5-1"), imageAlt: getAssetAlt("service-phone-5-1", "Emergency Services App") }, phoneTwo: { imageSrc: getAssetUrl("service-phone-5-2"), imageAlt: getAssetAlt("service-phone-5-2", "Emergency Dispatch") } }
          ]}
          showStepNumbers={false}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="why-choose" data-section="why-choose" className={`${raleway.variable} antialiased`}>
        <FeatureCardNine
          title="Why Choose Tank Bros. Mechanical LTD.?"
          description="Experience the difference with a team committed to excellence, safety, and customer satisfaction."
          features={[
            { title: "24/7 Emergency Service", description: "Fast response when you need help most, ensuring your urgent plumbing, heating, or gas issues are resolved quickly.", phoneOne: { imageSrc: getAssetUrl("why-choose-phone-1-1"), imageAlt: getAssetAlt("why-choose-phone-1-1", "24/7 Emergency Service Icon") }, phoneTwo: { imageSrc: getAssetUrl("why-choose-phone-1-2"), imageAlt: getAssetAlt("why-choose-phone-1-2", "Emergency Hotline Display") } },
            { title: "Certified Gas Fitter", description: "Safe, code-compliant gas installations and repairs performed by our certified experts for your peace of mind.", phoneOne: { imageSrc: getAssetUrl("why-choose-phone-2-1"), imageAlt: getAssetAlt("why-choose-phone-2-1", "Certified Gas Fitter Badge") }, phoneTwo: { imageSrc: getAssetUrl("why-choose-phone-2-2"), imageAlt: getAssetAlt("why-choose-phone-2-2", "Gas Safety Certificate") } },
            { title: "Residential & Commercial Experts", description: "Serving homeowners, businesses, builders, and property managers with tailored plumbing, heating, and gas solutions.", phoneOne: { imageSrc: getAssetUrl("why-choose-phone-3-1"), imageAlt: getAssetAlt("why-choose-phone-3-1", "Residential Services") }, phoneTwo: { imageSrc: getAssetUrl("why-choose-phone-3-2"), imageAlt: getAssetAlt("why-choose-phone-3-2", "Commercial Solutions") } },
            { title: "5-Star Customer Service", description: "Trusted by Calgary customers for quality workmanship, transparent service, and unwavering reliability.", phoneOne: { imageSrc: getAssetUrl("why-choose-phone-4-1"), imageAlt: getAssetAlt("why-choose-phone-4-1", "5-Star Rating") }, phoneTwo: { imageSrc: getAssetUrl("why-choose-phone-4-2"), imageAlt: getAssetAlt("why-choose-phone-4-2", "Customer Review Display") } }
          ]}
          showStepNumbers={false}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="process" data-section="process" className={`${raleway.variable} antialiased`}>
        <FeatureCardNine
          title="Our Simple Service Process"
          description="We make getting your plumbing, heating, or gas issues resolved easy and stress-free."
          features={[
            { title: "Contact Us", description: "Reach out via phone or our online form to describe your service needs.", phoneOne: { imageSrc: getAssetUrl("process-phone-1-1"), imageAlt: getAssetAlt("process-phone-1-1", "Contact Us Screen") }, phoneTwo: { imageSrc: getAssetUrl("process-phone-1-2"), imageAlt: getAssetAlt("process-phone-1-2", "Chat Support") } },
            { title: "Schedule Service", description: "We'll work with you to find a convenient time for our certified technicians to visit.", phoneOne: { imageSrc: getAssetUrl("process-phone-2-1"), imageAlt: getAssetAlt("process-phone-2-1", "Schedule Appointment") }, phoneTwo: { imageSrc: getAssetUrl("process-phone-2-2"), imageAlt: getAssetAlt("process-phone-2-2", "Appointment Reminder") } },
            { title: "Inspection & Assessment", description: "Our experts conduct a thorough diagnosis to accurately identify the problem.", phoneOne: { imageSrc: getAssetUrl("process-phone-3-1"), imageAlt: getAssetAlt("process-phone-3-1", "Inspection Checklist") }, phoneTwo: { imageSrc: getAssetUrl("process-phone-3-2"), imageAlt: getAssetAlt("process-phone-3-2", "Diagnostic Report") } },
            { title: "Professional Repair or Installation", description: "We perform the necessary work with precision, adhering to the highest industry standards.", phoneOne: { imageSrc: getAssetUrl("process-phone-4-1"), imageAlt: getAssetAlt("process-phone-4-1", "Technician at Work") }, phoneTwo: { imageSrc: getAssetUrl("process-phone-4-2"), imageAlt: getAssetAlt("process-phone-4-2", "Finished Repair") } },
            { title: "Customer Satisfaction", description: "We ensure you are fully satisfied with our service, offering peace of mind and lasting solutions.", phoneOne: { imageSrc: getAssetUrl("process-phone-5-1"), imageAlt: getAssetAlt("process-phone-5-1", "Satisfaction Survey") }, phoneTwo: { imageSrc: getAssetUrl("process-phone-5-2"), imageAlt: getAssetAlt("process-phone-5-2", "Follow-Up Message") } }
          ]}
          showStepNumbers={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="renovations" data-section="renovations" className={`${raleway.variable} antialiased`}>
        <ProductCardOne
          title="Renovation & Rough-In Projects"
          description="Transform your space with expert plumbing, heating, and gas fitting for new builds and renovations."
          products={[
            { id: "renovation-1", name: "Full Bathroom Renovations", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-1"), imageAlt: getAssetAlt("renovation-project-1", "Modern bathroom renovation plumbing pipes") },
            { id: "renovation-2", name: "New Kitchen Rough-Ins", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-2"), imageAlt: getAssetAlt("renovation-project-2", "New kitchen rough-in exposed plumbing") },
            { id: "renovation-3", name: "Residential Basement Development", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-3"), imageAlt: getAssetAlt("renovation-project-3", "Residential basement development plumbing installation") },
            { id: "renovation-4", name: "Commercial Building Mechanical", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-4"), imageAlt: getAssetAlt("renovation-project-4", "Commercial building mechanical room pipes") },
            { id: "renovation-5", name: "Gas Line Extensions", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-5"), imageAlt: getAssetAlt("renovation-project-5", "Gas line extension for outdoor kitchen") },
            { id: "renovation-6", name: "Water Heater Upgrades", price: "Custom Quote", imageSrc: getAssetUrl("renovation-project-6"), imageAlt: getAssetAlt("renovation-project-6", "Efficient water heater installation") }
          ]}
          gridVariant="bento-grid"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "Request A Quote", href: "#contact" }
          ]}
        />
      </div>
      <div id="reviews" data-section="reviews" className={`${raleway.variable} antialiased`}>
        <TestimonialCardTwelve
          cardTitle="5.0 Star Rating from 11 Customer Reviews"
          cardTag="Trusted by Calgary"
          testimonials={[
            { id: "1", name: "Sarah J.", imageSrc: getAssetUrl("testimonial-1"), imageAlt: getAssetAlt("testimonial-1", "Customer Sarah J.") },
            { id: "2", name: "Michael K.", imageSrc: getAssetUrl("testimonial-2"), imageAlt: getAssetAlt("testimonial-2", "Customer Michael K.") },
            { id: "3", name: "Emily R.", imageSrc: getAssetUrl("testimonial-3"), imageAlt: getAssetAlt("testimonial-3", "Customer Emily R.") },
            { id: "4", name: "David L.", imageSrc: getAssetUrl("testimonial-4"), imageAlt: getAssetAlt("testimonial-4", "Customer David L.") },
            { id: "5", name: "Jessica M.", imageSrc: getAssetUrl("testimonial-5"), imageAlt: getAssetAlt("testimonial-5", "Customer Jessica M.") }
          ]}
          cardAnimation="slide-up"
          useInvertedBackground={true}
          buttons={[
            { text: "Read All Reviews", href: "#" }
          ]}
        />
      </div>
      <div id="emergency-banner" data-section="emergency-banner" className={`${raleway.variable} antialiased`}>
        <ContactCTA
          tag="24/7 Availability"
          title="Emergency Plumbing, Heating or Gas Problem?"
          description="Don't wait! Our expert technicians are available 24 hours a day for immediate response to your urgent needs."
          buttons={[
            { text: "Call Now: (403) 651-6599", href: "tel:+14036516599" }
          ]}
          buttonAnimation="opacity"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
        />
      </div>
      <div id="service-areas" data-section="service-areas" className={`${raleway.variable} antialiased`}>
        <FaqSplitMedia
          title="Serving Calgary & Surrounding Communities"
          description="Tank Bros. Mechanical LTD. proudly provides top-rated plumbing, heating, and gas fitting services across a wide service area."
          faqs={[
            { id: "calgary", title: "Calgary", content: "Comprehensive services available throughout all quadrants of Calgary." },
            { id: "airdrie", title: "Airdrie", content: "Reliable plumbing, heating, and gas fitting for Airdrie residents and businesses." },
            { id: "chestermere", title: "Chestermere", content: "Expert service extending to the Chestermere area for all your mechanical needs." },
            { id: "cochrane", title: "Cochrane", content: "Trusted solutions for plumbing, heating, and gas in Cochrane and nearby regions." },
            { id: "okotoks", title: "Okotoks", content: "Quality service for residential and commercial clients in Okotoks." },
            { id: "high-river", title: "High River", content: "Dependable mechanical services for High River and the surrounding rural areas." },
            { id: "surrounding-areas", title: "Beyond", content: "Contact us to confirm service availability in other surrounding communities." }
          ]}
          imageSrc={getAssetUrl("calgary-map")}
          imageAlt={getAssetAlt("calgary-map", "Map of Calgary and surrounding service areas")}
          mediaAnimation="opacity"
          mediaPosition="right"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
        />
      </div>
      <div id="contact" data-section="contact" className={`${raleway.variable} antialiased`}>
        <ContactCTA
          tag="Free Estimate"
          title="Request Your Free Estimate Today"
          description="Ready to get started? Fill out our quick form or call us directly to receive a no-obligation quote for your plumbing, heating, or gas fitting project."
          buttons={[
            { text: "Request My Free Estimate", href: "#" },
            { text: "Call Now (403) 651-6599", href: "tel:+14036516599" }
          ]}
          buttonAnimation="opacity"
          background={{ variant: "radial-gradient" }}
          useInvertedBackground={false}
        />
      </div>
      <div id="footer" data-section="footer" className={`${raleway.variable} antialiased`}>
        <FooterBase
          logoText="Tank Bros. Mechanical LTD."
          copyrightText="© 2024 Tank Bros. Mechanical LTD. All rights reserved."
          columns={[
            { title: "Quick Links", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Renovations", href: "#renovations" }, { label: "Reviews", href: "#reviews" }, { label: "Emergency Service", href: "#emergency-banner" }, { label: "Contact", href: "#contact" }] },
            { title: "Services", items: [{ label: "Plumbing", href: "#services" }, { label: "Heating", href: "#services" }, { label: "Gas Fitting", href: "#services" }, { label: "Renovations", href: "#renovations" }, { label: "Rough-Ins", href: "#renovations" }] },
            { title: "Contact Us", items: [{ label: "Phone: (403) 651-6599", href: "tel:+14036516599" }, { label: "Open 24 Hours", href: "#" }, { label: "Email Us", href: "mailto:info@tankbros.ca" }, { label: "Request a Quote", href: "#contact" }] }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
