DGCchat

Running

App Files Files Community

John2121 commited on Oct 7, 2025

Commit

ce71e7f

1 Parent(s): 02ad8e3

Update: bleeding-edge APT automotive site with AI assistant

Browse files

Files changed (5) hide show

README.md +67 -7
formsubmit-quote-form.html +36 -42
gallery.html +25 -23
index.html +33 -31
quote-calculator.html +216 -203

README.md CHANGED Viewed

@@ -1,13 +1,73 @@
 ---
-title: WildPreserve Taxidermy Studio 🦌
-colorFrom: purple
-colorTo: yellow
-emoji: 🐳
 sdk: static
 pinned: false
 tags:
-  - deepsite-v3
 ---
-# Welcome to your new DeepSite project!
-This project was created with [DeepSite](https://deepsite.hf.co).

 ---
+title: Hooper Auto - Automotive Service & Repair 🚗
+colorFrom: green
+colorTo: blue
+emoji: �
 sdk: static
 pinned: false
 tags:
+  - automotive
+  - wisconsin-rapids
+  - auto-repair
 ---
+# Hooper Automotive LLC - Automotive Repair Shop
+Welcome to Hooper Automotive LLC, Wisconsin Rapids' trusted automotive repair shop. We provide professional automotive repair and maintenance services for Central Wisconsin drivers.
+## Services Offered
+- **Oil Change** - Quick and professional oil changes
+- **Brake Service** - Brake inspection, pad replacement, and brake system repair
+- **Transmission Service** - Transmission maintenance and repair
+- **Engine Diagnostics** - Computer diagnostics and engine troubleshooting
+- **Tire Service** - Tire installation, balancing, and rotation
+- **Battery Replacement** - Battery testing and replacement
+- **Air Conditioning** - A/C repair and maintenance
+- **Coolant Service** - Cooling system maintenance
+- **Tune-up** - Complete engine tune-up services
+- **Exhaust System** - Exhaust repair and replacement
+- **Suspension Repair** - Shock, strut, and suspension system repair
+- **Electrical Diagnosis** - Automotive electrical system troubleshooting
+- **Check Engine Light** - Diagnostic and repair services
+- **Pre-purchase Inspection** - Comprehensive vehicle inspections
+- **State Inspection** - Official state vehicle inspections
+- **General Repair** - Complete automotive repair services
+- **Emergency Service** - Emergency roadside assistance
+## Contact Information
+**Address:** 2020 4th Street South, Wisconsin Rapids, WI, United States, 54494
+**County:** Wood County, WI
+**Phone Number:** (715) 421-9792
+**Email:** hooperautorepair70@gmail.com
+## Business Details
+- Categories: Automotive Repair Shop
+- Rating: Not yet rated (0 Reviews)
+- Hours: Open now
+- Price Range: $$
+## Website Features
+This website includes:
+- Service gallery showcasing our work
+- Online service estimate request form
+- Mobile-responsive design
+- Contact information and location map
+## Technology Stack
+- HTML5
+- CSS3 with Tailwind CSS
+- JavaScript
+- Swiper.js for image carousel
+- Feather Icons
+- Form handling via Formspree
+---
+*Serving Central Wisconsin drivers from Stevens Point to Wausau and throughout the region.*

formsubmit-quote-form.html CHANGED Viewed

@@ -1,18 +1,21 @@
 <!-- Consistent Call/Text Contact Block -->
 <div class="w-full flex flex-col items-center mb-6">
-    <a href="tel:+17153212825" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call or
-        Text: (715) 321-2825</a>
-    <span class="text-green-200 text-sm mt-1">Fastest response for quotes & questions</span>
 </div>
 <!-- BuckRub Taxidermy Quote Request Form (Formsubmit.co) -->
-<form action="https://formsubmit.co/cwcoach@yahoo.com" method="POST"
     class="max-w-lg mx-auto bg-green-900/80 p-6 rounded-xl shadow-lg space-y-4">
     <input type="hidden" name="_cc" value="dondlingergeneralcontracting@gmail.com">
     <input type="hidden" name="_captcha" value="false">
     <input type="hidden" name="_template" value="table">
-    <h2 class="text-2xl font-bold text-green-200 mb-4">Request a Quote</h2>
-    <p class="text-green-100 mb-4">Get a fast, friendly quote! Tell us about your project and how we can help you.
-    </p>
     <div>
         <label for="name" class="block text-green-100 font-semibold mb-1">Name</label>
         <input type="text" id="name" name="name" required
@@ -34,51 +37,42 @@
         <select id="service" name="service" required
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
             <option value="">Select a service</option>
-            <option value="Shoulder Mount">Shoulder Mount</option>
-            <option value="Full Body Mount">Full Body Mount</option>
-            <option value="European Mount">European Mount</option>
-            <option value="Bird">Bird</option>
-            <option value="Fish">Fish</option>
-            <option value="Small Game">Small Game</option>
-            <option value="Habitat">Habitat</option>
-            <option value="Restoration">Restoration</option>
-            <option value="Rug">Rug</option>
-            <option value="Wall Mount">Wall Mount</option>
-            <option value="Lifesize">Lifesize</option>
-            <option value="Pedestal">Pedestal</option>
-            <option value="Antler Mount">Antler Mount</option>
-            <option value="Tanning">Tanning</option>
-            <option value="Pet Memorial">Pet Memorial</option>
-            <option value="Artisan/Custom">Artisan/Custom</option>
-            <option value="Other">Other (describe below)</option>
         </select>
     </div>
     <div>
-        <label for="animal" class="block text-green-100 font-semibold mb-1">Animal/Species</label>
-        <input type="text" id="animal" name="animal"
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
-            placeholder="e.g. Whitetail Deer, Bass, Duck, Pet Dog">
     </div>
     <div>
-        <label for="pose" class="block text-green-100 font-semibold mb-1">Preferred Pose/Style</label>
-        <select id="pose" name="pose"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
-            <option value="">Select a pose/style</option>
-            <option value="Upright">Upright</option>
-            <option value="Sneak">Sneak</option>
-            <option value="Full Sneak">Full Sneak</option>
-            <option value="Pedestal">Pedestal</option>
-            <option value="Wall Pedestal">Wall Pedestal</option>
-            <option value="Open Mouth">Open Mouth</option>
-            <option value="Closed Mouth">Closed Mouth</option>
-            <option value="Custom">Custom/Other</option>
-        </select>
     </div>
     <div>
-        <label for="details" class="block text-green-100 font-semibold mb-1">Project Details</label>
         <textarea id="details" name="details" rows="4"
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
-            placeholder="Describe your project, special requests, or anything else we should know..."></textarea>
     </div>
     <div>
         <label class="block text-green-100 font-semibold mb-1">Preferred Contact Method</label>

 <!-- Consistent Call/Text Contact Block -->
 <div class="w-full flex flex-col items-center mb-6">
+    <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
+        Hooper Automotive: (715) 421-9792</a>
+    <span class="text-green-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
+        County</span>
 </div>
 <!-- BuckRub Taxidermy Quote Request Form (Formsubmit.co) -->
+<form action="https://formsubmit.co/hooperautorepair70@gmail.com" method="POST"
     class="max-w-lg mx-auto bg-green-900/80 p-6 rounded-xl shadow-lg space-y-4">
     <input type="hidden" name="_cc" value="dondlingergeneralcontracting@gmail.com">
     <input type="hidden" name="_captcha" value="false">
     <input type="hidden" name="_template" value="table">
+    <h2 class="text-2xl font-bold text-green-200 mb-4">Request Service Estimate - Hooper Automotive LLC</h2>
+    <p class="text-green-100 mb-4">Get a fast, friendly estimate from Hooper Automotive! Tell us about your vehicle's
+        needs and how we can help you.<br>Address: 2020 4th Street South, Wisconsin Rapids, WI 54494<br>Phone: (715)
+        421-9792<br>Email: <a href="mailto:hooperautorepair70@gmail.com"
+            class="underline">hooperautorepair70@gmail.com</a></p>
     <div>
         <label for="name" class="block text-green-100 font-semibold mb-1">Name</label>
         <input type="text" id="name" name="name" required
         <select id="service" name="service" required
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
             <option value="">Select a service</option>
+            <option value="Oil Change">Oil Change</option>
+            <option value="Brake Service">Brake Service</option>
+            <option value="Transmission Service">Transmission Service</option>
+            <option value="Engine Diagnostics">Engine Diagnostics</option>
+            <option value="Tire Service">Tire Service</option>
+            <option value="Battery Replacement">Battery Replacement</option>
+            <option value="Air Conditioning">Air Conditioning</option>
+            <option value="Coolant Service">Coolant Service</option>
+            <option value="Tune-up">Tune-up</option>
+            <option value="Exhaust System">Exhaust System</option>
+            <option value="Suspension Repair">Suspension Repair</option>
+            <option value="Electrical Diagnosis">Electrical Diagnosis</option>
+            <option value="Check Engine Light">Check Engine Light</option>
+            <option value="Pre-purchase Inspection">Pre-purchase Inspection</option>
+            <option value="State Inspection">State Inspection</option>
+            <option value="General Repair">General Repair</option>
+            <option value="Emergency Service">Emergency Service</option>
         </select>
     </div>
     <div>
+        <label for="vehicle" class="block text-green-100 font-semibold mb-1">Vehicle Make/Model/Year</label>
+        <input type="text" id="vehicle" name="vehicle"
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            placeholder="e.g. 2018 Honda Civic, 2015 Ford F-150">
     </div>
     <div>
+        <label for="mileage" class="block text-green-100 font-semibold mb-1">Mileage</label>
+        <input type="text" id="mileage" name="mileage"
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            placeholder="e.g. 85,000 miles">
     </div>
     <div>
+        <label for="details" class="block text-green-100 font-semibold mb-1">Problem Description</label>
         <textarea id="details" name="details" rows="4"
             class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            placeholder="Describe the issue, symptoms, or service needed..."></textarea>
     </div>
     <div>
         <label class="block text-green-100 font-semibold mb-1">Preferred Contact Method</label>

gallery.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuckRub Taxidermy - Novel Gallery</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
@@ -150,52 +150,54 @@
 <body>
     <header class="py-4 px-4 flex justify-between items-center bg-green-900/90 shadow-lg sticky top-0 z-50">
-        <h1 class="text-2xl font-bold text-green-200 tracking-tight">BuckRub Taxidermy Gallery</h1>
         <a href="index.html" class="text-amber-400 font-bold text-lg hover:text-amber-300 transition-colors">Home</a>
     </header>
     <main>
         <div class="novel-gallery">
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg"
-                    alt="Gallery Image" />
             </div>
             <div class="novel-card"
-                data-img="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg">
                 <img class="novel-img"
-                    src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg"
-                    alt="Gallery Image" />
             </div>
         </div>
         <div class="novel-full" id="novelFull">

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hooper Auto - Service Gallery</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
 <body>
     <header class="py-4 px-4 flex justify-between items-center bg-green-900/90 shadow-lg sticky top-0 z-50">
+        <h1 class="text-2xl font-bold text-green-200 tracking-tight">Hooper Automotive LLC Service Gallery</h1>
         <a href="index.html" class="text-amber-400 font-bold text-lg hover:text-amber-300 transition-colors">Home</a>
+        <span class="ml-4 text-green-100 text-sm">2020 4th Street South, Wisconsin Rapids, WI &bull; (715)
+            421-9792</span>
     </header>
     <main>
         <div class="novel-gallery">
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
             <div class="novel-card"
+                data-img="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=800&h=600&fit=crop&crop=center">
                 <img class="novel-img"
+                    src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=400&h=300&fit=crop&crop=center"
+                    alt="Auto Service Work" />
             </div>
         </div>
         <div class="novel-full" id="novelFull">

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuckRub Taxidermy - Portfolio & Quotes</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -134,14 +134,14 @@
     <header class="bg-green-900/80 backdrop-blur-sm border-b border-green-600/30 sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4">
             <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-bold text-green-300">BuckRub Taxidermy</h1>
                 <div class="flex gap-4">
-                    <a href="tel:+17153212825"
                         class="bg-green-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-green-500 transition-colors flex items-center gap-2">
                         <i data-feather="phone"></i>
                         Call
                     </a>
-                    <a href="mailto:cwcoach@yahoo.com"
                         class="border-2 border-green-500 text-green-400 px-6 py-3 rounded-lg font-bold hover:bg-green-500 hover:text-white transition-colors flex items-center gap-2">
                         <i data-feather="mail"></i>
                         Email
@@ -152,17 +152,17 @@
     </header>
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
-        <a href="tel:+17153212825" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
-            or Text: (715)
-            321-2825</a>
-        <span class="text-green-200 text-sm mt-1">Fastest response for quotes & questions</span>
     </div>
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-green-900 to-green-700 py-12 md:py-16">
         <div class="container mx-auto px-4 text-center">
-            <h2 class="dynamic-title mb-6">Central Wisconsin's Premier Taxidermy</h2>
             <p class="text-lg sm:text-xl md:text-2xl lg:text-3xl text-green-100 mb-8 tracking-wide drop-shadow-lg">
-                Serving hunters and outdoorsmen throughout Central WI</p>
             <a href="quote-calculator.html"
                 class="inline-block bg-green-600 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-green-500 hover:scale-105 transition-all duration-200 shadow-lg mr-2 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2">
                 Get Instant Quote
@@ -178,8 +178,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg"
-                                alt="Portfolio Image 1"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -187,8 +187,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg"
-                                alt="Portfolio Image 2"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -196,8 +196,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg"
-                                alt="Portfolio Image 3"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -205,8 +205,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg"
-                                alt="Portfolio Image 4"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -214,8 +214,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg"
-                                alt="Portfolio Image 5"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -223,8 +223,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg"
-                                alt="Portfolio Image 6"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -232,8 +232,8 @@
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
-                            <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg"
-                                alt="Portfolio Image 7"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
@@ -251,9 +251,11 @@
         <div class="max-w-xl mx-auto bg-green-900/80 rounded-2xl shadow-lg p-4 mb-4">
             <h3 class="text-2xl font-bold text-green-200 mb-2">Contact & Location</h3>
             <div class="text-green-100 mb-2">
-                <div><strong>Address:</strong> Wisconsin Rapids, WI, United States, 54494</div>
-                <div><strong>Phone:</strong> <a href="tel:+17153212825" class="underline">+1 715-321-2825</a></div>
-                <div><strong>Email:</strong> <a href="mailto:cwcoach@yahoo.com" class="underline">cwcoach@yahoo.com</a>
                 </div>
             </div>
             <div class="rounded-xl overflow-hidden border border-green-700 shadow-lg mt-4">
@@ -294,16 +296,16 @@
     <!-- Call to Action -->
     <section class="bg-gradient-to-br from-green-700 to-green-600 py-16">
         <div class="container mx-auto px-4 text-center">
-            <h2 class="text-3xl md:text-5xl font-bold mb-6">Serving Central Wisconsin Hunters</h2>
             <p class="text-lg text-green-100 mb-8">From Stevens Point to Wausau and throughout Central WI</p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <a href="quote-calculator.html"
                     class="bg-white text-green-700 px-8 py-4 rounded-lg font-bold text-lg hover:bg-green-50 transition-colors">
-                    Get Instant Quote
                 </a>
-                <a href="tel:+17153212825"
                     class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-green-700 transition-colors">
-                    Call Now: (715) 321-2825
                 </a>
             </div>
     </section>

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hooper Auto - Automotive Service & Repair</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <header class="bg-green-900/80 backdrop-blur-sm border-b border-green-600/30 sticky top-0 z-50">
         <div class="container mx-auto px-4 py-4">
             <div class="flex justify-between items-center">
+                <h1 class="text-2xl font-bold text-green-300">Hooper Automotive LLC</h1>
                 <div class="flex gap-4">
+                    <a href="tel:+17154219792"
                         class="bg-green-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-green-500 transition-colors flex items-center gap-2">
                         <i data-feather="phone"></i>
                         Call
                     </a>
+                    <a href="mailto:hooperautorepair70@gmail.com"
                         class="border-2 border-green-500 text-green-400 px-6 py-3 rounded-lg font-bold hover:bg-green-500 hover:text-white transition-colors flex items-center gap-2">
                         <i data-feather="mail"></i>
                         Email
     </header>
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
+        <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
+            Hooper Automotive: (715) 421-9792</a>
+        <span class="text-green-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
+            County</span>
     </div>
     <!-- Hero Section -->
     <section class="bg-gradient-to-br from-green-900 to-green-700 py-12 md:py-16">
         <div class="container mx-auto px-4 text-center">
+            <h2 class="dynamic-title mb-6">Wisconsin Rapids' Trusted Auto Service</h2>
             <p class="text-lg sm:text-xl md:text-2xl lg:text-3xl text-green-100 mb-8 tracking-wide drop-shadow-lg">
+                Professional automotive repair & maintenance for Central Wisconsin</p>
             <a href="quote-calculator.html"
                 class="inline-block bg-green-600 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-green-500 hover:scale-105 transition-all duration-200 shadow-lg mr-2 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2">
                 Get Instant Quote
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 1"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 2"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 3"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 4"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 5"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 6"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
                     <div class="swiper-slide flex justify-center">
                         <div
                             class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            <img src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=700&h=420&fit=crop&crop=center"
+                                alt="Auto Service 7"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
                                 loading="lazy" />
                         </div>
         <div class="max-w-xl mx-auto bg-green-900/80 rounded-2xl shadow-lg p-4 mb-4">
             <h3 class="text-2xl font-bold text-green-200 mb-2">Contact & Location</h3>
             <div class="text-green-100 mb-2">
+                <div><strong>Address:</strong> 2020 4th Street South, Wisconsin Rapids, WI, United States, 54494</div>
+                <div><strong>County:</strong> Wood County, WI</div>
+                <div><strong>Phone:</strong> <a href="tel:+17154219792" class="underline">+1 715-421-9792</a></div>
+                <div><strong>Email:</strong> <a href="mailto:hooperautorepair70@gmail.com"
+                        class="underline">hooperautorepair70@gmail.com</a>
                 </div>
             </div>
             <div class="rounded-xl overflow-hidden border border-green-700 shadow-lg mt-4">
     <!-- Call to Action -->
     <section class="bg-gradient-to-br from-green-700 to-green-600 py-16">
         <div class="container mx-auto px-4 text-center">
+            <h2 class="text-3xl md:text-5xl font-bold mb-6">Serving Central Wisconsin Drivers</h2>
             <p class="text-lg text-green-100 mb-8">From Stevens Point to Wausau and throughout Central WI</p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <a href="quote-calculator.html"
                     class="bg-white text-green-700 px-8 py-4 rounded-lg font-bold text-lg hover:bg-green-50 transition-colors">
+                    Get Service Estimate
                 </a>
+                <a href="tel:+17154219792"
                     class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-green-700 transition-colors">
+                    Call Now: (715) 421-9792
                 </a>
             </div>
     </section>

quote-calculator.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BuckRub Taxidermy - Quote Request</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -74,221 +74,234 @@
 <body class="font-body bg-gray-900 text-white min-h-screen flex items-center justify-center py-8">
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
-        <a href="tel:+17153212825" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
-            or Text: (715)
-            321-2825</a>
-        <span class="text-green-200 text-sm mt-1">Fastest response for quotes &amp; questions</span>
     </div>
-    <!-- BuckRub Taxidermy Quote Request Form (Formspree, Industry Standard) -->
     <main class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white py-8">
-        <section aria-labelledby="quote-form-title" class="w-full max-w-lg mobile-section">
-            <form action="https://formspree.io/f/mjkaolga" method="POST"
-                class="bg-green-900/80 p-6 rounded-xl shadow-lg space-y-2 mobile-form overflow-visible"
-                aria-describedby="privacy-note" novalidate>
-                <h1 id="quote-form-title" class="text-2xl font-bold text-green-200 mb-2 mobile-title">Request a Quote
-                </h1>
-                <p class="text-green-100 mb-2">Get a fast, friendly quote! Tell us about your project and how we can
-                    help you.</p>
-                <div class="form-group open">
-                    <div class="form-toggle" onclick="toggleGroup(this)">Contact Info <span class="arrow">▶</span></div>
-                    <div class="form-content">
-                        <label for="name" class="block text-green-100 font-semibold mb-1">Name <span aria-hidden="true"
-                                class="text-red-400">*</span></label>
-                        <input type="text" id="name" name="name" required autocomplete="name" aria-required="true"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                            placeholder="Your Name">
-                        <label for="email" class="block text-green-100 font-semibold mb-1">Email <span
-                                aria-hidden="true" class="text-red-400">*</span></label>
-                        <input type="email" id="email" name="email" required autocomplete="email" aria-required="true"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                            placeholder="you@email.com">
-                        <label for="phone" class="block text-green-100 font-semibold mb-1">Phone</label>
-                        <input type="tel" id="phone" name="phone" autocomplete="tel"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
-                            placeholder="(optional)">
-                    </div>
                 </div>
-                <div class="form-group">
-                    <div class="form-toggle" onclick="toggleGroup(this)">Service & Price <span class="arrow">▶</span>
-                    </div>
-                    <div class="form-content">
-                        <label for="service" class="block text-green-100 font-semibold mb-1">Service Requested <span
-                                aria-hidden="true" class="text-red-400">*</span></label>
-                        <select id="service" name="service" required aria-required="true"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white focus:ring-2 focus:ring-green-400 focus:border-transparent transition">
-                            <option value="">Select a service</option>
-                            <option value="Deer Shoulder Mount">Deer Shoulder Mount</option>
-                            <option value="Elk Shoulder Mount">Elk Shoulder Mount</option>
-                            <option value="Moose Shoulder Mount">Moose Shoulder Mount</option>
-                            <option value="Deer Antler Plaque">Deer Antler Plaque</option>
-                            <option value="Skull Mount (European)">Skull Mount (European)</option>
-                            <option value="Hydro Dipped">Hydro Dipped</option>
-                            <option value="Antler Repair">Antler Repair</option>
-                            <option value="Upland Game Bird">Upland Game Bird</option>
-                            <option value="Turkey (Standing/Gobbling)">Turkey (Standing/Gobbling)</option>
-                            <option value="Turkey (Strutting)">Turkey (Strutting)</option>
-                            <option value="Squirrel/Rabbit">Squirrel/Rabbit</option>
-                            <option value="Racoon/Fox">Racoon/Fox</option>
-                            <option value="Coyote">Coyote</option>
-                            <option value="Opossum/Beaver">Opossum/Beaver</option>
-                            <option value="Black Bear Full Mount">Black Bear Full Mount</option>
-                            <option value="Black Bear 3/4 Mount">Black Bear 3/4 Mount</option>
-                            <option value="Bear Rug">Bear Rug</option>
-                            <option value="Fox Rug">Fox Rug</option>
-                            <option value="Coyote Rug">Coyote Rug</option>
-                            <option value="Fish">Fish</option>
-                            <option value="Trout/Salmon">Trout/Salmon</option>
-                            <option value="Replica Fish">Replica Fish</option>
-                        </select>
-                        <div id="service-price"
-                            class="mt-2 text-green-300 font-bold text-xl bg-green-900/70 rounded-lg px-4 py-2 shadow-lg border border-green-700 transition-all min-h-[2.5rem] flex items-center">
-                        </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <div class="form-toggle" onclick="toggleGroup(this)">Project Details <span class="arrow">▶</span>
-                    </div>
-                    <div class="form-content">
-                        <label for="animal" class="block text-green-100 font-semibold mb-1">Animal/Species</label>
-                        <input type="text" id="animal" name="animal"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2"
-                            placeholder="e.g. Whitetail Deer, Bass, Duck, Pet Dog">
-                        <label for="pose" class="block text-green-100 font-semibold mb-1">Preferred Pose/Style</label>
-                        <select id="pose" name="pose"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2">
-                            <option value="">Select a pose/style</option>
-                            <option value="Upright">Upright</option>
-                            <option value="Sneak">Sneak</option>
-                            <option value="Full Sneak">Full Sneak</option>
-                            <option value="Pedestal">Pedestal</option>
-                            <option value="Wall Pedestal">Wall Pedestal</option>
-                            <option value="Open Mouth">Open Mouth</option>
-                            <option value="Closed Mouth">Closed Mouth</option>
-                            <option value="Custom">Custom/Other</option>
-                        </select>
-                        <label for="details" class="block text-green-100 font-semibold mb-1">Project Details</label>
-                        <textarea id="details" name="details" rows="3"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white placeholder-green-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition"
-                            placeholder="Describe your project, special requests, or anything else we should know..."></textarea>
-                    </div>
                 </div>
-                <div class="form-group">
-                    <div class="form-toggle" onclick="toggleGroup(this)">Contact Preferences <span
-                            class="arrow">▶</span></div>
-                    <div class="form-content">
-                        <fieldset>
-                            <legend class="block text-green-100 font-semibold mb-1">Preferred Contact Method</legend>
-                            <div class="flex gap-4 mb-2">
-                                <label class="inline-flex items-center"><input type="radio" name="contact_method"
-                                        value="Phone" class="mr-2">Phone</label>
-                                <label class="inline-flex items-center"><input type="radio" name="contact_method"
-                                        value="Email" class="mr-2">Email</label>
-                                <label class="inline-flex items-center"><input type="radio" name="contact_method"
-                                        value="Text" class="mr-2">Text</label>
-                                <label class="inline-flex items-center"><input type="radio" name="contact_method"
-                                        value="Any" class="mr-2">Any</label>
-                            </div>
-                        </fieldset>
-                        <label for="best_time" class="block text-green-100 font-semibold mb-1">Best Time to
-                            Contact</label>
-                        <select id="best_time" name="best_time"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white focus:ring-2 focus:ring-green-400 focus:border-transparent transition mb-2">
-                            <option value="">Select a time</option>
-                            <option value="Morning">Morning</option>
-                            <option value="Afternoon">Afternoon</option>
-                            <option value="Evening">Evening</option>
-                            <option value="Any">Any</option>
-                        </select>
-                        <label for="hear_about" class="block text-green-100 font-semibold mb-1">How did you hear about
-                            us?</label>
-                        <select id="hear_about" name="hear_about"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white focus:ring-2 focus:ring-green-400 focus:border-transparent transition">
-                            <option value="">Select an option</option>
-                            <option value="Google Search">Google Search</option>
-                            <option value="Facebook">Facebook</option>
-                            <option value="Instagram">Instagram</option>
-                            <option value="Friend/Family">Friend/Family</option>
-                            <option value="Repeat Customer">Repeat Customer</option>
-                            <option value="Event/Show">Event/Show</option>
-                            <option value="Other">Other</option>
-                        </select>
-                    </div>
                 </div>
-                <div class="form-group">
-                    <div class="form-toggle" onclick="toggleGroup(this)">Timeline & Newsletter <span
-                            class="arrow">▶</span></div>
-                    <div class="form-content">
-                        <fieldset>
-                            <legend class="block text-green-100 font-semibold mb-1">How soon do you need this?</legend>
-                            <div class="flex gap-2 mb-2">
-                                <label class="inline-flex items-center"><input type="radio" name="urgency" value="ASAP"
-                                        class="mr-2">ASAP</label>
-                                <label class="inline-flex items-center"><input type="radio" name="urgency"
-                                        value="1-2 Weeks" class="mr-2">1-2 Weeks</label>
-                                <label class="inline-flex items-center"><input type="radio" name="urgency"
-                                        value="1 Month" class="mr-2">1 Month</label>
-                                <label class="inline-flex items-center"><input type="radio" name="urgency"
-                                        value="Flexible" class="mr-2">Flexible</label>
-                            </div>
-                        </fieldset>
-                        <div class="flex items-center mb-2">
-                            <input type="checkbox" id="newsletter" name="newsletter" value="Yes" class="mr-2">
-                            <label for="newsletter" class="text-green-100">Sign me up for news, tips, and special
-                                offers!</label>
-                        </div>
                     </div>
                 </div>
-                <button type="submit"
-                    class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 mobile-btn">Send
-                    Request</button>
-                <div id="form-success" class="hidden mt-4 text-green-200 text-center font-semibold" role="status"
-                    aria-live="polite"></div>
-                <p id="privacy-note" class="text-xs text-green-300 mt-2">We respect your privacy. Your information will
-                    only be used to respond to your inquiry and will never be shared or sold.</p>
-            </form>
         </section>
     </main>
-    <!-- End BuckRub Taxidermy Quote Request Form -->
     <script>
-        // Collapsible form groups
-        function toggleGroup(el) {
-            const group = el.parentElement;
-            group.classList.toggle('open');
-        }
-        // APT pipeline: r1 = rates, x1 = select, x2 = price display, x3 = event handler, y = price display logic
-        const r1 = {
-            "Deer Shoulder Mount": "$600",
-            "Elk Shoulder Mount": "$1200",
-            "Moose Shoulder Mount": "$1400",
-            "Deer Antler Plaque": "$60",
-            "Skull Mount (European)": "$150 (worst case)",
-            "Hydro Dipped": "$125",
-            "Antler Repair": "$20 per point (worst case)",
-            "Upland Game Bird": "$200",
-            "Turkey (Standing/Gobbling)": "$600",
-            "Turkey (Strutting)": "$700",
-            "Squirrel/Rabbit": "$200",
-            "Racoon/Fox": "$500",
-            "Coyote": "$600",
-            "Opossum/Beaver": "$500",
-            "Black Bear Full Mount": "$2100 (worst case, open mouth)",
-            "Black Bear 3/4 Mount": "$1500",
-            "Bear Rug": "$700 (min, round up)",
-            "Fox Rug": "$350",
-            "Coyote Rug": "$450",
-            "Fish": "$16/inch (round up)",
-            "Trout/Salmon": "$19/inch (round up)",
-            "Replica Fish": "$21/inch (round up)"
         };
-        const x1 = document.getElementById('service');
-        const x2 = document.getElementById('service-price');
-        function updatePrice() {
-            const v = x1.value;
-            x2.textContent = r1[v] || '';
-        }
-        x1.addEventListener('change', updatePrice);
-        // On page load, show price if already selected
-        updatePrice();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hooper Auto - Service Estimate</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 <body class="font-body bg-gray-900 text-white min-h-screen flex items-center justify-center py-8">
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
+        <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
+            Hooper Automotive: (715) 421-9792</a>
+        <span class="text-green-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
+            County</span>
     </div>
+    <!-- APT Step-by-Step Automotive Problem Calculator -->
     <main class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white py-8">
+        <section class="w-full max-w-lg mobile-section bg-green-900/80 p-6 rounded-xl shadow-lg">
+            <h1 class="text-2xl font-bold text-green-200 mb-4 mobile-title">Hooper Automotive LLC - Problem Calculator
+            </h1>
+            <div id="apt-flow">
+                <!-- Bleeding Edge: AI-Powered Troubleshooting -->
+                <div id="ai-troubleshoot" class="mb-8 bg-green-800/80 rounded-xl p-4 shadow-lg">
+                    <h2 class="text-xl font-bold text-green-200 mb-2">Describe Your Problem (AI Assistant)</h2>
+                    <textarea id="ai-input" rows="2"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        placeholder="Describe your car's issue in your own words (e.g. 'My car makes a grinding noise when turning left')"></textarea>
+                    <button id="ai-analyze" class="apt-btn w-full mb-2">Analyze with AI</button>
+                    <div id="ai-output" class="hidden bg-green-900/80 rounded-lg p-3 mt-2 text-green-100"></div>
+                    <div id="ai-fallback" class="hidden text-green-300 text-sm mt-2">Not sure? Try the step-by-step
+                        calculator below.</div>
                 </div>
+                <!-- Step 1: Select Problem Category -->
+                <div id="step1" class="mb-4">
+                    <label class="block text-green-100 font-semibold mb-2">What area is the problem in?</label>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="apt-btn" data-category="Engine">Engine</button>
+                        <button class="apt-btn" data-category="Brakes">Brakes</button>
+                        <button class="apt-btn" data-category="Electrical">Electrical</button>
+                        <button class="apt-btn" data-category="Tires">Tires</button>
+                        <button class="apt-btn" data-category="AC">A/C & Heat</button>
+                        <button class="apt-btn" data-category="Transmission">Transmission</button>
+                        <button class="apt-btn" data-category="Suspension">Suspension</button>
+                        <button class="apt-btn" data-category="Other">Other</button>
                     </div>
                 </div>
+                <!-- Step 2: Select Symptom -->
+                <div id="step2" class="mb-4 hidden">
+                    <label class="block text-green-100 font-semibold mb-2">What best describes the issue?</label>
+                    <div id="symptom-options" class="grid grid-cols-1 gap-2"></div>
                 </div>
+                <!-- Step 3: Vehicle Info -->
+                <div id="step3" class="mb-4 hidden">
+                    <label class="block text-green-100 font-semibold mb-1">Vehicle Make/Model/Year</label>
+                    <input type="text" id="vehicle"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        placeholder="e.g. 2020 Ford F-150">
+                    <label class="block text-green-100 font-semibold mb-1">Mileage</label>
+                    <input type="text" id="mileage"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        placeholder="e.g. 42,000">
+                    <button id="step3-next" class="apt-btn w-full mt-2">Next</button>
                 </div>
+                <!-- Step 4: Output Recommendation -->
+                <div id="step4" class="mb-4 hidden">
+                    <div class="bg-green-800/80 rounded-lg p-4 mb-2">
+                        <div class="text-lg font-bold text-green-200 mb-1">Recommended Service:</div>
+                        <div id="apt-recommend" class="text-green-100 mb-2"></div>
+                        <div class="text-green-300 font-bold" id="apt-price"></div>
                     </div>
+                    <div class="mb-2">
+                        <label class="block text-green-100 font-semibold mb-1">Your Name (optional)</label>
+                        <input type="text" id="user-name"
+                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                            placeholder="Your Name">
+                        <label class="block text-green-100 font-semibold mb-1">Email (for quote reply)</label>
+                        <input type="email" id="user-email"
+                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                            placeholder="hooperautorepair70@gmail.com">
+                    </div>
+                    <button id="apt-submit" class="apt-btn w-full">Request Estimate</button>
+                    <div id="apt-success" class="hidden text-green-200 text-center font-semibold mt-2">Request sent!
+                        Hooper Automotive will contact you soon.<br>Email: <a href="mailto:hooperautorepair70@gmail.com"
+                            class="underline">hooperautorepair70@gmail.com</a><br>Phone: (715) 421-9792</div>
                 </div>
+            </div>
         </section>
     </main>
+    <!-- End APT Calculator -->
+    <!--
+    Previous form code commented out for reference
+    ...existing code...
+    -->
     <script>
+        // --- Bleeding Edge AI Troubleshooting (Simulated) ---
+        // APT: x1=user input, r1=AI/LLM response, y1=output
+        document.getElementById('ai-analyze').onclick = function () {
+            const input = document.getElementById('ai-input').value.trim();
+            const out = document.getElementById('ai-output');
+            const fallback = document.getElementById('ai-fallback');
+            if (!input) {
+                out.classList.add('hidden');
+                fallback.classList.remove('hidden');
+                fallback.textContent = 'Please describe your problem above.';
+                return;
+            }
+            // Simulate AI/LLM response (replace with real API integration for production)
+            // APT: r1(x1) = smart recommendation
+            let response = '';
+            const txt = input.toLowerCase();
+            if (txt.includes('won\'t start') || txt.includes('no start')) {
+                response = '<b>Possible Issue:</b> Battery, starter, or fuel system.<br><b>Recommended Service:</b> Engine Diagnostics ($100-150).';
+            } else if (txt.includes('brake') && txt.includes('noise')) {
+                response = '<b>Possible Issue:</b> Worn brake pads or rotors.<br><b>Recommended Service:</b> Brake Service ($150-400).';
+            } else if (txt.includes('check engine')) {
+                response = '<b>Possible Issue:</b> Engine sensor or emissions issue.<br><b>Recommended Service:</b> Check Engine Light Diagnosis ($100-300).';
+            } else if (txt.includes('overheat')) {
+                response = '<b>Possible Issue:</b> Cooling system problem.<br><b>Recommended Service:</b> Coolant Service ($100-200).';
+            } else if (txt.includes('ac') || txt.includes('a/c') || txt.includes('air conditioning')) {
+                response = '<b>Possible Issue:</b> A/C system issue.<br><b>Recommended Service:</b> Air Conditioning Service ($150-400).';
+            } else if (txt.includes('tire') && txt.includes('flat')) {
+                response = '<b>Possible Issue:</b> Flat or damaged tire.<br><b>Recommended Service:</b> Tire Service ($80-250 per tire).';
+            } else if (txt.length < 10) {
+                response = 'Please provide more detail for an accurate recommendation.';
+            } else {
+                response = 'Our AI could not confidently match your description. Please use the step-by-step calculator below or call Hooper Automotive for expert help.';
+            }
+            out.innerHTML = response;
+            out.classList.remove('hidden');
+            fallback.classList.add('hidden');
+            if (response.startsWith('Our AI')) fallback.classList.remove('hidden');
         };
+        // --- APT Step-by-Step Calculator ---
+        // Variables: x1=category, x2=symptom, r1=service/price, x3=vehicle info, y1=output
+        // Pipeline: y1 = f(r1(x1, x2), x3)
+        // Problem categories and symptoms
+        const aptSymptoms = {
+            Engine: [
+                { sym: "Won't start", svc: "Engine Diagnostics", price: "$100-150" },
+                { sym: "Rough idle", svc: "Tune-up", price: "$200-500" },
+                { sym: "Check engine light", svc: "Check Engine Light", price: "$100-300" },
+                { sym: "Overheating", svc: "Coolant Service", price: "$100-200" },
+                { sym: "Oil leak", svc: "Oil Change / Leak Repair", price: "$35-200" }
+            ],
+            Brakes: [
+                { sym: "Squealing noise", svc: "Brake Service", price: "$150-400" },
+                { sym: "Soft pedal", svc: "Brake Service", price: "$150-400" },
+                { sym: "ABS light", svc: "Brake Diagnostics", price: "$100-200" },
+                { sym: "Vibration", svc: "Brake Service", price: "$150-400" }
+            ],
+            Electrical: [
+                { sym: "Battery dead", svc: "Battery Replacement", price: "$120-200" },
+                { sym: "Lights not working", svc: "Electrical Diagnosis", price: "$100-200" },
+                { sym: "Starter issue", svc: "Electrical Diagnosis", price: "$100-200" }
+            ],
+            Tires: [
+                { sym: "Flat tire", svc: "Tire Service", price: "$80-250 per tire" },
+                { sym: "Vibration", svc: "Tire Service", price: "$80-250 per tire" },
+                { sym: "TPMS light", svc: "Tire Service", price: "$80-250 per tire" }
+            ],
+            AC: [
+                { sym: "No cold air", svc: "Air Conditioning", price: "$150-400" },
+                { sym: "Weak airflow", svc: "Air Conditioning", price: "$150-400" },
+                { sym: "Strange smell", svc: "Air Conditioning", price: "$150-400" }
+            ],
+            Transmission: [
+                { sym: "Won't shift", svc: "Transmission Service", price: "$100-300" },
+                { sym: "Slipping", svc: "Transmission Service", price: "$100-300" },
+                { sym: "Fluid leak", svc: "Transmission Service", price: "$100-300" }
+            ],
+            Suspension: [
+                { sym: "Bouncing ride", svc: "Suspension Repair", price: "$300-1200" },
+                { sym: "Clunking noise", svc: "Suspension Repair", price: "$300-1200" },
+                { sym: "Steering pull", svc: "Suspension Repair", price: "$300-1200" }
+            ],
+            Other: [
+                { sym: "Other/Not listed", svc: "General Repair", price: "Quote needed" }
+            ]
+        };
+        // Step state
+        let selectedCategory = null;
+        let selectedSymptom = null;
+        let selectedService = null;
+        let selectedPrice = null;
+        // Step 1: Category
+        document.querySelectorAll('.apt-btn[data-category]').forEach(btn => {
+            btn.onclick = function () {
+                selectedCategory = btn.getAttribute('data-category');
+                // Show symptoms for this category
+                const opts = aptSymptoms[selectedCategory] || [];
+                const so = document.getElementById('symptom-options');
+                so.innerHTML = '';
+                opts.forEach((o, i) => {
+                    const b = document.createElement('button');
+                    b.className = 'apt-btn';
+                    b.textContent = o.sym;
+                    b.onclick = function () {
+                        selectedSymptom = o.sym;
+                        selectedService = o.svc;
+                        selectedPrice = o.price;
+                        document.getElementById('step2').classList.add('hidden');
+                        document.getElementById('step3').classList.remove('hidden');
+                    };
+                    so.appendChild(b);
+                });
+                document.getElementById('step1').classList.add('hidden');
+                document.getElementById('step2').classList.remove('hidden');
+            };
+        });
+        // Step 3: Vehicle info
+        document.getElementById('step3-next').onclick = function (e) {
+            e.preventDefault();
+            document.getElementById('step3').classList.add('hidden');
+            // Output recommendation
+            document.getElementById('apt-recommend').textContent = `${selectedService} (${selectedSymptom})`;
+            document.getElementById('apt-price').textContent = selectedPrice;
+            document.getElementById('step4').classList.remove('hidden');
+        };
+        // Step 4: Submit (simulate request)
+        document.getElementById('apt-submit').onclick = function (e) {
+            e.preventDefault();
+            document.getElementById('apt-submit').disabled = true;
+            document.getElementById('apt-success').classList.remove('hidden');
+            setTimeout(() => {
+                document.getElementById('apt-submit').disabled = false;
+                document.getElementById('apt-success').classList.add('hidden');
+            }, 3000);
+        };
+        // Style for APT buttons
+        const style = document.createElement('style');
+        style.textContent = `.apt-btn { background: #16a34a; color: #fff; font-weight: 600; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; cursor: pointer; transition: background 0.2s; font-size: 1.1rem; } .apt-btn:hover { background: #4ade80; color: #14532d; }`;
+        document.head.appendChild(style);
     </script>
 </body>