PageSourceSearch

https://www.tireland.ca/

html tireland.ca collected 2026-10-07 15:36:42 UTC 148,101 bytes, 2,553 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    
5        <!-- Google Tag Manager -->
6    
6<script>
vendor: 353 bytes, lines 6-12
6
7    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
8    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
9    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
10    'https://www.googletagmanager.com/gtm.js?id='+i+dl;
11    f.parentNode.insertBefore(j,f);
12    })(window,document,'script','dataLayer','
12GTM-M8NJ2ZT
vendor: 8 bytes, lines 12-13
12');
13    
13</script>
13
14    <!-- End Google Tag Manager -->
15        
16    <meta charset="utf-8">
17    <meta name="viewport" content="width=device-width, initial-scale=1.0">
18    <meta name="csrf-token" content="iTrRBVmeEw5okCwVG64ILbdvm0zJUPE61ptejpNF">
19
20    
21        
22    
23    
24        <title>Tireland | Tires &amp; Auto Service</title>
25        <meta name="description" content="Tireland - Your trusted tire and auto service experts across Canada.">
26    <meta property="og:description" content="Tireland - Your trusted tire and auto service experts across Canada.">
27        <meta property="og:title" content="Tireland | Tires &amp; Auto Service">
28    <meta property="og:type" content="website">
29    
30    
31    <link rel="canonical" href="https://www.tireland.ca/">
32
33
34<link rel="alternate" href="https://www.tireland.ca/" hreflang="en-ca">
35<link rel="alternate" href="https://www.icipneu.ca/" hreflang="fr-ca">
36<link rel="alternate" href="https://www.tireland.ca/" hreflang="x-default">
37    
38    
39    
39<script type="application/ld+json">
40{
41    "@context": "https://schema.org",
42    "@type": "Organization",
43    "name": "Tireland",
44    "url": "https://www.tireland.ca",
45    "logo": "/media/01KJQQC6WST53BJGMJRF0KA8FX.png"
46}
47</script>
47
48
49
50    
50<script type="application/ld+json">
51{
52    "@context": "https://schema.org",
53    "@type": "Product",
54    "name": "Westlake Tires",
55    "url": "https://www.tireland.ca/tires/westlake",
56    "category": "Tires",
57    "brand": {
58        "@type": "Brand",
59        "name": "Westlake"
60    },
61    "manufacturer": {
62        "@type": "Organization",
63        "name": "Westlake"
64    },
65    "image": "https://media.auto1cloud.com/manuf-logos-by-slug/transparent-westlake.png"
66}
67</script>
67
68
69
70    
70<script type="application/ld+json">
71{
72    "@context": "https://schema.org",
73    "@type": "BreadcrumbList",
74    "itemListElement": [
75        {
76            "@type": "ListItem",
77            "position": 1,
78            "name": "Home"
79        }
80    ]
81}
82</script>
82
83    
84        
85    <!-- Google Fonts -->
86    <link rel="preconnect" href="https://fonts.googleapis.com">
87    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
88    <!-- Font Awesome -->
89    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
90
91    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
92    
93    <!-- Tailwind CSS CDN (for now - will compile later) -->
94    
94<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
94
95    
95<script>
96        tailwind.config = {
97            theme: {
98                extend: {
99                    fontFamily: {
100                        sans: ['Inter', 'sans-serif'],
101                    },
102                    colors: {
103                        primary: '#21929c',
104                        'primary-dark': '#21929ccc',
105                        secondary: '#27272a',
106                    },
107                },
108            },
109        }
110    </script>
110
111    
112    <!-- Alpine.js and Collapse plugin for interactivity -->
113    
113<script defer src="https://connect.a1cld.app/libs/alpinejs/collapse-3.14.9.min.js"></script>
113
114    
114<script defer src="https://connect.a1cld.app/libs/alpinejs/alpine-3.14.9.min.js"></script>
114
115    
116    <!-- A1C Connect Core -->
117<script src="https://connect.a1cld.app/apps/a1c-core.js?v=1791387402"></script>
vendor: 1 bytes, line 117
117
118<script>
119    A1C.init({
120        client_id: 2,
121                brand_id: "2",
122                        brand_name: "Tireland",
123                                                        lang: 'EN',
124        primary_color: '#21929c',
125        tire_search_url: '/shop',
126        base_url: '',
127        is_microsite_website: true
128    });
129</script>
129
130
131<!-- A1C Widgets -->
132<script src="https://connect.a1cld.app/apps/vehicle/embed.js?v=1791387402"></script>
vendor: 1 bytes, line 132
132
133<script src="https://connect.a1cld.app/apps/customer/embed.js?v=1791387402"></script>
vendor: 1 bytes, line 133
133
134<script src="https://connect.a1cld.app/apps/cart/embed.js?v=1791387402"></script>
134
135
136<style>
137    #A1C_Cart button { color: #374151; }
138    #A1C_Cart button:hover { opacity: 0.7; }
139</style>
140
141<script>
142/**
143 * Wrapper for A1ClaunchSearchModal that resets/reinitializes the modal
144 * to ensure fresh state with each launch.
145 */
146function A1ClaunchSearchModal(options) {
147    options = options || {};
148    
149    // Wait for A1C to be ready
150    if (typeof A1C === 'undefined') {
151        console.warn('A1C not loaded yet');
152        return;
153    }
154    
155    // If A1C has a searchModal reset method, call it
156    if (A1C.searchModal && typeof A1C.searchModal.reset === 'function') {
157        A1C.searchModal.reset();
158    }
159    
160    // If there's a destroy method, use it for full cleanup
161    if (A1C.searchModal && typeof A1C.searchModal.destroy === 'function') {
162        A1C.searchModal.destroy();
163    }
164    
165    // Small delay to ensure cleanup completes, then launch
166    setTimeout(function() {
167        if (A1C.searchModal && typeof A1C.searchModal.launch === 'function') {
168            A1C.searchModal.launch(options);
169        } else if (typeof A1C.launchSearchModal === 'function') {
170            A1C.launchSearchModal(options);
171        } else {
172            console.warn('A1C search modal not available');
173        }
174    }, 10);
175}
176</script>
176
177    
178    <!-- A1C Events (centralized tracking) -->
179    
179<script src="https://connect.a1cld.app/js/events.js?v=1791387402"></script>
179
180    
181    <style>
182        [x-cloak] { display: none !important; }
183        
184        html, body, * { 
185            font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; 
186        }
187        
188        @keyframes kenBurns { 
189            0% { transform: scale(1); } 
190            50% { transform: scale(1.08); } 
191            100% { transform: scale(1); } 
192        }
193        .hero-zoom { animation: kenBurns 25s ease-in-out infinite; }
194        
195        .gradient-text {
196            background: linear-gradient(135deg, #21929c 0%, #ff6b6b 100%);
197            -webkit-background-clip: text;
198            -webkit-text-fill-color: transparent;
199            background-clip: text;
200        }
201        
202        .nav-link {
203            position: relative;
204            display: flex;
205            align-items: center;
206            gap: 0.5rem;
207            padding: 1rem 1.25rem;
208            font-size: 0.875rem;
209            font-weight: 500;
210            color: white;
211            transition: background-color 0.2s ease;
212        }
213        .nav-link:hover {
214            background-color: rgba(255, 255, 255, 0.1);
215        }
216        .nav-link svg.nav-icon {
217            color: #21929c;
218        }
219        
220        /* Homepage service icons - use primary color */
221        .homepage-service-icon svg {
222            width: 2rem;
223            height: 2rem;
224            fill: #21929c !important;
225            transition: fill 0.3s ease;
226        }
227        .homepage-service-icon svg path,
228        .homepage-service-icon svg g,
229        .homepage-service-icon svg circle,
230        .homepage-service-icon svg rect {
231            fill: #21929c !important;
232            transition: fill 0.3s ease;
233        }
234        .group:hover .homepage-service-icon svg,
235        .group:hover .homepage-service-icon svg path,
236        .group:hover .homepage-service-icon svg g,
237        .group:hover .homepage-service-icon svg circle,
238        .group:hover .homepage-service-icon svg rect {
239            fill: white !important;
240        }
241        
242        .lang-dropdown {
243            opacity: 0;
244            visibility: hidden;
245            transform: translateY(4px);
246            transition: all 0.15s ease;
247        }
248        .lang-switcher:hover .lang-dropdown {
249            opacity: 1;
250            visibility: visible;
251            transform: translateY(0);
252        }
253        
254        #main-header.scrolled {
255            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
256        }
257        
258        @keyframes slow-pulse {
259            0%, 100% { opacity: 1; }
260            50% { opacity: 0.6; }
261        }
262    </style>
263    
264        
265    
266    
267</head>
268<body class="bg-gray-50 min-h-screen">
269        <!-- Google Tag Manager (noscript) -->
vendor: 77 bytes, lines 269-271
269
270    <noscript>
271    <iframe src="https://www.googletagmanager.com/ns.html?id=
271GTM-M8NJ2ZT
vendor: 96 bytes, lines 271-274
271"
272    height="0" width="0" style="display:none;visibility:hidden"></iframe>
273    </noscript>
274    
274<!-- End Google Tag Manager (noscript) -->
275    
276        
277        
278    <!-- ========== HEADER ========== -->
279
280<!-- Header Promotion Banner -->
281
282<!-- Sticky Header Wrapper - Contains Top Bar + Main Header + Nav -->
283<div id="sticky-header-wrapper" class="sticky top-0 z-50" x-data="{ mobileMenuOpen: false }">
284
285<!-- Top Info Bar -->
286<div class="bg-secondary text-white text-sm">
287    <div class="container mx-auto px-4">
288        
289                
290        
291        <div class="hidden md:flex items-center justify-between py-2">
292            <div class="flex items-center gap-6">
293                                
294                <span id="topbar-hours" class="flex items-center gap-2 text-gray-400">
295                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
296                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
297                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
298                    </svg>
299                    <span>Select a location for hours</span>
300                </span>
301                            </div>
302            
303            <div class="flex items-center gap-6">
304                
305                <!-- Language Switcher -->
306                                <div class="lang-switcher relative">
307                    <button class="hidden md:flex items-center gap-1 text-sm text-white hover:text-primary transition">
308                        <span class="font-semibold">EN</span>
309                        <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
310                    </button>
311                    <div class="lang-dropdown absolute right-0 top-full mt-1 bg-white rounded-lg shadow-lg py-1 min-w-[80px] z-50">
312                        <a href="https://www.tireland.ca/" class="block px-4 py-2 text-sm text-secondary font-semibold bg-gray-100">English</a>
313                        <a href="https://www.icipneu.ca/" class="block px-4 py-2 text-sm text-secondary hover:bg-gray-100">Français</a>
314                    </div>
315                </div>
316                                <div class="hidden md:block w-px h-4 bg-white/30"></div>
317                
318                <!-- My Vehicle (A1C Integration) -->
319                <div id="a1c-vehicle-widget" class="hidden md:flex items-center gap-2 cursor-pointer hover:text-primary transition" onclick="A1C.currentVehicle.openModal()">
320                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/></svg>
321                    <span id="a1c-vehicle-label">My Vehicle</span>
322                    <svg class="w-3 h-3 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
323                </div>
324                
325                <!-- Sign In (A1C Integration) -->
326                <div id="a1c-customer-widget" class="hidden md:flex items-center gap-2 cursor-pointer hover:text-primary transition" onclick="openCustomerModal()">
327                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
328                    <span id="a1c-customer-label">Sign In</span>
329                </div>
330                
331                <div class="hidden md:block w-px h-4 bg-white/30"></div>
332                
333                <!-- Proudly Canadian -->
334                            </div>
335        </div>
336    </div>
337</div>
338
339<!-- Main Header (White) -->
340<header id="main-header" class="bg-white shadow-md transition-all duration-300">
341    <div class="container mx-auto px-4">
342        <div class="flex items-center justify-between py-3 gap-4">
343            
344            <!-- Logo -->
345            <a href="/" class="flex-shrink-0">
346                                <img src="/media/field-groups/01KNK2ZV4JKW5T4950TYQ6NJME.png" alt="Tireland" class="h-10 sm:h-12 lg:h-14 max-w-[140px] sm:max-w-[180px] md:max-w-[220px] lg:max-w-[250px] object-contain">
347                            </a>
348            
349            <!-- Store Location Selector -->
350                        
351            <button onclick="openStoreSelector()" class="hidden lg:flex items-center gap-3 px-4 py-2 hover:bg-gray-50 rounded-lg transition">
352                <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
353                    <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg>
354                </div>
355                <div class="text-left">
356                    <div class="text-xs text-gray-400 uppercase tracking-wide">Find a Store</div>
357                    <div class="font-semibold text-secondary">Select Location</div>
358                </div>
359            </button>
360                        
361            <!-- Search Bar (Desktop - 2xl and up) -->
362            <div class="hidden 2xl:block flex-grow max-w-xl mx-6">
363                <div x-data="siteSearch()" 
364     x-on:click.outside="close()" 
365     x-on:keydown.escape.window="close()"
366     class="relative w-full">
367    
368    
369    <div class="relative">
370        <input 
371            type="text" 
372            x-model="query"
373            x-on:input.debounce.300ms="search()"
374            x-on:focus="if(query.length >= 2) open = true"
375            x-on:keydown.arrow-down.prevent="navigateDown()"
376            x-on:keydown.arrow-up.prevent="navigateUp()"
377            x-on:keydown.enter.prevent="selectCurrent()"
378            placeholder="Search tires, services, locations..." 
379            class="w-full py-3 px-5 pr-12 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none transition"
380            autocomplete="off"
381        >
382        
383        
384        <div class="absolute right-4 top-1/2 -translate-y-1/2">
385            <svg x-show="!loading" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
386                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
387            </svg>
388            <svg x-show="loading" x-cloak class="w-5 h-5 text-primary animate-spin" fill="none" viewBox="0 0 24 24">
389                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
390                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
391            </svg>
392        </div>
393        
394        
395        <button 
396            x-show="query.length > 0" 
397            x-on:click="clear()"
398            x-cloak
399            class="absolute right-12 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 transition"
400        >
401            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
402                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
403            </svg>
404        </button>
405    </div>
406    
407    
408    <div 
409        x-show="open && searched" 
410        x-cloak
411        x-transition:enter="transition ease-out duration-200"
412        x-transition:enter-start="opacity-0 translate-y-1"
413        x-transition:enter-end="opacity-100 translate-y-0"
414        x-transition:leave="transition ease-in duration-150"
415        x-transition:leave-start="opacity-100 translate-y-0"
416        x-transition:leave-end="opacity-0 translate-y-1"
417        class="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden z-50 max-h-[70vh] overflow-y-auto"
418    >
419        
420        <template x-if="results.brands && results.brands.results.length > 0">
421            <div class="border-b border-gray-100">
422                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
423                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-width="2" d="M12 6v6l4 2"/></svg>
424                    Tire Brands
425                    <span class="ml-auto text-gray-400 normal-case" x-text="results.brands.total + ' found'"></span>
426                </div>
427                <template x-for="(item, index) in results.brands.results" :key="'brand-' + index">
428                    <a 
429                        :href="item.url" 
430                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
431                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('brands', index) }"
432                        x-on:mouseenter="selectedIndex = getGlobalIndex('brands', index)"
433                    >
434                        <img :src="item.logo" :alt="item.name" class="w-10 h-10 object-contain bg-white rounded border p-1">
435                        <span class="font-medium text-secondary" x-text="item.name"></span>
436                    </a>
437                </template>
438            </div>
439        </template>
440        
441        
442        <template x-if="results.tires && results.tires.results.length > 0">
443            <div class="border-b border-gray-100">
444                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
445                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
446                    Tires
447                    <span class="ml-auto text-gray-400 normal-case" x-text="results.tires.total + ' found'"></span>
448                </div>
449                <template x-for="(item, index) in results.tires.results" :key="'tire-' + index">
450                    <a 
451                        :href="item.url" 
452                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
453                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('tires', index) }"
454                        x-on:mouseenter="selectedIndex = getGlobalIndex('tires', index)"
455                    >
456                        <template x-if="item.image">
457                            <img :src="item.image" :alt="item.name" class="w-10 h-10 object-contain">
458                        </template>
459                        <template x-if="!item.image">
460                            <div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center">
461                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
462                            </div>
463                        </template>
464                        <div>
465                            <div class="font-medium text-secondary" x-text="item.name"></div>
466                            <div class="text-xs text-gray-500">
467                                <span x-text="item.brand"></span>
468                                <template x-if="item.season">
469                                    <span> · <span x-text="item.season"></span></span>
470                                </template>
471                            </div>
472                        </div>
473                    </a>
474                </template>
475            </div>
476        </template>
477        
478        
479        <template x-if="results.services && results.services.results.length > 0">
480            <div class="border-b border-gray-100">
481                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
482                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
483                    Services
484                    <span class="ml-auto text-gray-400 normal-case" x-text="results.services.total + ' found'"></span>
485                </div>
486                <template x-for="(item, index) in results.services.results" :key="'service-' + index">
487                    <a 
488                        :href="item.url" 
489                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
490                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('services', index) }"
491                        x-on:mouseenter="selectedIndex = getGlobalIndex('services', index)"
492                    >
493                        <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
494                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
495                        </div>
496                        <div class="flex-grow">
497                            <span class="font-medium text-secondary" x-text="item.name"></span>
498                        </div>
499                        
500                        <template x-if="item.available === true">
501                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">
502                                ✓ Available
503                            </span>
504                        </template>
505                        <template x-if="item.available === false">
506                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded-full">
507                                Not at this location
508                            </span>
509                        </template>
510                    </a>
511                </template>
512            </div>
513        </template>
514        
515        
516        <template x-if="results.locations && results.locations.results.length > 0">
517            <div class="border-b border-gray-100">
518                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
519                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
519<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
520                    Locations
521                    <span class="ml-auto text-gray-400 normal-case" x-text="results.locations.total + ' found'"></span>
522                </div>
523                <template x-for="(item, index) in results.locations.results" :key="'location-' + index">
524                    <a 
525                        :href="item.url" 
526                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
527                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('locations', index) }"
528                        x-on:mouseenter="selectedIndex = getGlobalIndex('locations', index)"
529                    >
530                        <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
531                            <svg class="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg>
532                        </div>
533                        <div>
534                            <div class="font-medium text-secondary" x-text="item.name"></div>
535                            <div class="text-xs text-gray-500" x-text="item.city + ', ' + item.prov_state"></div>
536                        </div>
537                    </a>
538                </template>
539            </div>
540        </template>
541        
542        
543        <template x-if="results.pages && results.pages.results.length > 0">
544            <div>
545                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
546                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
547                    Pages
548                </div>
549                <template x-for="(item, index) in results.pages.results" :key="'page-' + index">
550                    <a 
551                        :href="item.url" 
552                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
553                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('pages', index) }"
554                        x-on:mouseenter="selectedIndex = getGlobalIndex('pages', index)"
555                    >
556                        <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
557                            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
558                        </div>
559                        <span class="font-medium text-secondary" x-text="item.name"></span>
560                    </a>
561                </template>
562            </div>
563        </template>
564        
565        
566        <template x-if="searched && !hasResults()">
567            <div class="px-4 py-8 text-center text-gray-500">
568                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
569                <p class="font-medium">No results found</p>
570                <p class="text-sm mt-1">Try a different search term</p>
571            </div>
572        </template>
573    </div>
574</div>
575
576<script>
577function siteSearch() {
578    return {
579        query: '',
580        results: {},
581        loading: false,
582        open: false,
583        searched: false,
584        selectedIndex: -1,
585        categories: ['brands', 'tires', 'services', 'locations', 'pages'],
586        
587        async search() {
588            if (this.query.length < 2) {
589                this.results = {};
590                this.open = false;
591                this.searched = false;
592                return;
593            }
594            
595            this.loading = true;
596            
597            try {
598                const response = await fetch('/api/search?q=' + encodeURIComponent(this.query));
599                this.results = await response.json();
600                this.open = true;
601                this.searched = true;
602                this.selectedIndex = -1;
603                
604                // Track search event
605                const resultsCount = this.getTotalResultsCount();
606                if (typeof A1C !== 'undefined' && A1C.events) {
607                    A1C.events.emit('a1c:engagement:search', {
608                        search_term: this.query,
609                        results_count: resultsCount
610                    });
611                }
612            } catch (error) {
613                console.error('Search error:', error);
614                this.results = {};
615            } finally {
616                this.loading = false;
617            }
618        },
619        
620        hasResults() {
621            return this.categories.some(cat => 
622                this.results[cat] && this.results[cat].results && this.results[cat].results.length > 0
623            );
624        },
625        
626        getTotalItems() {
627            let total = 0;
628            this.categories.forEach(cat => {
629                if (this.results[cat] && this.results[cat].results) {
630                    total += this.results[cat].results.length;
631                }
632            });
633            return total;
634        },
635        
636        getTotalResultsCount() {
637            let total = 0;
638            this.categories.forEach(cat => {
639                if (this.results[cat] && this.results[cat].total) {
640                    total += this.results[cat].total;
641                }
642            });
643            return total;
644        },
645        
646        getGlobalIndex(category, localIndex) {
647            let offset = 0;
648            for (const cat of this.categories) {
649                if (cat === category) {
650                    return offset + localIndex;
651                }
652                if (this.results[cat] && this.results[cat].results) {
653                    offset += this.results[cat].results.length;
654                }
655            }
656            return -1;
657        },
658        
659        getItemAtIndex(index) {
660            let offset = 0;
661            for (const cat of this.categories) {
662                if (this.results[cat] && this.results[cat].results) {
663                    const items = this.results[cat].results;
664                    if (index < offset + items.length) {
665                        return items[index - offset];
666                    }
667                    offset += items.length;
668                }
669            }
670            return null;
671        },
672        
673        navigateDown() {
674            const total = this.getTotalItems();
675            if (total === 0) return;
676            this.selectedIndex = (this.selectedIndex + 1) % total;
677        },
678        
679        navigateUp() {
680            const total = this.getTotalItems();
681            if (total === 0) return;
682            this.selectedIndex = this.selectedIndex <= 0 ? total - 1 : this.selectedIndex - 1;
683        },
684        
685        selectCurrent() {
686            if (this.selectedIndex >= 0) {
687                const item = this.getItemAtIndex(this.selectedIndex);
688                if (item && item.url) {
689                    window.location.href = item.url;
690                }
691            }
692        },
693        
694        close() {
695            this.open = false;
696            this.selectedIndex = -1;
697        },
698        
699        clear() {
700            this.query = '';
701            this.results = {};
702            this.open = false;
703            this.searched = false;
704            this.selectedIndex = -1;
705        }
706    };
707}
708</script>
708
709            </div>
710            
711            <!-- Right Actions -->
712            <div class="flex items-center gap-3 md:gap-5">
713                
714                <!-- Search Button (Between md and 2xl breakpoints) -->
715                <button 
716                    onclick="openSearchModal()"
717                    class="hidden md:block 2xl:hidden relative p-2 hover:bg-gray-100 rounded-full transition"
718                    aria-label="Search"
719                >
720                    <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
721                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
722                    </svg>
723                </button>
724                
725                <!-- Cart (A1C Integration) -->
726                <button id="a1c-cart-widget" onclick="A1C_Cart.goToCart()" class="relative p-2 hover:bg-gray-100 rounded-full transition">
727                    <svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
728                    <span id="a1c-cart-badge" class="absolute -top-1 -right-1 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold hidden">0</span>
729                </button>
730                
731                <!-- Call Us Button (Microsite only) -->
732                                
733                <!-- Book Appointment Button -->
734                                <a href="/find-a-location?return_to=request-appointment" class="flex flex-shrink-0 items-center gap-2 bg-primary text-white px-3 xl:px-5 py-2.5 rounded-lg hover:bg-primary-dark transition shadow-lg shadow-primary/30 whitespace-nowrap">
735                    <svg class="w-5 h-5 xl:w-4 xl:h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
736                    <span class="hidden xl:inline font-bold">Appointment</span>
737                </a>
738                                
739                <!-- Mobile Menu Toggle -->
740                <button class="md:hidden p-2" @click="mobileMenuOpen = !mobileMenuOpen">
741                    <svg x-show="!mobileMenuOpen" class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
742                    <svg x-show="mobileMenuOpen" x-cloak class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
743                </button>
744            </div>
745        </div>
746    </div>
747    
748    <!-- Navigation (Dark) -->
749    <nav class="bg-secondary relative" x-data="{ openMenu: null }" @click.outside="openMenu = null">
750        <div class="container mx-auto px-4">
751            <ul class="hidden md:flex items-center justify-center gap-1">
752                                    
753                                            <li>
754                            <button @click="openMenu = openMenu === 'main-menu-0' ? null : 'main-menu-0'"
755        :class="openMenu === 'main-menu-0' ? 'bg-white/10' : ''"
756        class="nav-link flex items-center gap-1.5">
757    Tires
758    <svg class="w-3.5 h-3.5 transition-transform" :class="openMenu === 'main-menu-0' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
759        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
760    </svg>
761</button>
762
763
764    
765                        </li>
766                                            <li>
767                            <a href="/wheels" target="_self" class="nav-link">
768        Wheels
769    </a>
770                        </li>
771                                            <li>
772                            <button @click="openMenu = openMenu === 'main-menu-2' ? null : 'main-menu-2'"
773        :class="openMenu === 'main-menu-2' ? 'bg-white/10' : ''"
774        class="nav-link flex items-center gap-1.5">
775    Services
776    <svg class="w-3.5 h-3.5 transition-transform" :class="openMenu === 'main-menu-2' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
777        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
778    </svg>
779</button>
780
781
782    
783                        </li>
784                                            <li>
785                            <a href="/promotions" target="_self" class="nav-link">
786        Promotions
787    </a>
788                        </li>
789                                            <li>
790                            <a href="/find-a-location" target="_self" class="nav-link">
791        All Locations
792    </a>
793                        </li>
794                                            <li>
795                            <a href="/finance" target="_self" class="nav-link">
796        Finance
797    </a>
798                        </li>
799                                            <li>
800                            <a href="/resources" target="_self" class="nav-link">
801        Resources
802    </a>
803                        </li>
804                                                </ul>
805        </div>
806        
807        
808        <div x-show="openMenu === 'main-menu-0'"
809     x-transition:enter="transition ease-out duration-200"
810     x-transition:enter-start="opacity-0 -translate-y-2"
811     x-transition:enter-end="opacity-100 translate-y-0"
812     x-transition:leave="transition ease-in duration-150"
813     x-transition:leave-start="opacity-100 translate-y-0"
814     x-transition:leave-end="opacity-0 -translate-y-2"
815     class="absolute left-0 right-0 bg-white border-t border-gray-100 shadow-2xl z-40"
816     x-cloak>
817    <div class="container mx-auto px-4 py-8">
818        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
819            
820            
821            <div>
822                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Shop by Season</h3>
823                <ul class="space-y-1">
824                                        <li>
825                        <a href="/tires/seasons/all-season"
826                           @click="openMenu = null"
827                           class="flex items-center gap-3 py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition group">
828                            <span class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center text-lg transition-transform group-hover:scale-110">🍃</span>
829                            <span class="font-medium">All Season</span>
830                        </a>
831                    </li>
832                                        <li>
833                        <a href="/tires/seasons/winter"
834                           @click="openMenu = null"
835                           class="flex items-center gap-3 py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition group">
836                            <span class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-lg transition-transform group-hover:scale-110">❄️</span>
837                            <span class="font-medium">Winter</span>
838                        </a>
839                    </li>
840                                        <li>
841                        <a href="/tires/seasons/summer"
842                           @click="openMenu = null"
843                           class="flex items-center gap-3 py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition group">
844                            <span class="w-10 h-10 rounded-full bg-amber-50 flex items-center justify-center text-lg transition-transform group-hover:scale-110">☀️</span>
845                            <span class="font-medium">Summer</span>
846                        </a>
847                    </li>
848                                        <li>
849                        <a href="/tires/seasons/all-weather"
850                           @click="openMenu = null"
851                           class="flex items-center gap-3 py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition group">
852                            <span class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center text-lg transition-transform group-hover:scale-110">🌦️</span>
853                            <span class="font-medium">All Weather</span>
854                        </a>
855                    </li>
856                                    </ul>
857            </div>
858            
859            
860            <div>
861                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Popular Brands</h3>
862                <ul class="space-y-1">
863                                        <li>
864                        <a href="/tires/falken"
865                           @click="openMenu = null"
866                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
867                            Falken
868                        </a>
869                    </li>
870                                        <li>
871                        <a href="/tires/goodyear"
872                           @click="openMenu = null"
873                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
874                            Goodyear
875                        </a>
876                    </li>
877                                        <li>
878                        <a href="/tires/uniroyal"
879                           @click="openMenu = null"
880                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
881                            Uniroyal
882                        </a>
883                    </li>
884                                        <li>
885                        <a href="/tires/yokohama"
886                           @click="openMenu = null"
887                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
888                            Yokohama
889                        </a>
890                    </li>
891                                        <li>
892                        <a href="/tires/pirelli"
893                           @click="openMenu = null"
894                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
895                            Pirelli
896                        </a>
897                    </li>
898                                        <li>
899                        <a href="/tires/continental"
900                           @click="openMenu = null"
901                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
902                            Continental
903                        </a>
904                    </li>
905                                        <li class="pt-2">
906                        <a href="/tires"
907                           @click="openMenu = null"
908                           class="inline-flex items-center gap-1 text-sm font-semibold text-primary hover:text-primary-dark transition">
909                            View All Brands
910                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
911                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
912                            </svg>
913                        </a>
914                    </li>
915                </ul>
916            </div>
917            
918            
919                        <div>
920                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4">Tire Services</h3>
921                <ul class="space-y-1">
922                                        <li>
923                        <a href="/services/tire-rotations"
924                           @click="openMenu = null"
925                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
926                            Tire Rotations
927                        </a>
928                    </li>
929                                        <li>
930                        <a href="/services/tires"
931                           @click="openMenu = null"
932                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
933                            Tires and Tire Service
934                        </a>
935                    </li>
936                                        <li>
937                        <a href="/services/wheel-alignments"
938                           @click="openMenu = null"
939                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
940                            Wheel Alignments
941                        </a>
942                    </li>
943                                    </ul>
944            </div>
945                        
946            
947            <div>
948                <div class="bg-gray-50 rounded-xl p-6 h-full flex flex-col justify-between">
949                    <div>
950                        <h3 class="font-bold text-secondary text-lg mb-2">Need Help Choosing?</h3>
951                        <p class="text-gray-600 text-sm mb-5">Use our tire finder to get personalized recommendations for your vehicle.</p>
952                    </div>
953                    <a href="/shop"
954                       @click="openMenu = null"
955                       class="inline-flex items-center justify-center gap-2 w-full py-3 rounded-lg text-white font-semibold text-sm transition bg-primary hover:bg-primary-dark">
956                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
957                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
958                        </svg>
959                        Find Your Tires
960                    </a>
961                </div>
962            </div>
963            
964        </div>
965    </div>
966</div>
967<div x-show="openMenu === 'main-menu-2'"
968     x-transition:enter="transition ease-out duration-200"
969     x-transition:enter-start="opacity-0 -translate-y-2"
970     x-transition:enter-end="opacity-100 translate-y-0"
971     x-transition:leave="transition ease-in duration-150"
972     x-transition:leave-start="opacity-100 translate-y-0"
973     x-transition:leave-end="opacity-0 -translate-y-2"
974     class="absolute left-0 right-0 bg-white border-t border-gray-100 shadow-2xl z-40"
975     x-cloak>
976    <div class="container mx-auto px-4 py-8">
977        <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
978            
979            
980                        <div>
981                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
982                    <span class="w-2 h-2 rounded-full bg-gray-400"></span>
983                    Tire Services
984                </h3>
985                <ul class="space-y-1">
986                                        <li>
987                        <a href="/services/tire-rotations" 
988                           @click="openMenu = null"
989                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
990                            Tire Rotations
991                        </a>
992                    </li>
993                                        <li>
994                        <a href="/services/tires" 
995                           @click="openMenu = null"
996                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
997                            Tires and Tire Service
998                        </a>
999                    </li>
1000                                        <li>
1001                        <a href="/services/wheel-alignments" 
1002                           @click="openMenu = null"
1003                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1004                            Wheel Alignments
1005                        </a>
1006                    </li>
1007                                    </ul>
1008            </div>
1009                        
1010            
1011                        <div>
1012                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
1013                    <span class="w-2 h-2 rounded-full bg-amber-500"></span>
1014                    Maintenance
1015                </h3>
1016                <ul class="space-y-1">
1017                                        <li>
1018                        <a href="/services/vehicle-maintenance"
1019                           @click="openMenu = null"
1020                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1021                            General Vehicle Maintenance
1022                        </a>
1023                    </li>
1024                                        <li>
1025                        <a href="/services/inspections"
1026                           @click="openMenu = null"
1027                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1028                            Vehicle Inspections
1029                        </a>
1030                    </li>
1031                                        <li>
1032                        <a href="/services/oil-changes-lube"
1033                           @click="openMenu = null"
1034                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1035                            Lube Oil And Filter
1036                        </a>
1037                    </li>
1038                                    </ul>
1039            </div>
1040                        
1041            
1042                        <div>
1043                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
1044                    <span class="w-2 h-2 rounded-full bg-red-500"></span>
1045                    Mechanical
1046                </h3>
1047                <ul class="space-y-1">
1048                                        <li>
1049                        <a href="/services/ac-repair"
1050                           @click="openMenu = null"
1051                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1052                            Vehicle A/C Repair
1053                        </a>
1054                    </li>
1055                                        <li>
1056                        <a href="/services/alternator-service"
1057                           @click="openMenu = null"
1058                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1059                            Alternator Service
1060                        </a>
1061                    </li>
1062                                        <li>
1063                        <a href="/services/axle-cv"
1064                           @click="openMenu = null"
1065                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1066                            Axle and CV
1067                        </a>
1068                    </li>
1069                                        <li>
1070                        <a href="/services/batteries"
1071                           @click="openMenu = null"
1072                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1073                            Vehicle Battery Service
1074                        </a>
1075                    </li>
1076                                    </ul>
1077            </div>
1078                        
1079            
1080                        <div>
1081                <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2">
1082                    <span class="w-2 h-2 rounded-full bg-blue-500"></span>
1083                    Other Services
1084                </h3>
1085                <ul class="space-y-1">
1086                                        <li>
1087                        <a href="/services/fleet-service"
1088                           @click="openMenu = null"
1089                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1090                            Vehicle Fleet Service
1091                        </a>
1092                    </li>
1093                                        <li>
1094                        <a href="/services/rims-wheels"
1095                           @click="openMenu = null"
1096                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1097                            Rims and Wheels
1098                        </a>
1099                    </li>
1100                                        <li>
1101                        <a href="/services/vehicle-service-intervals"
1102                           @click="openMenu = null"
1103                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1104                            Vehicle Service Intervals
1105                        </a>
1106                    </li>
1107                                        <li>
1108                        <a href="/services/out-of-province-inspections"
1109                           @click="openMenu = null"
1110                           class="block py-2 px-2 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded transition">
1111                            Out Of Province Inspections
1112                        </a>
1113                    </li>
1114                                    </ul>
1115            </div>
1116                        
1117            
1118            <div>
1119                <div class="bg-secondary rounded-xl p-6 h-full flex flex-col justify-between text-white">
1120                    <div>
1121                        <h3 class="font-bold text-lg mb-2">Book Your Service</h3>
1122                        <p class="text-white/70 text-sm mb-5">Schedule an appointment online and save time at the shop.</p>
1123                    </div>
1124                    <div class="space-y-3">
1125                        <a href="/find-a-location?return_to=request-appointment"
1126                           @click="openMenu = null"
1127                           class="inline-flex items-center justify-center gap-2 w-full py-3 rounded-lg font-semibold text-sm transition bg-primary hover:bg-primary-dark">
1128                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1129                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
1130                            </svg>
1131                            Book Now
1132                        </a>
1133                        <a href="/services"
1134                           @click="openMenu = null"
1135                           class="inline-flex items-center justify-center gap-2 w-full py-2.5 rounded-lg font-medium text-sm text-white/90 hover:text-white transition border border-white/30 hover:border-white/50">
1136                            View All Services
1137                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1138                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
1139                            </svg>
1140                        </a>
1141                    </div>
1142                </div>
1143            </div>
1144            
1145        </div>
1146    </div>
1147</div>
1148    </nav>
1149    
1150    
1151    <div 
1152        x-show="mobileMenuOpen" 
1153        x-cloak
1154        x-transition:enter="transition ease-out duration-200"
1155        x-transition:enter-start="opacity-0 -translate-y-2"
1156        x-transition:enter-end="opacity-100 translate-y-0"
1157        x-transition:leave="transition ease-in duration-150"
1158        x-transition:leave-start="opacity-100 translate-y-0"
1159        x-transition:leave-end="opacity-0 -translate-y-2"
1160        class="md:hidden border-t border-gray-200 bg-white shadow-lg max-h-[70vh] overflow-y-auto"
1161    >
1162        <nav class="container mx-auto px-4 py-4">
1163            
1164            <div class="flex items-center justify-around py-3 mb-3 border-b border-gray-100">
1165                <button 
1166                    onclick="openCustomerModal()"
1167                    class="flex flex-col items-center gap-1 text-gray-600 hover:text-primary"
1168                >
1169                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1170                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
1171                    </svg>
1172                    <span class="text-xs" id="a1c-customer-label-mobile">Sign In</span>
1173                </button>
1174                
1175                <button 
1176                    onclick="if(typeof A1C !== 'undefined' && A1C.currentVehicle) A1C.currentVehicle.openModal()"
1177                    class="flex flex-col items-center gap-1 text-gray-600 hover:text-primary"
1178                >
1179                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1180                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"/>
1181                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"/>
1182                    </svg>
1183                    <span class="text-xs" id="a1c-vehicle-label-mobile">My Vehicle</span>
1184                </button>
1185                
1186                <button 
1187                    @click="mobileMenuOpen = false; $nextTick(() => openSearchModal())"
1188                    class="flex flex-col items-center gap-1 text-gray-600 hover:text-primary"
1189                >
1190                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1191                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
1192                    </svg>
1193                    <span class="text-xs">Search</span>
1194                </button>
1195            </div>
1196            
1197            
1198            <ul class="space-y-1">
1199                                                                                    
1200                        <li>
1201                            <a 
1202                                href="#"
1203                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1204                                @click="mobileMenuOpen = false"
1205                            >
1206                                Tires
1207                            </a>
1208                            
1209                                                    </li>
1210                                                                    
1211                        <li>
1212                            <a 
1213                                href="/wheels"
1214                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1215                                @click="mobileMenuOpen = false"
1216                            >
1217                                Wheels
1218                            </a>
1219                            
1220                                                    </li>
1221                                                                    
1222                        <li>
1223                            <a 
1224                                href="#"
1225                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1226                                @click="mobileMenuOpen = false"
1227                            >
1228                                Services
1229                            </a>
1230                            
1231                                                    </li>
1232                                                                    
1233                        <li>
1234                            <a 
1235                                href="/promotions"
1236                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1237                                @click="mobileMenuOpen = false"
1238                            >
1239                                Promotions
1240                            </a>
1241                            
1242                                                    </li>
1243                                                                    
1244                        <li>
1245                            <a 
1246                                href="/find-a-location"
1247                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1248                                @click="mobileMenuOpen = false"
1249                            >
1250                                All Locations
1251                            </a>
1252                            
1253                                                    </li>
1254                                                                    
1255                        <li>
1256                            <a 
1257                                href="/finance"
1258                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1259                                @click="mobileMenuOpen = false"
1260                            >
1261                                Finance
1262                            </a>
1263                            
1264                                                    </li>
1265                                                                    
1266                        <li>
1267                            <a 
1268                                href="/resources"
1269                                                                class="block px-4 py-3 text-secondary font-medium hover:bg-gray-50 rounded-lg"
1270                                @click="mobileMenuOpen = false"
1271                            >
1272                                Resources
1273                            </a>
1274                            
1275                                                    </li>
1276                                                </ul>
1277            
1278            
1279                        
1280            
1281                        <div class="flex items-center justify-center gap-4 mt-4 pt-4 border-t border-gray-100">
1282                <a href="https://www.tireland.ca/" class="px-4 py-2 rounded bg-gray-200 font-semibold">English</a>
1283                <a href="https://www.icipneu.ca/" class="px-4 py-2 rounded hover:bg-gray-100">Français</a>
1284            </div>
1285                    </nav>
1286    </div>
1287</header>
1288
1289</div>
1290<!-- ========== END HEADER ========== -->
1291
1292<!-- ========== SEARCH MODAL ========== -->
1293<div 
1294    id="search-modal"
1295    x-data="{ open: false }"
1296    x-show="open"
1297    x-on:open-search-modal.window="open = true; $nextTick(() => $refs.searchInput?.focus())"
1298    x-on:keydown.escape.window="open = false"
1299    x-cloak
1300    class="fixed inset-0 z-[100]"
1301>
1302    
1303    <div 
1304        x-show="open"
1305        x-transition:enter="transition ease-out duration-200"
1306        x-transition:enter-start="opacity-0"
1307        x-transition:enter-end="opacity-100"
1308        x-transition:leave="transition ease-in duration-150"
1309        x-transition:leave-start="opacity-100"
1310        x-transition:leave-end="opacity-0"
1311        class="absolute inset-0 bg-black/50 backdrop-blur-sm"
1312        @click="open = false"
1313    ></div>
1314    
1315    
1316    <div 
1317        x-show="open"
1318        x-transition:enter="transition ease-out duration-200"
1319        x-transition:enter-start="opacity-0 -translate-y-4"
1320        x-transition:enter-end="opacity-100 translate-y-0"
1321        x-transition:leave="transition ease-in duration-150"
1322        x-transition:leave-start="opacity-100 translate-y-0"
1323        x-transition:leave-end="opacity-0 -translate-y-4"
1324        class="relative bg-white shadow-2xl"
1325    >
1326        <div class="container mx-auto px-4 py-6">
1327            <div class="flex items-center gap-4">
1328                
1329                <button 
1330                    @click="open = false" 
1331                    class="p-2 hover:bg-gray-100 rounded-full transition"
1332                    aria-label="Close search"
1333                >
1334                    <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1335                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
1336                    </svg>
1337                </button>
1338                
1339                
1340                <div class="flex-grow">
1341                    <div x-data="siteSearch()" 
1342     x-on:click.outside="close()" 
1343     x-on:keydown.escape.window="close()"
1344     class="relative w-full">
1345    
1346    
1347    <div class="relative">
1348        <input 
1349            type="text" 
1350            x-model="query"
1351            x-on:input.debounce.300ms="search()"
1352            x-on:focus="if(query.length >= 2) open = true"
1353            x-on:keydown.arrow-down.prevent="navigateDown()"
1354            x-on:keydown.arrow-up.prevent="navigateUp()"
1355            x-on:keydown.enter.prevent="selectCurrent()"
1356            placeholder="Search tires, services, locations..." 
1357            class="w-full py-3 px-5 pr-12 rounded-full border-2 border-gray-200 focus:border-primary focus:outline-none transition"
1358            autocomplete="off"
1359        >
1360        
1361        
1362        <div class="absolute right-4 top-1/2 -translate-y-1/2">
1363            <svg x-show="!loading" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1364                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
1365            </svg>
1366            <svg x-show="loading" x-cloak class="w-5 h-5 text-primary animate-spin" fill="none" viewBox="0 0 24 24">
1367                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
1368                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
1369            </svg>
1370        </div>
1371        
1372        
1373        <button 
1374            x-show="query.length > 0" 
1375            x-on:click="clear()"
1376            x-cloak
1377            class="absolute right-12 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 transition"
1378        >
1379            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1380                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
1381            </svg>
1382        </button>
1383    </div>
1384    
1385    
1386    <div 
1387        x-show="open && searched" 
1388        x-cloak
1389        x-transition:enter="transition ease-out duration-200"
1390        x-transition:enter-start="opacity-0 translate-y-1"
1391        x-transition:enter-end="opacity-100 translate-y-0"
1392        x-transition:leave="transition ease-in duration-150"
1393        x-transition:leave-start="opacity-100 translate-y-0"
1394        x-transition:leave-end="opacity-0 translate-y-1"
1395        class="absolute top-full left-0 right-0 mt-2 bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden z-50 max-h-[70vh] overflow-y-auto"
1396    >
1397        
1398        <template x-if="results.brands && results.brands.results.length > 0">
1399            <div class="border-b border-gray-100">
1400                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
1401                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path stroke-width="2" d="M12 6v6l4 2"/></svg>
1402                    Tire Brands
1403                    <span class="ml-auto text-gray-400 normal-case" x-text="results.brands.total + ' found'"></span>
1404                </div>
1405                <template x-for="(item, index) in results.brands.results" :key="'brand-' + index">
1406                    <a 
1407                        :href="item.url" 
1408                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
1409                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('brands', index) }"
1410                        x-on:mouseenter="selectedIndex = getGlobalIndex('brands', index)"
1411                    >
1412                        <img :src="item.logo" :alt="item.name" class="w-10 h-10 object-contain bg-white rounded border p-1">
1413                        <span class="font-medium text-secondary" x-text="item.name"></span>
1414                    </a>
1415                </template>
1416            </div>
1417        </template>
1418        
1419        
1420        <template x-if="results.tires && results.tires.results.length > 0">
1421            <div class="border-b border-gray-100">
1422                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
1423                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
1424                    Tires
1425                    <span class="ml-auto text-gray-400 normal-case" x-text="results.tires.total + ' found'"></span>
1426                </div>
1427                <template x-for="(item, index) in results.tires.results" :key="'tire-' + index">
1428                    <a 
1429                        :href="item.url" 
1430                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
1431                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('tires', index) }"
1432                        x-on:mouseenter="selectedIndex = getGlobalIndex('tires', index)"
1433                    >
1434                        <template x-if="item.image">
1435                            <img :src="item.image" :alt="item.name" class="w-10 h-10 object-contain">
1436                        </template>
1437                        <template x-if="!item.image">
1438                            <div class="w-10 h-10 bg-gray-100 rounded flex items-center justify-center">
1439                                <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
1440                            </div>
1441                        </template>
1442                        <div>
1443                            <div class="font-medium text-secondary" x-text="item.name"></div>
1444                            <div class="text-xs text-gray-500">
1445                                <span x-text="item.brand"></span>
1446                                <template x-if="item.season">
1447                                    <span> · <span x-text="item.season"></span></span>
1448                                </template>
1449                            </div>
1450                        </div>
1451                    </a>
1452                </template>
1453            </div>
1454        </template>
1455        
1456        
1457        <template x-if="results.services && results.services.results.length > 0">
1458            <div class="border-b border-gray-100">
1459                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
1460                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
1461                    Services
1462                    <span class="ml-auto text-gray-400 normal-case" x-text="results.services.total + ' found'"></span>
1463                </div>
1464                <template x-for="(item, index) in results.services.results" :key="'service-' + index">
1465                    <a 
1466                        :href="item.url" 
1467                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
1468                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('services', index) }"
1469                        x-on:mouseenter="selectedIndex = getGlobalIndex('services', index)"
1470                    >
1471                        <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
1472                            <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
1473                        </div>
1474                        <div class="flex-grow">
1475                            <span class="font-medium text-secondary" x-text="item.name"></span>
1476                        </div>
1477                        
1478                        <template x-if="item.available === true">
1479                            <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full font-medium">
1480                                ✓ Available
1481                            </span>
1482                        </template>
1483                        <template x-if="item.available === false">
1484                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-1 rounded-full">
1485                                Not at this location
1486                            </span>
1487                        </template>
1488                    </a>
1489                </template>
1490            </div>
1491        </template>
1492        
1493        
1494        <template x-if="results.locations && results.locations.results.length > 0">
1495            <div class="border-b border-gray-100">
1496                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
1497                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1497<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
1498                    Locations
1499                    <span class="ml-auto text-gray-400 normal-case" x-text="results.locations.total + ' found'"></span>
1500                </div>
1501                <template x-for="(item, index) in results.locations.results" :key="'location-' + index">
1502                    <a 
1503                        :href="item.url" 
1504                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
1505                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('locations', index) }"
1506                        x-on:mouseenter="selectedIndex = getGlobalIndex('locations', index)"
1507                    >
1508                        <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center">
1509                            <svg class="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/></svg>
1510                        </div>
1511                        <div>
1512                            <div class="font-medium text-secondary" x-text="item.name"></div>
1513                            <div class="text-xs text-gray-500" x-text="item.city + ', ' + item.prov_state"></div>
1514                        </div>
1515                    </a>
1516                </template>
1517            </div>
1518        </template>
1519        
1520        
1521        <template x-if="results.pages && results.pages.results.length > 0">
1522            <div>
1523                <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
1524                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
1525                    Pages
1526                </div>
1527                <template x-for="(item, index) in results.pages.results" :key="'page-' + index">
1528                    <a 
1529                        :href="item.url" 
1530                        class="flex items-center gap-3 px-4 py-3 hover:bg-primary/5 transition"
1531                        :class="{ 'bg-primary/10': selectedIndex === getGlobalIndex('pages', index) }"
1532                        x-on:mouseenter="selectedIndex = getGlobalIndex('pages', index)"
1533                    >
1534                        <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
1535                            <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
1536                        </div>
1537                        <span class="font-medium text-secondary" x-text="item.name"></span>
1538                    </a>
1539                </template>
1540            </div>
1541        </template>
1542        
1543        
1544        <template x-if="searched && !hasResults()">
1545            <div class="px-4 py-8 text-center text-gray-500">
1546                <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
1547                <p class="font-medium">No results found</p>
1548                <p class="text-sm mt-1">Try a different search term</p>
1549            </div>
1550        </template>
1551    </div>
1552</div>
1553
1554<script>
1555function siteSearch() {
1556    return {
1557        query: '',
1558        results: {},
1559        loading: false,
1560        open: false,
1561        searched: false,
1562        selectedIndex: -1,
1563        categories: ['brands', 'tires', 'services', 'locations', 'pages'],
1564        
1565        async search() {
1566            if (this.query.length < 2) {
1567                this.results = {};
1568                this.open = false;
1569                this.searched = false;
1570                return;
1571            }
1572            
1573            this.loading = true;
1574            
1575            try {
1576                const response = await fetch('/api/search?q=' + encodeURIComponent(this.query));
1577                this.results = await response.json();
1578                this.open = true;
1579                this.searched = true;
1580                this.selectedIndex = -1;
1581                
1582                // Track search event
1583                const resultsCount = this.getTotalResultsCount();
1584                if (typeof A1C !== 'undefined' && A1C.events) {
1585                    A1C.events.emit('a1c:engagement:search', {
1586                        search_term: this.query,
1587                        results_count: resultsCount
1588                    });
1589                }
1590            } catch (error) {
1591                console.error('Search error:', error);
1592                this.results = {};
1593            } finally {
1594                this.loading = false;
1595            }
1596        },
1597        
1598        hasResults() {
1599            return this.categories.some(cat => 
1600                this.results[cat] && this.results[cat].results && this.results[cat].results.length > 0
1601            );
1602        },
1603        
1604        getTotalItems() {
1605            let total = 0;
1606            this.categories.forEach(cat => {
1607                if (this.results[cat] && this.results[cat].results) {
1608                    total += this.results[cat].results.length;
1609                }
1610            });
1611            return total;
1612        },
1613        
1614        getTotalResultsCount() {
1615            let total = 0;
1616            this.categories.forEach(cat => {
1617                if (this.results[cat] && this.results[cat].total) {
1618                    total += this.results[cat].total;
1619                }
1620            });
1621            return total;
1622        },
1623        
1624        getGlobalIndex(category, localIndex) {
1625            let offset = 0;
1626            for (const cat of this.categories) {
1627                if (cat === category) {
1628                    return offset + localIndex;
1629                }
1630                if (this.results[cat] && this.results[cat].results) {
1631                    offset += this.results[cat].results.length;
1632                }
1633            }
1634            return -1;
1635        },
1636        
1637        getItemAtIndex(index) {
1638            let offset = 0;
1639            for (const cat of this.categories) {
1640                if (this.results[cat] && this.results[cat].results) {
1641                    const items = this.results[cat].results;
1642                    if (index < offset + items.length) {
1643                        return items[index - offset];
1644                    }
1645                    offset += items.length;
1646                }
1647            }
1648            return null;
1649        },
1650        
1651        navigateDown() {
1652            const total = this.getTotalItems();
1653            if (total === 0) return;
1654            this.selectedIndex = (this.selectedIndex + 1) % total;
1655        },
1656        
1657        navigateUp() {
1658            const total = this.getTotalItems();
1659            if (total === 0) return;
1660            this.selectedIndex = this.selectedIndex <= 0 ? total - 1 : this.selectedIndex - 1;
1661        },
1662        
1663        selectCurrent() {
1664            if (this.selectedIndex >= 0) {
1665                const item = this.getItemAtIndex(this.selectedIndex);
1666                if (item && item.url) {
1667                    window.location.href = item.url;
1668                }
1669            }
1670        },
1671        
1672        close() {
1673            this.open = false;
1674            this.selectedIndex = -1;
1675        },
1676        
1677        clear() {
1678            this.query = '';
1679            this.results = {};
1680            this.open = false;
1681            this.searched = false;
1682            this.selectedIndex = -1;
1683        }
1684    };
1685}
1686</script>
1686
1687                </div>
1688            </div>
1689        </div>
1690    </div>
1691</div>
1692
1693<script>
1694function openSearchModal() {
1695    window.dispatchEvent(new CustomEvent('open-search-modal'));
1696}
1697</script>
1697
1698<!-- ========== END SEARCH MODAL ========== -->
1699
1700
1701<script>
1702// Customer modal helper
1703function openCustomerModal() {
1704    if (typeof A1C !== 'undefined') {
1705        if (A1C.customer.isLoggedIn()) {
1706            if (typeof A1C.customer.openProfileModal === 'function') {
1707                A1C.customer.openProfileModal();
1708            }
1709        } else {
1710            if (typeof A1C.customer.openAuthModal === 'function') {
1711                A1C.customer.openAuthModal();
1712            }
1713        }
1714    }
1715}
1716
1717// Store selector placeholder
1718function openStoreSelector() {
1719    if (typeof window.openStoreSelectorSidebar === 'function') {
1720        window.openStoreSelectorSidebar();
1721    } else {
1722        window.location.href = '/find-a-location';
1723    }
1724}
1725
1726
1727
1728// A1C Widget Integration
1729(function() {
1730    function initA1CWidgets() {
1731        if (typeof A1C === 'undefined') return;
1732
1733        function updateVehicleWidget() {
1734            var label = document.getElementById('a1c-vehicle-label');
1735            if (label) {
1736                if (A1C.currentVehicle.hasVehicle()) {
1737                    label.textContent = A1C.currentVehicle.getShortLabel();
1738                } else {
1739                    label.textContent = 'My Vehicle';
1740                }
1741            }
1742        }
1743
1744        function updateCustomerWidget() {
1745            var label = document.getElementById('a1c-customer-label');
1746            if (A1C.customer.isLoggedIn()) {
1747                var displayName = A1C.customer.getDisplayName();
1748                if (label) label.textContent = displayName;
1749            } else {
1750                if (label) label.textContent = 'Sign In';
1751            }
1752        }
1753
1754        function updateCartWidget() {
1755            var badge = document.getElementById('a1c-cart-badge');
1756            if (badge && typeof A1C_Cart !== 'undefined') {
1757                var count = A1C_Cart.getItemCount();
1758                badge.textContent = count;
1759                if (count > 0) {
1760                    badge.classList.remove('hidden');
1761                } else {
1762                    badge.classList.add('hidden');
1763                }
1764            }
1765        }
1766
1767        updateVehicleWidget();
1768        updateCustomerWidget();
1769        setTimeout(updateCartWidget, 500);
1770
1771        A1C.events.on('a1c:current-vehicle:changed', updateVehicleWidget);
1772        A1C.events.on('a1c:customer:change', updateCustomerWidget);
1773        A1C.events.on('a1c:cart:updated', updateCartWidget);
1774        A1C.events.on('a1c:cart:item-added', function() { setTimeout(updateCartWidget, 100); });
1775        A1C.events.on('a1c:cart:item-removed', function() { setTimeout(updateCartWidget, 100); });
1776    }
1777
1778    if (typeof A1C !== 'undefined' && typeof A1C.ready === 'function') {
1779        A1C.ready(initA1CWidgets);
1780    } else {
1781        var checkInterval = setInterval(function() {
1782            if (typeof A1C !== 'undefined') {
1783                clearInterval(checkInterval);
1784                if (typeof A1C.ready === 'function') {
1785                    A1C.ready(initA1CWidgets);
1786                } else {
1787                    initA1CWidgets();
1788                }
1789            }
1790        }, 100);
1791        setTimeout(function() { clearInterval(checkInterval); }, 5000);
1792    }
1793})();
1794</script>
1794
1795    
1796    <main>
1797        
1798
1799    
1799<script>
1800(function() {
1801    const GEO_REDIRECT_KEY = 'a1c_geo_asked_v2';
1802    const GEO_REDIRECT_DECLINED_KEY = 'a1c_geo_declined_v2';
1803    
1804    // Only run if user hasn't been asked before or declined
1805    if (sessionStorage.getItem(GEO_REDIRECT_KEY) || localStorage.getItem(GEO_REDIRECT_DECLINED_KEY)) {
1806        console.log('[GeoRedirect] Already asked or declined, skipping');
1807        return;
1808    }
1809    
1810    // Mark that we've asked (prevents re-asking on page refresh)
1811    sessionStorage.setItem(GEO_REDIRECT_KEY, '1');
1812    
1813    const locations = [{"slug":"albion-tireland","name":"Albion Tireland Maple Ridge, BC","lat":49.192654,"lng":-122.573629},{"slug":"arvid-s-automotive","name":"Arvid's Automotive Abbotsford, BC","lat":49.0529248,"lng":-122.3211101},{"slug":"atelier-meca-technique","name":"Atelier Meca Technique L\u00e9vis, QC","lat":46.7704248,"lng":-71.1993121},{"slug":"auto-worx-tireland","name":"Tireland Lethbridge House of Cars  Lethbridge, AB","lat":49.697201,"lng":-112.813921},{"slug":"bella-tireland","name":"Bella Tireland Trail, BC","lat":49.0982496,"lng":-117.6821737},{"slug":"calgary-kraken-auto","name":"Kraken Auto Tireland (Kraken Auto) Calgary, AB","lat":51.05225,"lng":-114.11107},{"slug":"centre-ft-pneus-et-mecanique","name":"Centre FT pneus et m\u00e9canique Repentigny, QC","lat":45.7524407,"lng":-73.450654},{"slug":"clinique-de-l-auto-higgins","name":"Clinique de l'auto Higgins Qu\u00e9bec, QC","lat":46.8625228,"lng":-71.2785208},{"slug":"country-tire-automotive-calgary-ab","name":"Country Tire Automotive CALGARY, AB","lat":51.0603863,"lng":-114.05525920000002},{"slug":"country-tire-surrey","name":"Country Tire Surrey Surrey, BC","lat":49.1250686,"lng":-122.8450295},{"slug":"dale-adams-automotive-specialists","name":"Dale Adams Automotive Specialists Calgary, AB","lat":50.94156364,"lng":-113.9722004},{"slug":"deol-auto-service","name":"Deol Auto service Edmonton, AB","lat":53.4623828,"lng":-113.469579},{"slug":"diamond-valley-tireland","name":"Tireland Diamond Valley, AB","lat":50.688799,"lng":-114.2407544},{"slug":"esp-tire-repair-service","name":"ESP Tire & Repair Service Qualicum Beach, BC","lat":49.3451655,"lng":-124.441608},{"slug":"extra-tech-automotive","name":"Extra-Tech Automotive CALGARY, AB","lat":51.0058464,"lng":-114.0464802},{"slug":"fafard-alignement","name":"Fafard Alignement Saint-Jean-sur-Richelieu, QC","lat":45.3051248,"lng":-73.2411141},{"slug":"fastech-performance-edmonton","name":"Fastech Performance (97 ST) Edmonton, AB","lat":53.48562,"lng":-113.48022},{"slug":"garage-andre-lemay","name":"Garage Andr\u00e9 Lemay La Prairie, QC","lat":45.4082398,"lng":-73.4958037},{"slug":"garage-poirier-poirier","name":"Garage Poirier & Poirier Pointe-Aux-Trembles, QC","lat":45.6444838,"lng":-73.5161204},{"slug":"heritage-auto-chinook","name":"Heritage Auto Chinook - Tireland Calgary, AB","lat":51.0011593,"lng":-114.0684874},{"slug":"hubcap-tirewarehouse","name":"Hubcap & Tirewarehouse Edmonton, AB","lat":53.495792,"lng":-113.491296},{"slug":"ici-pneu-mecanique-sherbrooke","name":"ICI Pneu M\u00e9canique Sherbrooke Sherbrooke, QC","lat":45.3707387,"lng":-71.9878083},{"slug":"ici-pneu-st-laurent","name":"ICI Pneu St-Laurent Saint-Laurent, QC","lat":45.48597587,"lng":-73.71685993},{"slug":"ici-pneu-touchette-st-laurent","name":"Integra Tire (Touchette Pneus et M\u00e9canique Saint-Laurent) Montr\u00e9al, QC","lat":45.5422651,"lng":-73.64526152},{"slug":"ici-pneu-touchette-verdun","name":"ICI Pneu - Touchette, Verdun Verdun, QC","lat":45.4630281,"lng":-73.5796879},{"slug":"joe-s-tire-hospital","name":"Joe's Tire Hospital Duncan, BC","lat":48.7772431,"lng":-123.7098093},{"slug":"jon-nichols-motorsport-montreal-jon-nichols-motorsport-icipneu-qc","name":"ICIPneu Lachine Jon Nichols Montr\u00e9al, QC","lat":45.4348517478458,"lng":-73.68238282327471},{"slug":"kaz-s-service","name":"Kaz's Service Claresholm, AB","lat":50.013863,"lng":-113.573502},{"slug":"klassen-s-tireshop-plus","name":"Klassen's Tireshop Plus Vauxhall, AB","lat":50.0694073,"lng":-112.0978011},{"slug":"lad-s-auto","name":"Lad's Auto Calgary, AB","lat":51.02029805,"lng":-114.0234216},{"slug":"lauer-tire","name":"Lauer Tire LANGENBURG, SK","lat":50.84193357,"lng":-101.7005693},{"slug":"lazer-auto","name":"Lazer Auto ICIPneu  Saint-Laurent, QC","lat":45.495273,"lng":-73.7534369},{"slug":"mckenzie-tireland","name":"Mckenzie Tireland Calgary, AB","lat":50.9307378,"lng":-113.9697691},{"slug":"pneu-moran-les-cedres","name":"ICIPneu Moran Les C\u00e8dres, QC","lat":45.3751678,"lng":-74.11654659999999},{"slug":"pneus-et-mecanique-benoit-miron","name":"Pneus et m\u00e9canique Benoit Miron St-J\u00e9rome, QC","lat":45.792142,"lng":-74.0076862},{"slug":"pneus-et-mecanique-normand","name":"Pneus et m\u00e9canique Normand McMasterville, QC","lat":45.5575345,"lng":-73.2321888},{"slug":"pneus-et-mecanique-saint-constant","name":"Pneus et m\u00e9canique Saint-Constant Saint-Constant, QC","lat":45.378699,"lng":-73.564826},{"slug":"pneus-express-de-l-estrie","name":"Pneus Express de l'Estrie Sherbrooke, QC","lat":45.3951842,"lng":-71.9765791},{"slug":"pneus-gagnier","name":"Pneus Gagnier Valleyfield, QC","lat":45.2638764,"lng":-74.1190887},{"slug":"quesnel-tireland","name":"Quesnel Tireland Quesnel, BC","lat":52.9744895,"lng":-122.4927723},{"slug":"sabyan-automotive-services-and-repair-oliver-oliver-bc","name":"Sabyan Automotive Services and Repair Oliver, BC","lat":49.1773429,"lng":-119.55320019999999},{"slug":"saint-philippe","name":"ICI Pneu - LP Saint-Philippe, QC","lat":45.3857226,"lng":-73.4720067},{"slug":"schwabe-s-automotive-centre","name":"Schwabe's Automotive Centre Edmonton, AB","lat":53.510202,"lng":-113.417633},{"slug":"service-auto-duchesne","name":"Service auto Duchesne RIMOUSKI, QC","lat":48.4398727,"lng":-68.5571939},{"slug":"terry-s-automotive","name":"Terry's Automotive Lumby, BC","lat":50.2474081,"lng":-118.9657441},{"slug":"theo-gosselin-desserte-nord-autoroute","name":"Th\u00e9o Gosselin pneus | m\u00e9canique Laval, QC","lat":45.58713,"lng":-73.74427},{"slug":"theo-gosselin-saint-elzear","name":"Th\u00e9o Gosselin pneus | m\u00e9canique Laval, QC","lat":45.58354,"lng":-73.74072},{"slug":"tireland-a-plus","name":"Tireland - A Plus Kelowna, BC","lat":49.9176592,"lng":-119.3860335},{"slug":"tireland-ethos-mechanical","name":"Tireland - Ethos Mechanical Lac La Biche, AB","lat":54.77066707,"lng":-112.0226218},{"slug":"tireland-performance-centre","name":"Tireland Performance Centre North Vancouver, BC","lat":49.3084831,"lng":-123.0730621},{"slug":"tires-plus-tireland","name":"Tires Plus Tireland Mission, BC","lat":49.1346215,"lng":-122.2996338},{"slug":"vernon-tireland","name":"Vernon Tireland Vernon, BC","lat":50.2744687,"lng":-119.2710775},{"slug":"west-end-tireland","name":"West End Tireland Edmonton, AB","lat":53.5410067,"lng":-113.5970265},{"slug":"westwood-tire-services","name":"Westwood Tire Services Port Coquitlam, BC","lat":49.2688575,"lng":-122.7911239}];
1814    
1815    console.log('[GeoRedirect] Loaded locations:', locations.length);
1816    
1817    if (!locations || locations.length === 0) {
1818        console.log('[GeoRedirect] No locations available');
1819        return;
1820    }
1821    
1822    // Check if geolocation is supported
1823    if (!navigator.geolocation) {
1824        console.log('[GeoRedirect] Geolocation not supported');
1825        return;
1826    }
1827    
1828    // Calculate distance between two points using Haversine formula
1829    function haversineDistance(lat1, lon1, lat2, lon2) {
1830        const R = 6371; // Earth's radius in km
1831        const dLat = (lat2 - lat1) * Math.PI / 180;
1832        const dLon = (lon2 - lon1) * Math.PI / 180;
1833        const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
1834                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
1835                  Math.sin(dLon/2) * Math.sin(dLon/2);
1836        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
1837        return R * c;
1838    }
1839    
1840    // Find nearest location
1841    function findNearestLocation(userLat, userLng) {
1842        let nearest = null;
1843        let minDistance = Infinity;
1844        
1845        for (const loc of locations) {
1846            const distance = haversineDistance(userLat, userLng, loc.lat, loc.lng);
1847            if (distance < minDistance) {
1848                minDistance = distance;
1849                nearest = loc;
1850            }
1851        }
1852        
1853        return { location: nearest, distance: minDistance };
1854    }
1855    
1856    console.log('[GeoRedirect] Requesting geolocation...');
1857    
1858    // Request geolocation
1859    navigator.geolocation.getCurrentPosition(
1860        function(position) {
1861            const userLat = position.coords.latitude;
1862            const userLng = position.coords.longitude;
1863            
1864            console.log('[GeoRedirect] Got position:', userLat, userLng);
1865            
1866            const result = findNearestLocation(userLat, userLng);
1867            
1868            console.log('[GeoRedirect] Nearest location:', result);
1869            
1870            if (result.location) {
1871                // Build the redirect URL
1872                const langPrefix = '';
1873                const centreUrl = (langPrefix ? langPrefix : '') + '/centre/' + result.location.slug;
1874                console.log('[GeoRedirect] Redirecting to:', centreUrl);
1875                window.location.href = centreUrl;
1876            }
1877        },
1878        function(error) {
1879            console.log('[GeoRedirect] Geolocation error:', error.code, error.message);
1880            // User denied permission or error occurred
1881            if (error.code === error.PERMISSION_DENIED) {
1882                // Store in localStorage so we don't ask again
1883                localStorage.setItem(GEO_REDIRECT_DECLINED_KEY, '1');
1884            }
1885            // Silently fail - user stays on homepage
1886        },
1887        {
1888            enableHighAccuracy: false,
1889            timeout: 10000,
1890            maximumAge: 300000 // 5 minutes
1891        }
1892    );
1893})();
1894</script>
1894
1895
1896<main>
1897    
1898    <!-- Hero Section with Tire/Service Booker -->
1899    <section class="relative min-h-[620px] overflow-hidden flex items-center" x-data="{
1900        currentSlide: 0,
1901        totalSlides: 3,
1902        backgrounds: [&quot;\/media\/field-groups\/01M2TVPSCVG3GS3GHXKJY59N30.png&quot;,&quot;\/media\/field-groups\/01M2TVPTGZ42B8V3RTHCC0SE0D.png&quot;,&quot;\/media\/field-groups\/01M2TVPV07W5SKX3E038MGBVSP.png&quot;],
1903        overlays: [&quot;linear-gradient(to right, rgba(0, 0, 0, 0.800), rgba(0, 0, 0, 0.600), rgba(0, 0, 0, 0))&quot;,&quot;linear-gradient(to right, rgba(0, 0, 0, 0.800), rgba(0, 0, 0, 0.600), rgba(0, 0, 0, 0))&quot;,&quot;linear-gradient(to right, rgba(0, 0, 0, 0.800), rgba(0, 0, 0, 0.600), rgba(0, 0, 0, 0))&quot;],
1904        interval: null,
1905        startTimer() {
1906            if (this.totalSlides > 1) {
1907                this.interval = setInterval(() => { this.currentSlide = (this.currentSlide + 1) % this.totalSlides }, 6000);
1908            }
1909        },
1910        goToSlide(index) {
1911            clearInterval(this.interval);
1912            this.currentSlide = index;
1913            this.startTimer();
1914        }
1915    }" x-init="startTimer()">
1916        <div class="absolute inset-0 hero-zoom bg-cover bg-center" x-bind:style="{ backgroundImage: 'url(' + (backgrounds[currentSlide] || backgrounds[0] || '') + ')' }" style="background-image: url('/media/field-groups/01M2TVPSCVG3GS3GHXKJY59N30.png');"></div>
1917        <div class="absolute inset-0" x-bind:style="{ background: overlays[currentSlide] || overlays[0] }" style="background: linear-gradient(to right, rgba(0, 0, 0, 0.800), rgba(0, 0, 0, 0.600), rgba(0, 0, 0, 0));"></div>
1918        
1919        <div class="relative container mx-auto px-4 py-16">
1920            <div class="grid lg:grid-cols-2 gap-12 items-center">
1921                
1922                                <!-- Left: Slider Content -->
1923                <div class="text-white">
1924                    <!-- Slider slides -->
1925                    <div class="relative min-h-[280px]">
1926                                                <div x-show="currentSlide === 0"
1927                             x-transition:enter="transition ease-out duration-500"
1928                             x-transition:enter-start="opacity-0"
1929                             x-transition:enter-end="opacity-100"
1930                             x-transition:leave="transition ease-in duration-300 absolute inset-0"
1931                             x-transition:leave-start="opacity-100"
1932                             x-transition:leave-end="opacity-0"
1933                             class="space-y-6">
1934                                                        <div class="inline-flex items-center gap-2 bg-primary/20 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-full backdrop-blur-sm border border-primary/30">
1935                                <svg class="w-3 h-3 sm:w-4 sm:h-4 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
1936                                <span class="font-medium text-xs sm:text-sm">Continental</span>
1937                            </div>
1938                                                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white hero-header">
1939                                Weatherproof Confidence
1940                            </h1>
1941                            <p class="text-xl text-gray-300 max-w-lg">
1942                                Up to $110 Mail-In Rebate*
1943                            </p>
1944                                                                                    <a href="/promotions/up-to-110-mail-in-rebate-with-the-purchase-of-4-continental-tires" onclick="if(typeof A1CEvents!=='undefined'&&typeof A1CEvents.track==='function'){A1CEvents.track({event:'click_home_hero',eventCategory:'Engagement',title:'Weatherproof Confidence',button_text:'Learn more',url:'/promotions/up-to-110-mail-in-rebate-with-the-purchase-of-4-continental-tires'});}if(!event.metaKey&&!event.ctrlKey&&!event.shiftKey&&!event.altKey&&event.button===0){event.preventDefault();setTimeout(function(){window.location.href='/promotions/up-to-110-mail-in-rebate-with-the-purchase-of-4-continental-tires';},150);}" class="inline-flex items-center gap-3 bg-primary text-white font-bold px-8 py-4 rounded-xl hover:bg-primary-dark transition shadow-xl shadow-primary/40 text-lg">
1945                                Learn more
1946                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
1946<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
1947                            </a>
1948                                                    </div>
1949                                                <div x-show="currentSlide === 1"
1950                             x-transition:enter="transition ease-out duration-500"
1951                             x-transition:enter-start="opacity-0"
1952                             x-transition:enter-end="opacity-100"
1953                             x-transition:leave="transition ease-in duration-300 absolute inset-0"
1954                             x-transition:leave-start="opacity-100"
1955                             x-transition:leave-end="opacity-0"
1956                             class="space-y-6">
1957                                                        <div class="inline-flex items-center gap-2 bg-primary/20 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-full backdrop-blur-sm border border-primary/30">
1958                                <svg class="w-3 h-3 sm:w-4 sm:h-4 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
1959                                <span class="font-medium text-xs sm:text-sm">Toyo Tires</span>
1960                            </div>
1961                                                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white hero-header">
1962                                Prepared for every forecast
1963                            </h1>
1964                            <p class="text-xl text-gray-300 max-w-lg">
1965                                Up to $100 Mail-In Rebate*
1966                            </p>
1967                                                                                    <a href="/promotions/up-to-100-mail-in-rebate-with-the-purchase-of-4-toyo-tires" onclick="if(typeof A1CEvents!=='undefined'&&typeof A1CEvents.track==='function'){A1CEvents.track({event:'click_home_hero',eventCategory:'Engagement',title:'Prepared for every forecast',button_text:'Learn More',url:'/promotions/up-to-100-mail-in-rebate-with-the-purchase-of-4-toyo-tires'});}if(!event.metaKey&&!event.ctrlKey&&!event.shiftKey&&!event.altKey&&event.button===0){event.preventDefault();setTimeout(function(){window.location.href='/promotions/up-to-100-mail-in-rebate-with-the-purchase-of-4-toyo-tires';},150);}" class="inline-flex items-center gap-3 bg-primary text-white font-bold px-8 py-4 rounded-xl hover:bg-primary-dark transition shadow-xl shadow-primary/40 text-lg">
1968                                Learn More
1969                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
1970                            </a>
1971                                                    </div>
1972                                                <div x-show="currentSlide === 2"
1973                             x-transition:enter="transition ease-out duration-500"
1974                             x-transition:enter-start="opacity-0"
1975                             x-transition:enter-end="opacity-100"
1976                             x-transition:leave="transition ease-in duration-300 absolute inset-0"
1977                             x-transition:leave-start="opacity-100"
1978                             x-transition:leave-end="opacity-0"
1979                             class="space-y-6">
1980                                                        <div class="inline-flex items-center gap-2 bg-primary/20 text-white px-3 py-1.5 sm:px-4 sm:py-2 rounded-full backdrop-blur-sm border border-primary/30">
1981                                <svg class="w-3 h-3 sm:w-4 sm:h-4 text-primary" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
1981</svg>
1982                                <span class="font-medium text-xs sm:text-sm">Cooper Tires</span>
1983                            </div>
1984                                                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white hero-header">
1985                                Don't Wait for the Weather Alert
1986                            </h1>
1987                            <p class="text-xl text-gray-300 max-w-lg">
1988                                Up to $70 Mail-In Rebate*
1989                            </p>
1990                                                                                    <a href="/promotions/up-to-70-mail-in-rebate-with-the-purchase-of-4-cooper-tires" onclick="if(typeof A1CEvents!=='undefined'&&typeof A1CEvents.track==='function'){A1CEvents.track({event:'click_home_hero',eventCategory:'Engagement',title:'Don\&#039;t Wait for the Weather Alert',button_text:'Learn More',url:'/promotions/up-to-70-mail-in-rebate-with-the-purchase-of-4-cooper-tires'});}if(!event.metaKey&&!event.ctrlKey&&!event.shiftKey&&!event.altKey&&event.button===0){event.preventDefault();setTimeout(function(){window.location.href='/promotions/up-to-70-mail-in-rebate-with-the-purchase-of-4-cooper-tires';},150);}" class="inline-flex items-center gap-3 bg-primary text-white font-bold px-8 py-4 rounded-xl hover:bg-primary-dark transition shadow-xl shadow-primary/40 text-lg">
1991                                Learn More
1992                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
1993                            </a>
1994                                                    </div>
1995                                            </div>
1996                </div>
1997                                
1998                <!-- Right: Tire/Service Booker Panel -->
1999                                <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
2000                    
2001                    <!-- Tab Headers -->
2002                    <div class="flex">
2003                        <button id="tab-tires" onclick="switchTab('tires')" class="flex-1 px-4 py-4 text-sm font-bold transition-colors bg-white text-gray-900">
2004                            Tires &amp; Wheels
2005                        </button>
2006                        <button id="tab-service" onclick="switchTab('service')" class="flex-1 px-4 py-4 text-sm font-bold transition-colors bg-secondary text-white">
2007                            Auto Service
2008                        </button>
2009                    </div>
2010                    
2011                    <!-- Tires Tab Content -->
2012                    <div id="content-tires" class="p-6 ">
2013                        <button onclick="A1ClaunchSearchModal({search_by: 'vehicle'});" class="block w-full p-8 rounded-xl text-white transition-all hover:scale-[1.02] hover:shadow-lg mb-3 bg-gradient-to-r from-primary to-primary-dark cursor-pointer text-left">
2014                            <div class="flex items-center gap-4">
2015                                <div class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
2016                                    <svg class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
2017                                        <path d="M8 17H16M8 17C8 18.1046 7.10457 19 6 19C4.89543 19 4 18.1046 4 17M8 17C8 15.8954 7.10457 15 6 15C4.89543 15 4 15.8954 4 17M16 17C16 18.1046 16.8954 19 18 19C19.1046 19 20 18.1046 20 17M16 17C16 15.8954 16.8954 15 18 15C19.1046 15 20 15.8954 20 17M10 5V11M4 11L4.33152 9.01088C4.56901 7.58593 4.68776 6.87345 5.0433 6.3388C5.35671 5.8675 5.79705 5.49447 6.31346 5.26281C6.8993 5 7.6216 5 9.06621 5H12.4311C13.3703 5 13.8399 5 14.2662 5.12945C14.6436 5.24406 14.9946 5.43194 15.2993 5.68236C15.6435 5.96523 15.904 6.35597 16.425 7.13744L19 11M4 17H3.6C3.03995 17 2.75992 17 2.54601 16.891C2.35785 16.7951 2.20487 16.6422 2.10899 16.454C2 16.2401 2 15.9601 2 15.4V14.2C2 13.0799 2 12.5198 2.21799 12.092C2.40973 11.7157 2.71569 11.4097 3.09202 11.218C3.51984 11 4.0799 11 5.2 11H17.2C17.9432 11 18.3148 11 18.6257 11.0492C20.3373 11.3203 21.6797 12.6627 21.9508 14.3743C22 14.6852 22 15.0568 22 15.8C22 15.9858 22 16.0787 21.9877 16.1564C21.9199 16.5843 21.5843 16.9199 21.1564 16.9877C21.0787 17 20.9858 17 20.8 17H20"/>
2018                                    </svg>
2019                                </div>
2020                                <div class="flex-1">
2021                                    <div class="text-lg font-bold">Shop by Vehicle</div>
2022                                    <div class="text-sm text-white/80">Find the perfect fit for your car</div>
2023                                </div>
2024                                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2024<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
2025                            </div>
2026                        </button>
2027                        
2028                        <button onclick="A1ClaunchSearchModal({search_by: 'size'});" class="flex items-center justify-between w-full p-4 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors mb-4 cursor-pointer text-left">
2029                            <div class="flex items-center gap-3">
2030                                <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
2031                                    <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/></svg>
2032                                </div>
2033                                <div>
2034                                    <div class="font-semibold text-gray-900">Shop by Size</div>
2035                                    <div class="text-xs text-gray-500">Know your tire size?</div>
2036                                </div>
2037                            </div>
2038                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
2039                        </button>
2040                        
2041                        <div class="grid grid-cols-3 gap-2">
2042                            <button onclick="A1ClaunchSearchModal({search_by: 'vehicle', shop_for: 'tires'});" class="flex flex-col items-center p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 text-center cursor-pointer">
2043                                <img src="/media/uploads/st-1757348868-ofn-tire.webp" alt="" class="w-8 h-8 mb-1.5 object-contain">
2044                                <span class="text-xs font-medium">Tires</span>
2045                            </button>
2046                            <button onclick="A1ClaunchSearchModal({search_by: 'vehicle', shop_for: 'wheels'});" class="flex flex-col items-center p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 text-center cursor-pointer">
2047                                <img src="/media/uploads/st-1757348856-ofn-wheel.webp" alt="" class="w-8 h-8 mb-1.5 object-contain">
2048                                <span class="text-xs font-medium">Wheels</span>
2049                            </button>
2050                            <button onclick="A1ClaunchSearchModal({search_by: 'vehicle', shop_for: 'packages'});" class="flex flex-col items-center p-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors text-gray-700 text-center cursor-pointer">
2051                                <img src="/media/uploads/st-1757348808-ofn-tire__wheel.webp" alt="" class="w-8 h-8 mb-1.5 object-contain">
2052                                <span class="text-xs font-medium">Packages</span>
2053                            </button>
2054                        </div>
2055                    </div>
2056                    
2057                    <!-- Service Tab Content -->
2058                    <div id="content-service" class="p-6 hidden">
2059                                                
2060                        <a href="/find-a-location?return_to=request-appointment" class="block w-full p-5 rounded-xl text-white transition-all hover:scale-[1.02] hover:shadow-lg mb-3 bg-gradient-to-r from-primary to-primary-dark">
2061                            <div class="flex items-center gap-4">
2062                                <div class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
2063                                    <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
2064                                </div>
2065                                <div class="flex-1">
2066                                    <div class="text-lg font-bold">Book Service</div>
2067                                    <div class="text-sm text-white/80">Schedule your appointment today</div>
2068                                </div>
2069                                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2069<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
2070                            </div>
2071                        </a>
2072                        
2073                        <a href="/services" class="flex items-center justify-between w-full p-4 bg-gray-100 hover:bg-gray-200 rounded-xl transition-colors mb-4">
2074                            <div class="flex items-center gap-3">
2075                                <div class="w-10 h-10 rounded-full bg-gray-300 flex items-center justify-center">
2076                                    <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
2077                                </div>
2078                                <div>
2079                                    <div class="font-semibold text-gray-900">View All Services</div>
2080                                    <div class="text-xs text-gray-500">Oil changes, brakes &amp; more</div>
2081                                </div>
2082                            </div>
2083                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
2084                        </a>
2085                        
2086                                            </div>
2087                    
2088                </div>
2089                            </div>
2090        </div>
2091        
2092        <!-- Slider dots -->
2093                <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-2 z-10">
2094                        <button @click="goToSlide(0)" 
2095                    :class="currentSlide === 0 ? 'bg-primary w-8' : 'bg-white/50 w-3'"
2096                    class="h-3 rounded-full transition-all duration-300 hover:bg-white/80"></button>
2097                        <button @click="goToSlide(1)" 
2098                    :class="currentSlide === 1 ? 'bg-primary w-8' : 'bg-white/50 w-3'"
2099                    class="h-3 rounded-full transition-all duration-300 hover:bg-white/80"></button>
2100                        <button @click="goToSlide(2)" 
2101                    :class="currentSlide === 2 ? 'bg-primary w-8' : 'bg-white/50 w-3'"
2102                    class="h-3 rounded-full transition-all duration-300 hover:bg-white/80"></button>
2103                    </div>
2104            </section>
2105    
2106    <!-- Book Appointment CTA Bar -->
2107    <section class="bg-primary py-4">
2108        <div class="container mx-auto px-4">
2109                        <a href="/find-a-location?return_to=request-appointment" class="flex items-center justify-center gap-3 text-white hover:opacity-90 transition">
2110                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
2111                <span class="text-xl md:text-2xl font-bold">Book Your Appointment</span>
2112                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
2113            </a>
2114        </div>
2115    </section>
2116    
2117        
2118    <!-- Rotating Banner -->
2119    
2120    
2121    <!-- Services Grid -->
2122        
2123        
2124    <!-- About / SEO Section -->
2125        <section class="py-16 bg-white">
2126        <div class="container mx-auto px-4">
2127            <div class="flex flex-col lg:flex-row items-center gap-12 max-w-6xl mx-auto">
2128                <!-- Image - Full height of content -->
2129                <div class="lg:w-1/2">
2130                    <img src="/media/field-groups/01KGZA3BXK4H0RKX7BED8TV5P2.webp" alt="Automotive Repair, Tires, and Accessories " class="w-full h-auto object-contain rounded-2xl shadow-2xl">
2131                </div>
2132                <!-- Content - Centered vertically -->
2133                <div class="lg:w-1/2 flex items-center">
2134                    <div>
2135                                                <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-6">Automotive Repair, Tires, and Accessories </h2>
2136                                                
2137                                                <div class="text-lg text-gray-600 leading-relaxed mb-8 prose prose-lg max-w-none">
2138                            <p>At <strong>Tireland</strong>, we make vehicle care easy, whether you're in need of new tires, emergency repairs, or routine maintenance. With years of expertise, we've helped thousands of vehicle owners find the best major brand tires at affordable prices. With many locations nationwide, we provide top-quality auto repair and maintenance services, using only the highest-quality parts. As independently owned and operated centers, you'll always work with someone who truly values your business. Trust the experts at <strong>Tireland</strong> for all your vehicle needs.</p>
2139                        </div>
2140                                                
2141                                                <a href="/request-appointment" class="inline-flex items-center gap-2 bg-primary text-white font-bold px-6 py-3 rounded-xl hover:bg-primary-dark transition shadow-lg">
2142                            Book Your Appointment
2143                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2143<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
2144                        </a>
2145                                            </div>
2146                </div>
2147            </div>
2148        </div>
2149    </section>
2150    
2151    
2152        
2153    
2154    
2155    
2156        
2157        
2158    
2159        <section class="py-16 bg-white">
2160        <div class="container mx-auto px-4">
2161            
2162            <div class="flex justify-between items-center mb-8">
2163                <h2 class="text-3xl md:text-4xl font-bold text-secondary">Special Offers</h2>
2164                <a href="/promotions" class="text-primary hover:text-primary-dark font-medium transition flex items-center gap-1">
2165                    View All <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
2166                </a>
2167            </div>
2168            
2169            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
2170                                    <a href="/promotions/up-to-110-mail-in-rebate-with-the-purchase-of-4-continental-tires" @click="if (typeof A1C !== 'undefined' && A1C.events) { A1C.events.emit('a1c:engagement:select_promotion', { promotion_id: 'UP_TO_110_MAIL_IN_REBATE_WITH_THE_PURCHASE_OF_4_CONTINENTAL_TIRES', promotion_name: 'Up To $110 Mail-In Rebate With the Purchase of 4 Continental Tires', creative_slot: 'homepage_grid_pos_1' }); }" class="group block rounded-2xl overflow-hidden shadow-xl">
2171    <img
2172        src="/media/promotions/tiles/01M2TV90JQTN2VVC32H4WJPTKQ.png"
2173        alt="Up To $110 Mail-In Rebate With the Purchase of 4 Continental Tires"
2174        class="w-full h-auto transition-transform duration-500 group-hover:scale-105"
2175        loading="lazy"
2176    >
2177</a>
2178                                    <a href="/promotions/up-to-100-mail-in-rebate-with-the-purchase-of-4-toyo-tires" @click="if (typeof A1C !== 'undefined' && A1C.events) { A1C.events.emit('a1c:engagement:select_promotion', { promotion_id: 'UP_TO_100_MAIL_IN_REBATE_WITH_THE_PURCHASE_OF_4_TOYO_TIRES', promotion_name: 'Up To $100 Mail-In Rebate With the Purchase of 4 Toyo Tires', creative_slot: 'homepage_grid_pos_2' }); }" class="group block rounded-2xl overflow-hidden shadow-xl">
2179    <img
2180        src="/media/promotions/tiles/01M2TVF75ME2V0FA0CAKY668Z7.png"
2181        alt="Up To $100 Mail-In Rebate With the Purchase of 4 Toyo Tires"
2182        class="w-full h-auto transition-transform duration-500 group-hover:scale-105"
2183        loading="lazy"
2184    >
2185</a>
2186                                    <a href="/promotions/up-to-70-mail-in-rebate-with-the-purchase-of-4-cooper-tires" @click="if (typeof A1C !== 'undefined' && A1C.events) { A1C.events.emit('a1c:engagement:select_promotion', { promotion_id: 'UP_TO_70_MAIL_IN_REBATE_WITH_THE_PURCHASE_OF_4_COOPER_TIRES', promotion_name: 'Up To $70 Mail-In Rebate With the Purchase of 4 Cooper Tires', creative_slot: 'homepage_grid_pos_3' }); }" class="group block rounded-2xl overflow-hidden shadow-xl">
2187    <img
2188        src="/media/promotions/tiles/01M2TVPKCVNXQT9CM3NB553YDW.png"
2189        alt="Up To $70 Mail-In Rebate With the Purchase of 4 Cooper Tires"
2190        class="w-full h-auto transition-transform duration-500 group-hover:scale-105"
2191        loading="lazy"
2192    >
2193</a>
2194                            </div>
2195            
2196        </div>
2197    </section>
2198        
2199    
2200        <section class="py-16 bg-gray-50">
2201        <div class="container mx-auto px-4">
2202            
2203            <div class="flex justify-between items-center mb-8">
2204                <h2 class="text-3xl md:text-4xl font-bold text-secondary">Tire Rebates</h2>
2205                <a href="/promotions" class="text-primary hover:text-primary-dark font-medium transition flex items-center gap-1">
2206                    View All <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
2207                </a>
2208            </div>
2209            
2210            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
2211                                                
2212                <a href="/tires/falken" class="group relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl block">
2213                    <img src="https://a1c-public.us-lax-1.linodeobjects.com/rebate-backgrounds/01M0TS5XA03Q7R4G1MZSMMRNDV.jpg" alt="Falken Tire Rebate" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
2214                    <div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/70 to-black/40"></div>
2215                    
2216                    <div class="absolute top-4 left-4">
2217                        <span class="inline-block px-3 py-1 bg-primary text-white text-xs font-bold uppercase tracking-wide rounded-full">
2218                            Tire Rebate
2219                        </span>
2220                    </div>
2221                    
2222                                        <div class="absolute top-4 right-4 bg-white rounded-lg p-2 shadow-md">
2223                        <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-falken.png" alt="Falken" class="h-8 w-auto max-w-[100px] object-contain">
2224                    </div>
2225                                        
2226                    <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
2227                                                <p class="text-xs font-medium text-white/50 uppercase tracking-widest mb-0.5">Up to</p>
2228                        <h3 class="font-black leading-none mb-1" style="font-size:3.25rem">$80</h3>
2229                                                <p class="text-sm text-white/80 mb-1">Mastercard Prepaid Card</p>
2230                                                <p class="text-xs text-white/50 mb-1">on select models</p>
2231                        <span class="text-gray-500 text-sm">Oct 1 – Dec 15, 2026</span>
2232                    </div>
2233                </a>
2234                                                
2235                <a href="/tires/goodyear" class="group relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl block">
2236                    <img src="https://a1c-public.us-lax-1.linodeobjects.com/rebate-backgrounds/winter/winter1.jpg" alt="Goodyear Tire Rebate" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
2237                    <div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/70 to-black/40"></div>
2238                    
2239                    <div class="absolute top-4 left-4">
2240                        <span class="inline-block px-3 py-1 bg-primary text-white text-xs font-bold uppercase tracking-wide rounded-full">
2241                            Tire Rebate
2242                        </span>
2243                    </div>
2244                    
2245                                        <div class="absolute top-4 right-4 bg-white rounded-lg p-2 shadow-md">
2246                        <img src="https://media.auto1cloud.com/uploads/st-1767210069-ofn-transparent-goodyear.webp" alt="Goodyear" class="h-8 w-auto max-w-[100px] object-contain">
2247                    </div>
2248                                        
2249                    <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
2250                                                <p class="text-xs font-medium text-white/50 uppercase tracking-widest mb-0.5">Up to</p>
2251                        <h3 class="font-black leading-none mb-1" style="font-size:3.25rem">$100</h3>
2252                                                <p class="text-sm text-white/80 mb-1">Mastercard Prepaid Card</p>
2253                                                <p class="text-xs text-white/50 mb-1">on select models</p>
2254                        <span class="text-gray-500 text-sm">Sep 7 – Dec 20, 2026</span>
2255                    </div>
2256                </a>
2257                                                
2258                <a href="/tires/uniroyal" class="group relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl block">
2259                    <img src="https://a1c-public.us-lax-1.linodeobjects.com/rebate-backgrounds/winter/winter2.jpg" alt="Uniroyal Tire Rebate" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
2260                    <div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/70 to-black/40"></div>
2261                    
2262                    <div class="absolute top-4 left-4">
2263                        <span class="inline-block px-3 py-1 bg-primary text-white text-xs font-bold uppercase tracking-wide rounded-full">
2264                            Tire Rebate
2265                        </span>
2266                    </div>
2267                    
2268                                        <div class="absolute top-4 right-4 bg-white rounded-lg p-2 shadow-md">
2269                        <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-uniroyal.png" alt="Uniroyal" class="h-8 w-auto max-w-[100px] object-contain">
2270                    </div>
2271                                        
2272                    <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
2273                                                <p class="text-xs font-medium text-white/50 uppercase tracking-widest mb-0.5">Up to</p>
2274                        <h3 class="font-black leading-none mb-1" style="font-size:3.25rem">$40</h3>
2275                                                <p class="text-sm text-white/80 mb-1">Mastercard Prepaid Card</p>
2276                                                <p class="text-xs text-white/50 mb-1">on select models</p>
2277                        <span class="text-gray-500 text-sm">Sep 21 – Dec 18, 2026</span>
2278                    </div>
2279                </a>
2280                                                
2281                <a href="/tires/yokohama" class="group relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl block">
2282                    <img src="https://a1c-public.us-lax-1.linodeobjects.com/rebate-backgrounds/winter/winter3.jpg" alt="Yokohama Tire Rebate" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
2283                    <div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/70 to-black/40"></div>
2284                    
2285                    <div class="absolute top-4 left-4">
2286                        <span class="inline-block px-3 py-1 bg-primary text-white text-xs font-bold uppercase tracking-wide rounded-full">
2287                            Tire Rebate
2288                        </span>
2289                    </div>
2290                    
2291                                        <div class="absolute top-4 right-4 bg-white rounded-lg p-2 shadow-md">
2292                        <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-yokohama.png" alt="Yokohama" class="h-8 w-auto max-w-[100px] object-contain">
2293                    </div>
2294                                        
2295                    <div class="absolute bottom-0 left-0 right-0 p-5 text-white">
2296                                                <p class="text-xs font-medium text-white/50 uppercase tracking-widest mb-0.5">Up to</p>
2297                        <h3 class="font-black leading-none mb-1" style="font-size:3.25rem">$100</h3>
2298                                                <p class="text-sm text-white/80 mb-1">Visa Prepaid Card</p>
2299                                                <p class="text-xs text-white/50 mb-1">on select models</p>
2300                        <span class="text-gray-500 text-sm">Oct 1 – Dec 15, 2026</span>
2301                    </div>
2302                </a>
2303                            </div>
2304            
2305        </div>
2306    </section>
2307        
2308    
2309    
2310        
2311        <section class="py-16 bg-white">
2312        <div class="container mx-auto px-4">
2313            <div class="text-center mb-12">
2314                <h2 class="text-3xl md:text-4xl font-bold text-secondary mb-4">Trusted Tire Brands</h2>
2315                <p class="text-gray-600">We carry the industry&#039;s most reliable brands</p>
2316            </div>
2317            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-4">
2318                                                <a href="/tires/falken" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2319                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-falken.png" alt="Falken" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2320                </a>
2321                                                <a href="/tires/goodyear" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2322                    <img src="https://media.auto1cloud.com/uploads/st-1767210069-ofn-transparent-goodyear.webp" alt="Goodyear" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2323                </a>
2324                                                <a href="/tires/uniroyal" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2325                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-uniroyal.png" alt="Uniroyal" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2326                </a>
2327                                                <a href="/tires/yokohama" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2328                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-yokohama.png" alt="Yokohama" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2329                </a>
2330                                                <a href="/tires/pirelli" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2331                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-pirelli.png" alt="Pirelli" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2332                </a>
2333                                                <a href="/tires/continental" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2334                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-continental.png" alt="Continental" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2335                </a>
2336                                                <a href="/tires/toyo" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2337                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-toyo.png" alt="Toyo" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2338                </a>
2339                                                <a href="/tires/hercules" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2340                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-hercules.png" alt="Hercules" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2341                </a>
2342                                                <a href="/tires/firestone" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2343                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-firestone.png" alt="Firestone" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2344                </a>
2345                                                <a href="/tires/bridgestone" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2346                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-bridgestone.png" alt="Bridgestone" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2347                </a>
2348                                                <a href="/tires/michelin" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2349                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-michelin.png" alt="Michelin" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2350                </a>
2351                                                <a href="/tires/westlake" class="group flex items-center justify-center px-4 py-3 bg-gray-50 rounded-lg hover:bg-gray-100 hover:shadow-md transition-all duration-200">
2352                    <img src="https://media.auto1cloud.com/manuf-logos-by-slug/transparent-westlake.png" alt="Westlake" class="h-8 max-w-full object-contain opacity-80 group-hover:opacity-100 transition-opacity">
2353                </a>
2354                            </div>
2355            
2356            <div class="text-center mt-10">
2357                <a href="/tires" class="inline-flex items-center gap-2 text-primary hover:text-primary-dark font-semibold transition">
2358                    View All Brands
2359                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
2359<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
2360                </a>
2361            </div>
2362        </div>
2363    </section>
2364        
2365</main>
2366
2367<script>
2368function switchTab(tab) {
2369    const tabTires = document.getElementById('tab-tires');
2370    const tabService = document.getElementById('tab-service');
2371    const contentTires = document.getElementById('content-tires');
2372    const contentService = document.getElementById('content-service');
2373    if (!tabTires || !tabService) return;
2374    if (tab === 'tires') {
2375        tabTires.classList.remove('bg-secondary', 'text-white');
2376        tabTires.classList.add('bg-white', 'text-gray-900');
2377        tabService.classList.remove('bg-white', 'text-gray-900');
2378        tabService.classList.add('bg-secondary', 'text-white');
2379        contentTires.classList.remove('hidden');
2380        contentService.classList.add('hidden');
2381    } else {
2382        tabService.classList.remove('bg-secondary', 'text-white');
2383        tabService.classList.add('bg-white', 'text-gray-900');
2384        tabTires.classList.remove('bg-white', 'text-gray-900');
2385        tabTires.classList.add('bg-secondary', 'text-white');
2386        contentService.classList.remove('hidden');
2387        contentTires.classList.add('hidden');
2388    }
2389}
2390</script>
2390
2391
2392<style>
2393.hero-service-icon svg {
2394    width: 24px;
2395    height: 24px;
2396    margin-bottom: 6px;
2397    fill: currentColor;
2398    color: #374151;
2399}
2400.hero-header span {
2401    color: #21929c;
2402    display: block;
2403}
2404.homepage-service-icon svg {
2405    width: 32px;
2406    height: 32px;
2407    fill: currentColor;
2408    color: var(--color-primary, #ed1c24);
2409    transition: color 0.3s ease;
2410}
2411.group:hover .homepage-service-icon svg {
2412    color: white;
2413}
2414</style>
2415
2416    </main>
2417    
2418    <!-- Footer -->
2419<footer class="bg-secondary text-white">
2420    
2421        
2422    <div class="container mx-auto px-4 py-12">
2423        <div class="grid md:grid-cols-4 gap-10">
2424            
2425            <!-- Column 1: Logo & About -->
2426            <div>
2427                                <img src="/media/field-groups/01KNK2ZV4JKW5T4950TYQ6NJME.png" alt="Tireland" class="h-12 mb-6">
2428                                <p class="text-gray-400 mb-6">Your complete auto care experts.</p>
2429                            </div>
2430            
2431            <!-- Column 2: Shop -->
2432            <div>
2433                <h4 class="text-lg font-bold mb-6">Shop</h4>
2434                <ul class="space-y-3 text-gray-400">
2435                    <li><a href="/tires" class="hover:text-primary transition">Shop For Tires</a></li>
2436                    <li><a href="/wheels" class="hover:text-primary transition">Shop For Wheels</a></li>
2437                    <li><a href="/vehicles" class="hover:text-primary transition">Tires By Vehicle</a></li>
2438                    <li><a href="/tires-by-size" class="hover:text-primary transition">Tire Sizes</a></li>
2439                </ul>
2440            </div>
2441            
2442            <!-- Column 3: About -->
2443            <div>
2444                <h4 class="text-lg font-bold mb-6">About</h4>
2445                <ul class="space-y-3 text-gray-400">
2446                    <li><a href="/about-us" class="hover:text-primary transition">About Tireland</a></li>
2447                    <li><a href="/find-a-location" class="hover:text-primary transition">Find a Location</a></li>
2448                    <li><a href="/contact-us" class="hover:text-primary transition">Contact Us</a></li>
2449                    <li><a href="/resources" class="hover:text-primary transition">Resources</a></li>
2450                </ul>
2451            </div>
2452            
2453            <!-- Column 4: Newsletter Signup -->
2454            <div x-data="footerNewsletter()">
2455                <h4 class="text-lg font-bold mb-6">Stay in the Loop</h4>
2456                <p class="text-gray-400 text-sm mb-4">Get exclusive deals and car care tips in your inbox.</p>
2457                <form @submit.prevent="openMailingListModal()" class="space-y-3">
2458                    <input 
2459                        type="email" 
2460                        x-model="email"
2461                        placeholder="Enter your email"
2462                        class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
2463                        required
2464                    >
2465                    <button 
2466                        type="submit"
2467                        class="w-full px-6 py-3 bg-primary text-white font-semibold rounded-lg hover:opacity-90 transition-opacity"
2468                    >
2469                        Subscribe
2470                    </button>
2471                </form>
2472            </div>
2473            
2474        </div>
2475    </div>
2476    
2477    <!-- Bottom Bar -->
2478    <div class="border-t border-white/10">
2479        <div class="container mx-auto px-4 py-6">
2480            <div class="flex flex-col md:flex-row items-center justify-between gap-4 text-gray-400 text-sm">
2481                <p>&copy; 2026 Tireland. All rights reserved.</p>
2482                            </div>
2483            <div class="mt-3 text-center text-gray-500" style="font-size: 10px;">
2484                <a href="https://getauto1cloud.com/" target="_blank" rel="noopener" class="hover:text-primary transition">Powered By Auto1Cloud</a>
2485            </div>
2486        </div>
2487    </div>
2488</footer>
2489
2490<script>
2491function footerNewsletter() {
2492    return {
2493        email: '',
2494        
2495        openMailingListModal() {
2496            if (!this.email || !this.email.includes('@')) {
2497                return;
2498            }
2499            
2500            if (typeof A1C_MailingList !== 'undefined') {
2501                A1C_MailingList.reset();
2502                A1C_MailingList.open({ 
2503                    email: this.email,
2504                    source: 'footer'
2505                });
2506            }
2507        }
2508    };
2509}
2510</script>
2510
2511    
2512    
2512<script>
2513    window.openA1cPopup = () => false;
2514</script>
2514
2515
2516    
2517    <!-- A1C Connect Widgets -->
2518    
2518<script src="https://connect.a1cld.app/apps/mailing-list/embed.js"></script>
2518
2519    
2520    
2521    
2522    
2522<script>
2523    (function() {
2524        if (typeof A1CEvents === 'undefined') return;
2525        
2526        // Wait for A1C to be ready so we can get customer/vehicle data
2527        function firePageview() {
2528            // Push generic dataLayer context first (user, page, vehicle, center)
2529            if (typeof A1CEvents.pushContext === 'function') {
2530                A1CEvents.pushContext();
2531            }
2532            
2533            // Then fire pageview event
2534            if (typeof A1CEvents.pageview !== 'function') return;
2535            
2536            A1CEvents.pageview({
2537                pageCategory: "home"            });
2538        }
2539        
2540        // Fire immediately if A1C is ready, otherwise wait
2541        if (typeof A1C !== 'undefined' && A1C.customer) {
2542            firePageview();
2543        } else if (typeof A1C !== 'undefined' && A1C.ready) {
2544            A1C.ready(firePageview);
2545        } else {
2546            // A1C not loaded yet, fire without customer ID
2547            firePageview();
2548        }
2549    })();
2550    </script>
2550
2551    
2552    </body>
2553</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.