Upload folder using huggingface_hub

.env.example

@@ -0,0 +1,9 @@
+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/assets/images/comfort_tire_1781509452553.jpg filter=lfs diff=lfs merge=lfs -text
+src/assets/images/sport_tire_1781509490802.jpg filter=lfs diff=lfs merge=lfs -text
+src/assets/images/suv_tire_1781509472580.jpg filter=lfs diff=lfs merge=lfs -text
+src/assets/images/winter_tire_1781509513584.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

README.md

@@ -0,0 +1,20 @@
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/b18648e1-f7e5-49af-8c1a-a41fa7ba6ce2
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

assets/.aistudio/.gitignore

@@ -0,0 +1 @@
+*

firebase-applet-config.json

@@ -0,0 +1,10 @@
+{
+  "projectId": "gen-lang-client-0073278154",
+  "appId": "1:439857597926:web:83652c75dc57d7059e9a27",
+  "apiKey": "AIzaSyBpSkNWbpSUtiOwhbo30Xhx_K8OU9ClT2U",
+  "authDomain": "gen-lang-client-0073278154.firebaseapp.com",
+  "firestoreDatabaseId": "ai-studio-b18648e1-f7e5-49af-8c1a-a41fa7ba6ce2",
+  "storageBucket": "gen-lang-client-0073278154.firebasestorage.app",
+  "messagingSenderId": "439857597926",
+  "measurementId": ""
+}

firebase-blueprint.json

@@ -0,0 +1,126 @@
+{
+  "entities": {
+    "Product": {
+      "title": "Product",
+      "description": "Premium tire configuration parameters and live branch inventory metrics",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Auto-generated document identifier"
+        },
+        "name": {
+          "type": "string",
+          "description": "Full tire model name"
+        },
+        "brand": {
+          "type": "string",
+          "description": "Tyre manufacturer / brand name"
+        },
+        "size": {
+          "type": "string",
+          "description": "Tyre size specification code"
+        },
+        "price": {
+          "type": "number",
+          "description": "Dealer wholesale price in PKR"
+        },
+        "category": {
+          "type": "string",
+          "enum": ["hot-selling", "new-brands", "famous"],
+          "description": "Segment classification category"
+        },
+        "stock": {
+          "type": "number",
+          "description": "Live stock quantity level currently available at Faisal Town Lahore showroom"
+        },
+        "feature": {
+          "type": "string",
+          "description": "Primary highlight tire characteristic"
+        },
+        "imageUrl": {
+          "type": "string",
+          "description": "Absolute URL path to tire product showcase image file"
+        },
+        "createdAt": {
+          "type": "string",
+          "format": "date-time",
+          "description": "Timestamp indicating document creation time"
+        }
+      },
+      "required": ["name", "brand", "size", "price", "category", "stock"]
+    },
+    "VisitorLog": {
+      "title": "VisitorLog",
+      "description": "Log of user visitor analytics for tracking store traffic and engagement",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Auto-generated document identifier"
+        },
+        "sessionId": {
+          "type": "string",
+          "description": "Unique session identifier for the visitor"
+        },
+        "userAgent": {
+          "type": "string",
+          "description": "Visitor browser metadata"
+        },
+        "platform": {
+          "type": "string",
+          "description": "OS platform of the visitor"
+        },
+        "language": {
+          "type": "string",
+          "description": "Browser default language"
+        },
+        "pagePath": {
+          "type": "string",
+          "description": "Specific route or section visited"
+        },
+        "timestamp": {
+          "type": "string",
+          "format": "date-time",
+          "description": "Creation timestamp"
+        }
+      },
+      "required": ["sessionId", "timestamp"]
+    },
+    "NewsletterSubscriber": {
+      "title": "NewsletterSubscriber",
+      "description": "Newsletter subscriber email record for sending seasonal maintenance tips",
+      "type": "object",
+      "properties": {
+        "id": {
+          "type": "string",
+          "description": "Auto-generated document identifier"
+        },
+        "email": {
+          "type": "string",
+          "description": "Email address of the newsletter subscriber"
+        },
+        "createdAt": {
+          "type": "string",
+          "format": "date-time",
+          "description": "Subscription timestamp"
+        }
+      },
+      "required": ["email", "createdAt"]
+    }
+  },
+  "firestore": {
+    "products/{productId}": {
+      "schema": "Product",
+      "description": "Unified main retail/wholesale tire product collection"
+    },
+    "visitors/{visitorId}": {
+      "schema": "VisitorLog",
+      "description": "Collection storing website visitation events"
+    },
+    "subscribers/{subscriberId}": {
+      "schema": "NewsletterSubscriber",
+      "description": "Collection of customer newsletter recipient subscriber emails"
+    }
+  }
+}

firestore.rules

@@ -0,0 +1,123 @@
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+    
+    // Global Safety net default-deny catch-all
+    match /{document=**} {
+      allow read, write: if false;
+    }
+
+    // Hardened helper functions for static verification (denial of wallet guard)
+    function isValidId(id) {
+      return id is string && id.size() <= 128 && id.matches('^[a-zA-Z0-9_-]+$');
+    }
+
+    function incoming() {
+      return request.resource.data;
+    }
+
+    function existing() {
+      return resource.data;
+    }
+
+    // High fidelity schema assertion helper for Tire Products
+    function isValidTireProduct(data) {
+      return data.keys().hasAll(['id', 'name', 'brand', 'size', 'feature', 'price', 'badge', 'segment', 'image', 'description'])
+          && data.keys().size() == 10
+          && data.id is string && data.id.size() <= 128
+          && data.name is string && data.name.size() <= 128
+          && data.brand is string && data.brand.size() <= 128
+          && data.size is string && data.size.size() <= 64
+          && data.feature is string && data.feature.size() <= 256
+          && (data.price is int || data.price is float) && data.price >= 0
+          && data.badge is string && data.badge.size() <= 128
+          && data.segment is string && (data.segment == 'hot' || data.segment == 'new' || data.segment == 'famous')
+          && data.image is string && data.image.size() <= 1024
+          && data.description is string && data.description.size() <= 4096;
+    }
+
+    // Modern High fidelity schema helper for the requested "products" collection
+    function isValidProduct(data) {
+      return data.name is string && data.name.size() <= 128
+          && data.brand is string && data.brand.size() <= 128
+          && data.size is string && data.size.size() <= 64
+          && (data.price is int || data.price is float) && data.price >= 0
+          && data.category is string && (data.category == 'hot-selling' || data.category == 'new-brands' || data.category == 'famous')
+          && (data.stock is int || data.stock is float) && data.stock >= 0
+          && data.feature is string && data.feature.size() <= 256
+          && data.imageUrl is string && data.imageUrl.size() <= 1024;
+    }
+
+    // High fidelity schema assertion helper for User Testimonials
+    function isValidUserReview(data) {
+      return data.keys().hasAll(['name', 'rating', 'text', 'date', 'initials'])
+          && data.keys().size() == 5
+          && data.name is string && data.name.size() <= 128
+          && data.rating is int && data.rating >= 1 && data.rating <= 5
+          && data.text is string && data.text.size() <= 4096
+          && data.date is string && data.date.size() <= 128
+          && data.initials is string && data.initials.size() <= 16;
+    }
+
+    // High fidelity schema assertion helper for Visitor Analytics
+    function isValidVisitorLog(data) {
+      return data.keys().hasAll(['sessionId', 'userAgent', 'platform', 'language', 'pagePath', 'timestamp'])
+          && data.keys().size() == 6
+          && data.sessionId is string && data.sessionId.size() <= 256
+          && data.userAgent is string && data.userAgent.size() <= 1024
+          && data.platform is string && data.platform.size() <= 128
+          && data.language is string && data.language.size() <= 64
+          && data.pagePath is string && data.pagePath.size() <= 256
+          && data.timestamp is timestamp && data.timestamp == request.time;
+    }
+
+    // High fidelity schema assertion helper for Newsletter Subscribers
+    function isValidSubscriber(data) {
+      return data.keys().hasAll(['email', 'createdAt'])
+          && data.keys().size() == 2
+          && data.email is string && data.email.size() <= 256 && data.email.matches('^[^@]+@[^@]+\\.[^@]+$')
+          && data.createdAt is timestamp && data.createdAt == request.time;
+    }
+
+    // Hardened constraints for the /products/ collection (Public read, authenticated write or seed prefix)
+    match /products/{productId} {
+      allow read: if true;
+      allow create: if (request.auth != null || productId.startsWith('seed-')) && isValidId(productId) && isValidProduct(incoming());
+      allow update: if request.auth != null && isValidId(productId) && isValidProduct(incoming());
+      allow delete: if request.auth != null && isValidId(productId);
+    }
+
+    // Allow public read on the system connectivity check path
+    match /test/connection {
+      allow read: if true;
+    }
+
+    // Hardened constraints for the /tyres/ collection
+    match /tyres/{tyreId} {
+      allow read: if true;
+      allow create, update: if isValidId(tyreId) && isValidTireProduct(incoming());
+      allow delete: if isValidId(tyreId);
+    }
+
+    // Hardened constraints for the /reviews/ collection
+    match /reviews/{reviewId} {
+      allow read: if true;
+      allow create: if isValidId(reviewId) && isValidUserReview(incoming());
+      allow update, delete: if false; // Reviews are write-once append-only
+    }
+
+    // Hardened constraints for the /visitors/ collection
+    match /visitors/{visitorId} {
+      allow read: if request.auth != null; // Admin-only read for visitor stats
+      allow create: if isValidId(visitorId) && isValidVisitorLog(incoming());
+      allow update, delete: if false; // Visitor logs are immutable
+    }
+
+    // Hardened constraints for the /subscribers/ collection (Public sign up, Admin-only read)
+    match /subscribers/{subscriberId} {
+      allow read: if request.auth != null; // Admin can view mailing list
+      allow create: if isValidId(subscriberId) && isValidSubscriber(incoming());
+      allow update, delete: if false; // Newsletter entries are append-only/immutable
+    }
+  }
+}

index.html

@@ -0,0 +1,112 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Haider Brothers Traders in Faisal Town, Lahore. Top-rated 4.8★ tire shop offering 24/7 tire emergency service, wheel alignment, repairs, and high-quality tires from Bridgestone, Michelin, Yokohama, Autogrip." />
+    <title>Haider Brothers Traders | Premium Tires & 24/7 Service, Faisal Town Lahore</title>
+    
+    <!-- Open Graph (Facebook / LinkedIn) Meta Tags -->
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Haider Brothers Traders | Premium Tires & 24/7 Service, Lahore" />
+    <meta property="og:description" content=" Lahore's top-rated 4.8★ tyre shop offering certified brand-new tyres, 3D wheel alignment, and 24/7 emergency roadside flat tire assistance in Faisal Town." />
+    <meta property="og:image" content="https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&q=80&w=1200&h=630" />
+    <meta property="og:url" content="https://haidertrading.com" />
+    <meta property="og:site_name" content="Haider Brothers Traders" />
+    <meta property="og:locale" content="en_US" />
+
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Haider Brothers Traders | Premium Tires & 24/7 Service, Lahore" />
+    <meta name="twitter:description" content="Certified brand-new tires, premium 3D wheel alignment, computerized balancing, and 24/7 roadside emergency tire repair in Faisal Town, Lahore." />
+    <meta name="twitter:image" content="https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&q=80&w=1200&h=630" />
+    
+    <!-- JSON-LD LocalBusiness Schema -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "AutoPartsStore",
+      "name": "Haider Brothers Traders",
+      "image": "https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&q=80&w=800",
+      "description": "Premium 24/7 tire service, sales, alignment, and repair in Faisal Town, Block C 1, Lahore, Pakistan.",
+      "telephone": "+923024594403",
+      "priceRange": "PKR",
+      "address": {
+        "@type": "PostalAddress",
+        "streetAddress": "36-C-1, Maulana Shaukat Ali Road, Block C-1 Faisal Town",
+        "addressLocality": "Lahore",
+        "addressRegion": "Punjab",
+        "postalCode": "54700",
+        "addressCountry": "PK"
+      },
+      "geo": {
+        "@type": "GeoCoordinates",
+        "latitude": 31.4812,
+        "longitude": 74.3031
+      },
+      "openingHoursSpecification": {
+        "@type": "OpeningHoursSpecification",
+        "dayOfWeek": [
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday",
+          "Sunday"
+        ],
+        "opens": "00:00",
+        "closes": "23:59"
+      },
+      "aggregateRating": {
+        "@type": "AggregateRating",
+        "ratingValue": "4.8",
+        "reviewCount": "5"
+      },
+      "review": [
+        {
+          "@type": "Review",
+          "author": {
+            "@type": "Person",
+            "name": "gitsitmarketing"
+          },
+          "reviewRating": {
+            "@type": "Rating",
+            "ratingValue": "5"
+          },
+          "reviewBody": "Excellent service and quality of tires. My experience was good."
+        },
+        {
+          "@type": "Review",
+          "author": {
+            "@type": "Person",
+            "name": "M Bilal"
+          },
+          "reviewRating": {
+            "@type": "Rating",
+            "ratingValue": "5"
+          },
+          "reviewBody": "My experience was great with haider brother traders. They provided me good service and high quality product."
+        },
+        {
+          "@type": "Review",
+          "author": {
+            "@type": "Person",
+            "name": "Muhammad Ramzan"
+          },
+          "reviewRating": {
+            "@type": "Rating",
+            "ratingValue": "5"
+          },
+          "reviewBody": "Great quality and service."
+        }
+      ]
+    }
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Haider Brothers Traders",
+  "description": "Premium 24/7 tire service, sales, alignment, and repair in Faisal Town, Block C 1, Lahore, Pakistan.",
+  "requestFramePermissions": [],
+  "majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
+}

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist server.js",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^2.4.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "dotenv": "^17.2.3",
+    "express": "^4.21.2",
+    "firebase": "^12.14.0",
+    "lucide-react": "^0.546.0",
+    "motion": "^12.23.24",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "vite": "^6.2.3"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "esbuild": "^0.25.0",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3"
+  }
+}

src/App.tsx

@@ -0,0 +1,798 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { 
+  Sparkles, 
+  MapPin, 
+  Phone, 
+  Clock, 
+  Star, 
+  Layers, 
+  Compass, 
+  MessageSquare, 
+  Heart, 
+  CheckCircle2, 
+  ChevronRight, 
+  TrendingUp, 
+  Award, 
+  Search,
+  ChevronDown,
+  ChevronUp,
+  Share2,
+  Lock,
+  Wrench,
+  HelpCircle,
+  FolderLock
+} from "lucide-react";
+
+import { BUSINESS_INFO, BRANDS, REVIEWS, TireProduct } from "./data";
+import { 
+  getTireProducts, 
+  getReviews, 
+  addReview, 
+  SEED_TYRE_PRODUCTS 
+} from "./lib/tireService";
+import { checkAuthState, logVisitorInfo, onProductsSnapshot } from "./lib/firebaseService";
+
+import Navbar from "./components/Navbar";
+import Logo from "./components/Logo";
+import Hero from "./components/Hero";
+import TireCard from "./components/TireCard";
+import ProductDetailsModal from "./components/ProductDetailsModal";
+import ReviewsSection from "./components/ReviewsSection";
+import LocationContact from "./components/LocationContact";
+import FloatingActions from "./components/FloatingActions";
+import VehicleFitmentWidget from "./components/VehicleFitmentWidget";
+import InventoryManager from "./components/InventoryManager";
+import AdminLoginModal from "./components/AdminLoginModal";
+import Promotions from "./components/Promotions";
+import NewsletterSignup from "./components/NewsletterSignup";
+import FAQSection from "./components/FAQSection";
+
+export default function App() {
+  const [darkMode, setDarkMode] = useState<boolean>(true);
+  const [currentPage, setCurrentPage] = useState<string>("home");
+  const [currentUser, setCurrentUser] = useState<any | null>(null);
+  const [showAdminLoginModal, setShowAdminLoginModal] = useState<boolean>(false);
+  
+  const isAuthorizedAdmin = currentUser?.email === "bahaduralimunnabhai@gmail.com";
+
+  // Redirect to home if unauthenticated user somehow sits on admin route
+  useEffect(() => {
+    if (currentPage === "admin" && !isAuthorizedAdmin) {
+      setCurrentPage("home");
+    }
+  }, [currentPage, isAuthorizedAdmin]);
+
+  // Track page navigation analytics safely
+  useEffect(() => {
+    logVisitorInfo(currentPage);
+  }, [currentPage]);
+
+  // Auth listener
+  useEffect(() => {
+    const unsubscribe = checkAuthState((user) => {
+      setCurrentUser(user);
+    });
+    return () => unsubscribe();
+  }, []);
+  
+  // Master API database states loaded dynamically from Firestore
+  const [products, setProducts] = useState<TireProduct[]>([]);
+  const [reviews, setReviews] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  // Dynamic state selectors
+  const [activeSegment, setActiveSegment] = useState<'all' | 'hot' | 'new' | 'famous'>('all');
+  const [selectedBrand, setSelectedBrand] = useState<string>('All');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [priceSort, setPriceSort] = useState<'none' | 'low-high' | 'high-low'>('none');
+  const [selectedTire, setSelectedTire] = useState<TireProduct | null>(null);
+
+  // Load products dynamically in real-time and reviews on startup
+  useEffect(() => {
+    setLoading(true);
+    
+    // Subscribe to live products collection updates
+    const unsubscribeProducts = onProductsSnapshot((snapshotList) => {
+      const mapped = snapshotList.map(p => ({
+        id: p.id,
+        name: p.name,
+        brand: p.brand,
+        size: p.size,
+        feature: p.feature,
+        price: p.price,
+        badge: p.badge || (p.category === "hot-selling" ? "Hot Selling" : p.category === "new-brands" ? "New Arrival" : "Famous"),
+        segment: p.segment || (p.category === "hot-selling" ? "hot" : p.category === "new-brands" ? "new" : "famous") as "hot" | "new" | "famous",
+        image: p.image || p.imageUrl,
+        stock: p.stock || 0,
+        description: p.description || `Premium quality tire from ${p.brand}.`
+      }));
+      setProducts(mapped);
+      setLoading(false);
+    });
+
+    loadReviews();
+
+    return () => {
+      unsubscribeProducts();
+    };
+  }, []);
+
+  const loadReviews = async () => {
+    try {
+      const dbReviews = await getReviews();
+      if (dbReviews && dbReviews.length > 0) {
+        setReviews(dbReviews);
+      } else {
+        setReviews(REVIEWS);
+      }
+    } catch (e) {
+      console.error("Firestore reviews fallback.", e);
+      setReviews(REVIEWS);
+    }
+  };
+
+  const handleAddNewReview = async (newReviewObj: any) => {
+    try {
+      await addReview(newReviewObj);
+      // Reload from cloud immediately
+      const dbReviews = await getReviews();
+      setReviews(dbReviews);
+    } catch (e) {
+      // Offline fallback append
+      setReviews((prev) => [newReviewObj, ...prev]);
+    }
+  };
+
+  // Helper action: when selecting recommended size from widget, immediately filter catalogue
+  const handleFilterSizeFromWidget = (sizeCode: string) => {
+    setSearchQuery(sizeCode);
+    setSelectedBrand("All");
+    setActiveSegment("all");
+    setPriceSort("none");
+    setCurrentPage("catalogue");
+    
+    // Smooth scroll to top of database list
+    setTimeout(() => {
+      const el = document.getElementById("catalog-grid-top");
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 100);
+  };
+
+  // Derivative Filter for landing sections
+  const hotSellingProducts = products.filter(p => p.segment === 'hot');
+  const newArrivalProducts = products.filter(p => p.segment === 'new');
+
+  // Master Filter and Sorting engine for dynamic Catalogue list
+  const filteredCatalogProducts = products.filter((tire) => {
+    const matchesSegment = activeSegment === 'all' || tire.segment === activeSegment;
+    const matchesBrand = selectedBrand === 'All' || tire.brand.toLowerCase() === selectedBrand.toLowerCase();
+    
+    const searchString = `${tire.name} ${tire.brand} ${tire.size} ${tire.feature} ${tire.description}`.toLowerCase();
+    const matchesSearch = searchString.includes(searchQuery.toLowerCase());
+
+    return matchesSegment && matchesBrand && matchesSearch;
+  });
+
+  // Apply Price Sorting configurations
+  const sortedCatalogProducts = [...filteredCatalogProducts].sort((a, b) => {
+    if (priceSort === "low-high") return a.price - b.price;
+    if (priceSort === "high-low") return b.price - a.price;
+    return 0; // retain database natural feed sorting
+  });
+
+  return (
+    <div className={`min-h-screen font-sans antialiased transition-colors duration-300 ${
+      darkMode ? "bg-brand-dark text-white" : "bg-slate-50 text-slate-900"
+    }`}>
+      
+      {/* 24/7 Top Alert Ribbon with High Visibility SEO keyword highlights */}
+      <div className="bg-gradient-to-r from-brand-orange to-red-600 text-white text-center py-2 px-4 text-xs font-mono font-bold uppercase tracking-widest flex items-center justify-center space-x-2 relative z-50">
+        <span className="w-2.5 h-2.5 rounded-full bg-white animate-ping"></span>
+        <span className="hidden sm:inline">24/7 EMERGENCY TYRE PUNCTURE BREAKDOWN REPAIR ROAD ASSISTANCE IN LAHORE: </span>
+        <span className="sm:hidden">24/7 LAHORE EMERGENCY ASSISTANCE: </span>
+        <a href={`tel:${BUSINESS_INFO.phoneRaw}`} className="underline hover:opacity-85 ml-1 font-sans font-extrabold text-xs tracking-normal">
+          📞 {BUSINESS_INFO.phone}
+        </a>
+      </div>
+
+      {/* State-driven Navigation Bar */}
+      <Navbar 
+        darkMode={darkMode} 
+        setDarkMode={setDarkMode} 
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        isAuthorizedAdmin={isAuthorizedAdmin}
+      />
+
+      {/* Main Container Wrapper with Animation Transitions */}
+      <main className="transition-opacity duration-300">
+        
+        {/* VIEW 1: HOME PAGE PAGE-TAB */}
+        {currentPage === "home" && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.4 }}
+          >
+            {/* Elegant Display Hero Header */}
+            <Hero darkMode={darkMode} />
+
+            {/* HIGH SEO TEXT SECTION & KEYWORDS */}
+            <section className={`py-6 border-y ${darkMode ? "bg-black/10 border-white/5" : "bg-slate-100 border-slate-200"}`}>
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-xs tracking-wide font-mono opacity-85">
+                <span>⚡ LAHORE INDUSTRIAL TRADING CORP • RETAIL & WHOLESALE RATES ON BRAND NEW TYRES IN FAISAL TOWN • CERTIFIED GERMAN TUNE-UP & ALIGNMENT STAGES</span>
+              </div>
+            </section>
+
+            {/* SEASONAL BUNDLE PROMOTIONS CAROUSEL SLIDER */}
+            <Promotions darkMode={darkMode} />
+
+            {/* DYNAMIC CAR MODEL VEHICLE INTEGRATION WIDGET */}
+            <section className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="text-center max-w-2xl mx-auto mb-10">
+                <span className="text-xs font-mono tracking-widest uppercase bg-brand-orange/15 text-brand-orange px-3.5 py-1 rounded-full font-extrabold">
+                  Car Fitment Search
+                </span>
+                <h2 className="text-3xl font-display font-extrabold tracking-tight mt-3">
+                  Vehicle Recommended Tyre Size Finder
+                </h2>
+                <p className={`text-sm mt-2 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                  Input or lookup your car name to pull custom rim specifications, load recommended profile compounds, and lookup live stock matching instantly.
+                </p>
+              </div>
+
+              {/* Mounted child fitment widget component */}
+              <VehicleFitmentWidget 
+                darkMode={darkMode} 
+                onFilterSize={handleFilterSizeFromWidget} 
+              />
+            </section>
+
+            {/* FEATURED: HOT SELLING TYRES LISTING */}
+            <section id="hot" className={`py-12 ${darkMode ? "bg-brand-dark/95" : "bg-white"}`}>
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex flex-col sm:flex-row items-baseline justify-between mb-8 border-b pb-4 border-black/5 dark:border-white/5">
+                  <div>
+                    <span className="text-brand-orange font-mono text-xs uppercase font-extrabold tracking-widest">
+                      🔥 Top Seller Index
+                    </span>
+                    <h3 className="text-2xl sm:text-3xl font-display font-black tracking-tight mt-1">
+                      Lahore's Demanded Tyres
+                    </h3>
+                  </div>
+                  <button 
+                    onClick={() => { setCurrentPage("catalogue"); setActiveSegment("hot"); }}
+                    className="text-xs font-bold text-brand-orange hover:underline focus:outline-none mt-2 sm:mt-0"
+                  >
+                    View All Popular Tyres →
+                  </button>
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                  {hotSellingProducts.slice(0, 4).map((tire) => (
+                    <TireCard
+                      key={tire.id}
+                      tire={tire}
+                      darkMode={darkMode}
+                      onSelect={(t) => setSelectedTire(t)}
+                    />
+                  ))}
+                </div>
+              </div>
+            </section>
+
+            {/* BRAND DIFFERENTIATORS BENTO GRAPH DISPLAY SECTION */}
+            <section className={`py-20 ${darkMode ? "bg-black/30" : "bg-slate-100"}`}>
+              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 items-center">
+                  <div>
+                    <span className="text-brand-orange font-mono text-xs uppercase font-extrabold">
+                      🛡️ Premium Security and Quality Safety
+                    </span>
+                    <h3 className="text-3xl font-display font-black tracking-tight mt-2 leading-tight">
+                      Why Faisal Town Chooses Haider Brothers Traders?
+                    </h3>
+                    <p className={`text-sm mt-3 leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                      Our mission is to guarantee maximum safety rating, high speed response, comfortable suspensions, and durable tyre lifespan for everyday Pakistani passenger sedans and heavy commercial vehicles. We operate 24 hours a day to prevent vehicle emergencies and offer full high-grade premium warranty validation.
+                    </p>
+
+                    <div className="space-y-4 mt-6">
+                      <div className="flex items-start space-x-3">
+                        <span className="p-1 px-1.8 rounded-lg bg-brand-orange/10 text-brand-orange font-bold text-xs mt-0.5">✔</span>
+                        <div>
+                          <h4 className="font-bold text-sm">German 3D Wheel Alignment stages</h4>
+                          <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>We restore precise steering control & eliminate early tyre scrubbing.</p>
+                        </div>
+                      </div>
+
+                      <div className="flex items-start space-x-3">
+                        <span className="p-1 px-1.8 rounded-lg bg-brand-orange/10 text-brand-orange font-bold text-xs mt-0.5">✔</span>
+                        <div>
+                          <h4 className="font-bold text-sm">100% Genuine Certified Imports</h4>
+                          <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Say no to smuggling issues. Enjoy legal security with real DOT manufacturing years.</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className={`p-6 sm:p-8 rounded-3xl border ${
+                    darkMode ? "bg-[#1c1c24] border-white/5 shadow-2xl" : "bg-white border-slate-200/80 shadow-md"
+                  }`}>
+                    <h4 className="font-display font-black text-l uppercase text-brand-orange text-center mb-6">
+                      ⚙️ Core Service Statistics
+                    </h4>
+                    
+                    <div className="space-y-4">
+                      <div>
+                        <div className="flex justify-between text-xs font-mono font-bold mb-1">
+                          <span>Original Custom Warranty Claim Ratio</span>
+                          <span className="text-brand-orange">100% Guaranteed</span>
+                        </div>
+                        <div className="w-full h-2 rounded-full bg-slate-200 dark:bg-black/30 overflow-hidden">
+                          <div className="h-full bg-brand-orange w-full"></div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <div className="flex justify-between text-xs font-mono font-bold mb-1">
+                          <span>Response Speed under Emergency (Minutes)</span>
+                          <span className="text-brand-orange">Within 25 Mins</span>
+                        </div>
+                        <div className="w-full h-2 rounded-full bg-slate-200 dark:bg-black/30 overflow-hidden">
+                          <div className="h-full bg-brand-orange" style={{ width: "95%" }}></div>
+                        </div>
+                      </div>
+
+                      <div>
+                        <div className="flex justify-between text-xs font-mono font-bold mb-1">
+                          <span>Certified Import Tyre Compound Durability</span>
+                          <span className="text-brand-orange">50,000+ Kilometers</span>
+                        </div>
+                        <div className="w-full h-2 rounded-full bg-slate-200 dark:bg-black/30 overflow-hidden">
+                          <div className="h-full bg-brand-orange" style={{ width: "90%" }}></div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="p-4 bg-brand-orange/5 border border-brand-orange/10 rounded-xl text-center mt-6">
+                      <span className="text-xs font-semibold text-brand-orange font-mono">
+                        🔥 CERTIFIED REPUTATION FOR QUALITY FITTING
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            {/* SECTIONS: LAHORE STREET LOCATION CONTACT PREVIEW */}
+            <LocationContact darkMode={darkMode} />
+          </motion.div>
+        )}
+
+        {/* VIEW 2: TYRE CATALOGUE PAGE-TAB */}
+        {currentPage === "catalogue" && (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="pt-24 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+          >
+            {/* Header intro */}
+            <div className="text-center max-w-2xl mx-auto mb-12" id="catalog-grid-top">
+              <span className="text-xs font-mono tracking-widest uppercase bg-brand-orange/10 text-brand-orange px-3.5 py-1.5 rounded-full font-bold inline-block">
+                Distributer Price Index
+              </span>
+              <h1 className="text-3xl sm:text-5xl font-display font-black tracking-tight mt-4">
+                Full Tyre Inventory Catalogue
+              </h1>
+              <p className={`text-sm mt-3 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                Live stock records connected to Faisal Town Lahore branch. Filter by sizes, manufacturers, segment highlights, or order by price index instantly.
+              </p>
+            </div>
+
+            {/* Advanced Filters Block */}
+            <div className={`p-6 rounded-3xl border mb-10 space-y-6 ${
+              darkMode ? "glassmorphism box-glow" : "glassmorphism-light shadow-md"
+            }`}>
+              {/* Row 1: Search and Sorting controls */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                {/* Search Bar input */}
+                <div className="md:col-span-2 relative">
+                  <span className={`text-xs font-semibold font-mono block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                    Filter by Keywords (e.g. Michelin, 185/65R14, grabber)
+                  </span>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      placeholder="Type tire model, width, ratio, code, or feature description..."
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      className={`w-full p-3 pl-10 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                        darkMode ? "bg-black/35 border-white/10 text-white placeholder-slate-500" : "bg-white border-slate-200 text-slate-800"
+                      }`}
+                      id="search-tyres-input"
+                    />
+                    <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+                  </div>
+                </div>
+
+                {/* Price sorting selection dropdown */}
+                <div>
+                  <span className={`text-xs font-semibold font-mono block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                    Sort by Price Index
+                  </span>
+                  <select
+                    value={priceSort}
+                    onChange={(e) => setPriceSort(e.target.value as any)}
+                    className={`w-full p-3 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                      darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                    }`}
+                    id="price-sort-select"
+                  >
+                    <option value="none">Database Standards</option>
+                    <option value="low-high">Price: Low to High</option>
+                    <option value="high-low">Price: High to Low</option>
+                  </select>
+                </div>
+              </div>
+
+              {/* Row 2: Segments */}
+              <div className="space-y-2 pt-2 border-t border-black/5 dark:border-white/5">
+                <span className={`text-xs font-mono font-bold tracking-wider uppercase block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                  Filter by Segment Categories
+                </span>
+                <div className="flex flex-wrap gap-2">
+                  {[
+                    { id: 'all', label: 'All Products' },
+                    { id: 'hot', label: '🔥 Hot Selling' },
+                    { id: 'new', label: '🆕 New arrivals' },
+                    { id: 'famous', label: '⭐ Famous Brand Favorites' }
+                  ].map((seg) => (
+                    <button
+                      key={seg.id}
+                      onClick={() => setActiveSegment(seg.id as any)}
+                      className={`px-3 py-2 rounded-xl text-xs font-semibold transition-all ${
+                        activeSegment === seg.id
+                          ? "bg-brand-orange text-white"
+                          : darkMode
+                          ? "bg-white/5 border border-white/5 text-slate-300 hover:bg-white/10"
+                          : "bg-slate-100 border border-slate-200 text-slate-700 hover:bg-slate-200"
+                      }`}
+                      id={`segment-btn-${seg.id}`}
+                    >
+                      {seg.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Row 3: Manufacturer filters */}
+              <div className="space-y-2 pt-2 border-t border-black/5 dark:border-white/5">
+                <span className={`text-xs font-mono font-bold tracking-wider uppercase block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                  Filter by Brand Manufacturer
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  <button
+                    onClick={() => setSelectedBrand('All')}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                      selectedBrand === 'All'
+                        ? "border border-brand-orange text-brand-orange bg-brand-orange/10 font-bold"
+                        : darkMode
+                        ? "border border-white/5 bg-white/5 text-slate-300 hover:text-white"
+                        : "border border-slate-200 bg-white text-slate-700 hover:text-slate-900"
+                    }`}
+                    id="brand-btn-all"
+                  >
+                    All Brands
+                  </button>
+                  {BRANDS.map((br) => (
+                    <button
+                      key={br.name}
+                      onClick={() => setSelectedBrand(br.name)}
+                      className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                        selectedBrand === br.name
+                          ? "border border-brand-orange text-brand-orange bg-brand-orange/10 font-bold"
+                          : darkMode
+                          ? "border border-white/5 bg-white/5 text-slate-300 hover:text-white"
+                          : "border border-slate-200 bg-white text-slate-700 hover:text-slate-900"
+                      }`}
+                      id={`brand-btn-${br.name.replace(/\s+/g, '-').toLowerCase()}`}
+                    >
+                      {br.name}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Results bar */}
+            <div className="flex justify-between items-center mb-6">
+              <span className="text-xs font-mono text-slate-400">
+                Found <span className="text-brand-orange font-bold font-sans">{sortedCatalogProducts.length}</span> matching products in Lahore branch
+              </span>
+              {searchQuery && (
+                <button 
+                  onClick={() => setSearchQuery("")}
+                  className="text-xs text-brand-orange hover:underline font-bold"
+                >
+                  Clear size queries
+                </button>
+              )}
+            </div>
+
+            {/* Dynamic Tyre Catalog Cards Grid */}
+            {sortedCatalogProducts.length > 0 ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+                {sortedCatalogProducts.map((tire) => (
+                  <TireCard
+                    key={tire.id}
+                    tire={tire}
+                    darkMode={darkMode}
+                    onSelect={(t) => setSelectedTire(t)}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className={`p-12 text-center rounded-3xl border border-dashed text-slate-400 ${
+                darkMode ? "bg-white/5 border-white/10" : "bg-slate-50 border-slate-200"
+              } max-w-md mx-auto`}>
+                <span className="text-4xl block mb-3">🔍</span>
+                <h4 className="font-display font-bold text-md text-brand-orange">No exact specification tyre found</h4>
+                <p className={`text-xs mt-2 leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                  We might still have warehouse stock of size custom model '{searchQuery}'! Please call or shoot a direct WhatsApp to our sales desk.
+                </p>
+                <div className="mt-6 flex justify-center space-x-3">
+                  <button
+                    onClick={() => { setSelectedBrand("All"); setActiveSegment("all"); setSearchQuery(""); }}
+                    className="bg-brand-orange text-white text-xs px-4 py-2 rounded-xl transition-all hover:bg-brand-orange-dark font-medium"
+                  >
+                    Reset Filter options
+                  </button>
+                  <a
+                    href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                    className={`text-xs px-4 py-2 border rounded-xl transition-all ${
+                      darkMode ? "border-white/10 text-white" : "border-slate-300 text-slate-800 hover:bg-slate-50"
+                    }`}
+                  >
+                    Call Sales Office
+                  </a>
+                </div>
+              </div>
+            )}
+          </motion.div>
+        )}
+
+        {/* VIEW 3: LIVE REVIEWS BOARD PAGE-TAB */}
+        {currentPage === "reviews" && (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="pt-24"
+          >
+            {/* Direct mount child Reviews component */}
+            <ReviewsSection 
+              darkMode={darkMode} 
+              reviews={reviews}
+              onAddReview={handleAddNewReview}
+            />
+          </motion.div>
+        )}
+
+        {/* VIEW 4: SHOWROOM LOCATION DETAILS PAGE-TAB */}
+        {currentPage === "showroom" && (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="pt-24 pb-20"
+          >
+            {/* Showroom location address layouts */}
+            <LocationContact darkMode={darkMode} />
+
+            {/* FITTING & ALIGNMENT GUIDELINES EXTRA INFO PANEL */}
+            <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
+              <div className={`p-6 sm:p-8 rounded-3xl border ${
+                darkMode ? "bg-[#1c1c24] border-white/5" : "bg-slate-100 border-slate-200"
+              }`}>
+                <h3 className="font-display font-black text-l text-brand-orange mb-4">
+                  🧭 ROAD EMERGENCIES IN LAHORE
+                </h3>
+                <p className={`text-xs sm:text-sm leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                  Broke down late at midnight in Faisal Town, Garden Town, Model Town, Gulberg, or Johar Town due to tyre flat punctures? Do not panic. Simply trigger our emergency phone number 24/7. Our mobile fitment van is equipped with high quality compound kits to rescue you immediately on-site!
+                </p>
+                <div className="mt-4">
+                  <a 
+                    href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                    className="inline-flex items-center space-x-1 bg-brand-orange text-white font-bold text-xs px-4 py-2 rounded-xl"
+                  >
+                    <span>Request Roadside Assistance</span>
+                  </a>
+                </div>
+              </div>
+
+              <div className={`p-6 sm:p-8 rounded-3xl border ${
+                darkMode ? "bg-[#1c1c24] border-white/5" : "bg-slate-100 border-slate-200"
+              }`}>
+                <h3 className="font-display font-black text-l text-brand-orange mb-4">
+                  🛠️ ALIGNMENT & COMPUTERIZED STEERING ADJUSTMENTS
+                </h3>
+                <p className={`text-xs sm:text-sm leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                  We recommend doing computerized 3D wheel alignment checks and wheel balancing every 8,000 Kilometers to avoid uneven tread wire wear, suspension pull, and secure complete control of the car across highways at high speeds. Stop by during the day for discount fitment checking.
+                </p>
+                <p className="text-[11px] font-mono text-slate-400 mt-3">
+                  ⏱️ 3D Alignment Stage is hosted 24/7 for premium passenger cars.
+                </p>
+              </div>
+            </section>
+
+            {/* DYNAMIC FAQ ACCORDION COMPONENT WITH HIGHEST SEO RATINGS */}
+            <FAQSection darkMode={darkMode} />
+          </motion.div>
+        )}
+
+        {/* VIEW 5: INVENTORY MANAGER DB SEEDING PAGE-TAB */}
+        {currentPage === "admin" && (
+          <motion.div
+            initial={{ opacity: 0, y: 15 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="pt-28 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+          >
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-2 border-b pb-4 border-black/5 dark:border-white/5">
+              <div>
+                <div className="inline-flex items-center space-x-2 bg-brand-orange/10 px-3 py-1 rounded-full text-brand-orange text-xs font-mono font-bold uppercase tracking-wider mb-2">
+                  <FolderLock className="w-3.5 h-3.5" />
+                  <span>Real Backend Integration Console</span>
+                </div>
+                <h1 className="text-3xl sm:text-4xl font-display font-black tracking-tight mt-1">
+                  Firestore Inventory Manager
+                </h1>
+                <p className={`text-sm mt-1 max-w-2xl ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                  Admin board connected directly with our provisioned cloud Firestore. Any tyre product configured, edited, or removed in this environment reflects onto the landing page immediately.
+                </p>
+              </div>
+
+              <div className="flex items-center space-x-2 bg-green-500/10 border border-green-500/20 text-emerald-500 text-xs px-3 py-1.8 rounded-xl font-mono">
+                <span>Secure DB Mode</span>
+              </div>
+            </div>
+
+            {/* Main inventory administration dashboards */}
+            <InventoryManager 
+              darkMode={darkMode} 
+              onRefreshProducts={loadReviews}
+            />
+          </motion.div>
+        )}
+
+      </main>
+
+      {/* COMPREHENSIVE HIGH SEO FOOTER ROW SUMMARY SECTION */}
+      <footer className={`pt-16 pb-12 relative overflow-hidden transition-colors duration-300 border-t ${
+        darkMode ? "bg-brand-dark border-white/5 text-slate-400" : "bg-[#f1f3f6] border-slate-200 text-slate-600"
+      }`}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-xs">
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
+            
+            {/* Column 1: About imports */}
+            <div className="md:col-span-1.5 space-y-4">
+              <div className="flex items-center">
+                <Logo variant="full" darkMode={darkMode} className="h-12 w-auto -ml-3" />
+              </div>
+              <p className="leading-relaxed">
+                Premium quality wholesaler and certified dealer of brand new tyres. We specialize in providing verified fresh manufacturing date imports, computer balancing, and 3D wheel alignments in Faisal Town Lahore.
+              </p>
+              <div className="flex items-center space-x-1 font-mono text-[10px] text-brand-orange">
+                <span>⭐ 4.8 Ratings • Direct Google Mapping verified</span>
+              </div>
+            </div>
+
+             {/* Column 2: Quick navigation */}
+            <div className="md:col-span-0.5 space-y-3 font-mono">
+              <h4 className={`font-display font-medium text-xs uppercase tracking-widest ${darkMode ? "text-slate-200" : "text-slate-950"}`}>
+                Navigation
+              </h4>
+              <div className="flex flex-col space-y-2">
+                <button onClick={() => { setCurrentPage("home"); window.scrollTo({ top: 0 }); }} className="text-left hover:text-brand-orange transition-colors">Showroom Home</button>
+                <button onClick={() => { setCurrentPage("catalogue"); window.scrollTo({ top: 0 }); }} className="text-left hover:text-brand-orange transition-colors">Tyre Catalogue</button>
+                <button onClick={() => { setCurrentPage("reviews"); window.scrollTo({ top: 0 }); }} className="text-left hover:text-brand-orange transition-colors">Customer Feed</button>
+                <button onClick={() => { setCurrentPage("showroom"); window.scrollTo({ top: 0 }); }} className="text-left hover:text-brand-orange transition-colors">Lahore Location</button>
+                {isAuthorizedAdmin && (
+                  <button onClick={() => { setCurrentPage("admin"); window.scrollTo({ top: 0 }); }} className="text-left hover:text-brand-orange transition-colors flex items-center gap-1">
+                    <span>Inventory Manager</span>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Column 3: Contact highlights & Location */}
+            <div className="md:col-span-1 space-y-3 font-mono">
+              <h4 className={`font-display font-medium text-xs uppercase tracking-widest ${darkMode ? "text-slate-200" : "text-slate-950"}`}>
+                Showroom Contact
+              </h4>
+              <div className="flex flex-col space-y-1.5">
+                <a href={`tel:${BUSINESS_INFO.phoneRaw}`} className="hover:text-brand-orange transition-colors">
+                  📞 Emergency: {BUSINESS_INFO.phone}
+                </a>
+                <a href={`${BUSINESS_INFO.whatsappUrl}?text=I'd%20like%20to%20inquire%20about%20tires`} target="_blank" rel="noreferrer" className="hover:text-brand-orange transition-colors">
+                  💬 WhatsApp: Chat Live
+                </a>
+                <div className="text-slate-500 font-sans text-xs pt-1">
+                  📍 {BUSINESS_INFO.address}
+                </div>
+                <div className="flex items-center space-x-1 text-brand-orange text-[9px] uppercase font-bold tracking-wider pt-0.5">
+                  <MapPin className="w-3.5 h-3.5" />
+                  <span>Faisal Town Lahore</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Column 4: Newsletter signup */}
+            <div className="md:col-span-1">
+              <NewsletterSignup darkMode={darkMode} />
+            </div>
+
+          </div>
+
+          <div className="pt-8 border-t border-black/5 dark:border-white/5 flex flex-col sm:flex-row items-center justify-between text-[11px] text-slate-500 text-center">
+            <p className="mb-4 sm:mb-0">
+              © {new Date().getFullYear()} Haider Brothers Traders Lahore. All Rights Reserved. Fully optimized in production under Pakistan wholesale regulations.
+              <button
+                onClick={() => {
+                  if (isAuthorizedAdmin) {
+                    setCurrentPage("admin");
+                    window.scrollTo({ top: 0 });
+                  } else {
+                    setShowAdminLoginModal(true);
+                  }
+                }}
+                className="opacity-40 hover:opacity-100 transition-opacity ml-2 cursor-pointer inline-flex items-center gap-1 text-[10px]"
+                id="subtle-staff-entrance"
+                title="Management Console"
+              >
+                <Lock className="w-2.5 h-2.5 text-brand-orange inline" />
+                <span>Staff Portal</span>
+              </button>
+            </p>
+            <div className="flex items-center space-x-1 text-center justify-center">
+              <span>Drive Safely with certified tyre sizes</span>
+              <Heart className="w-3.5 h-3.5 text-brand-orange fill-current" />
+              <span>& robust grip safety rules</span>
+            </div>
+          </div>
+        </div>
+      </footer>
+
+      {/* Interactive Detail Modal view */}
+      <AnimatePresence>
+        {selectedTire && (
+          <ProductDetailsModal
+            tire={selectedTire}
+            onClose={() => setSelectedTire(null)}
+            darkMode={darkMode}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Staff Authentication Portal Modal */}
+      <AdminLoginModal
+        isOpen={showAdminLoginModal}
+        onClose={() => setShowAdminLoginModal(false)}
+        onSuccess={() => {
+          setCurrentPage("admin");
+          window.scrollTo({ top: 0 });
+        }}
+        darkMode={darkMode}
+      />
+
+      {/* Floating Corner CTAs handles */}
+      <FloatingActions 
+        darkMode={darkMode} 
+        selectedTire={selectedTire}
+      />
+    </div>
+  );
+}

src/components/AdminLoginModal.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { X, Lock, RefreshCw, Mail, KeyRound } from "lucide-react";
+import { loginAdmin } from "../lib/firebaseService";
+
+interface AdminLoginModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  darkMode: boolean;
+}
+
+export default function AdminLoginModal({ isOpen, onClose, onSuccess, darkMode }: AdminLoginModalProps) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email || !password) {
+      setError("Please fill in all fields.");
+      return;
+    }
+    setLoading(true);
+    setError("");
+
+    try {
+      await loginAdmin(email, password);
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.message || "Invalid authentication credentials.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-55 flex items-center justify-center p-4 bg-black/70 backdrop-blur-xs">
+      <div 
+        className={`w-full max-w-md p-6 sm:p-8 rounded-3xl border shadow-2xl relative transition-colors duration-300 ${
+          darkMode ? "bg-[#1c1c24] border-white/10 text-white" : "bg-white border-slate-200 text-slate-900"
+        }`}
+      >
+        <button
+          onClick={onClose}
+          className={`absolute top-4 right-4 p-1.5 rounded-lg transition-colors ${
+            darkMode ? "hover:bg-white/10 text-slate-400 hover:text-white" : "hover:bg-black/5 text-slate-500 hover:text-black"
+          }`}
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="flex items-center space-x-3 mb-6">
+          <div className="p-2.5 rounded-xl bg-brand-orange/15 text-brand-orange">
+            <Lock className="w-6 h-6" />
+          </div>
+          <div>
+            <h3 className="font-display font-extrabold text-lg text-brand-orange">Staff Authentication</h3>
+            <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              Direct database verification for Haider Brothers Traders admin
+            </p>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-600/15 border border-red-500/20 text-red-400 text-xs rounded-xl font-medium">
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="text-[10px] uppercase font-mono tracking-wider block mb-1.5">
+              Secure Email Address
+            </label>
+            <div className="relative">
+              <input
+                type="email"
+                required
+                placeholder="bahaduralimunnabhai@gmail.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className={`w-full p-2.5 pl-9 rounded-xl text-xs border focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange ${
+                  darkMode ? "bg-black/40 border-white/10 text-white" : "bg-slate-50 border-slate-200"
+                }`}
+              />
+              <Mail className="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
+            </div>
+          </div>
+
+          <div>
+            <label className="text-[10px] uppercase font-mono tracking-wider block mb-1.5">
+              Enter Password
+            </label>
+            <div className="relative">
+              <input
+                type="password"
+                required
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className={`w-full p-2.5 pl-9 rounded-xl text-xs border focus:outline-none focus:ring-2 focus:ring-brand-orange/40 focus:border-brand-orange ${
+                  darkMode ? "bg-black/40 border-white/10 text-white" : "bg-slate-50 border-slate-200"
+                }`}
+              />
+              <KeyRound className="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" />
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            disabled={loading}
+            className="w-full bg-gradient-to-r from-brand-orange to-red-600 hover:from-brand-orange-light hover:to-red-500 text-white font-bold p-3 rounded-xl text-xs flex items-center justify-center space-x-1.5 shadow-md shadow-brand-orange/20 transition-all cursor-pointer mt-2"
+          >
+            {loading ? (
+              <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+            ) : (
+              <Lock className="w-3.5 h-3.5" />
+            )}
+            <span>Verify Credentials</span>
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

src/components/FAQSection.tsx

@@ -0,0 +1,262 @@
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { 
+  HelpCircle, 
+  ChevronDown, 
+  ShieldCheck, 
+  Wrench, 
+  Clock, 
+  Search, 
+  BadgeHelp,
+  Tag
+} from "lucide-react";
+
+interface FAQItem {
+  id: string;
+  question: string;
+  answer: string;
+  keywords: string[];
+  category: "warranty" | "services" | "general";
+}
+
+interface FAQSectionProps {
+  darkMode: boolean;
+}
+
+export default function FAQSection({ darkMode }: FAQSectionProps) {
+  const [openId, setOpenId] = useState<string | null>("warranty-duration");
+  const [filterCategory, setFilterCategory] = useState<"all" | "warranty" | "services">("all");
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const FAQS: FAQItem[] = [
+    {
+      id: "warranty-duration",
+      question: "What official warranty is provided with premium imported tyres from Yokohama, Michelin, and Continental?",
+      answer: "All premium brand tyres (including Yokohama, Michelin, and Continental) purchased from Haider Brothers Faisal Town come with a 5-Year Continuous Structural & Tread Warranty. This warranty protects against tread separation, structural defects, factory compounds failures, and early bulging under standard driving specifications. We assist with 100% genuine claims fast-tracked directly with manufacturer dealers without complications.",
+      keywords: ["warranty Yokohama", "Michelin warranty", "Continental tyres Lahore", "imported tyre warranty"],
+      category: "warranty"
+    },
+    {
+      id: "tire-installation-benefits",
+      question: "Is there a charge for tyre installation, computerized balancing, and nitrogen air filling in Faisal Town showroom?",
+      answer: "No, tyre installation at our Faisal Town showroom is 100% free with the purchase of any tyre set. For seasonal promotional packages or sets of 4 premium tyres, we include computerized 3D wheel alignment, premium computerized wheel balancing, durable tubeless valves, and lifetime nitrogen gas top-up sessions absolutely free. No hidden service charges apply.",
+      keywords: ["free tyre installation", "3D wheel alignment", "wheel balancing Faisal Town", "free nitrogen Lahore"],
+      category: "services"
+    },
+    {
+      id: "checking-dot-year",
+      question: "How can I verify the genuine manufacturing year and DOT marking of tyres purchased at Haider Brothers?",
+      answer: "We guarantee 100% authentic tyre imports with visible, untouched DOT stamps. The DOT code is a 4-digit code hot-stamped on the tire sidewall; the first two digits represent the manufacturing week, and the last two represent the year (e.g., '1226' means 12th week of 2026). Haider Brothers never stocks smuggled or expired stock, securing complete legal peace of mind with legal custom imports.",
+      keywords: ["tyre manufacturing year", "how to read DOT markings", "genuine imported tyres", "fresh tyre stock Lahore"],
+      category: "warranty"
+    },
+    {
+      id: "pothole-road-hazard",
+      question: "Does the warranty cover tyre punctures, roadside sidewall cuts, or pothole impact damage?",
+      answer: "Official manufacturer structural warranties cover material defects and manufacturing flaws. Road hazards such as standard tyre punctures, impact damage from deep Lahore potholes, sidewall kerb cuts, or debris damage are not traditionally covered under standard structural warranty terms. However, we offer premium tyre repair and patching services at our showroom anytime, or immediate tyre roadside replacements via our emergency van.",
+      keywords: ["pothole tyre damage warranty", "sidewall cuts repair Lahore", "tire puncture service", "road hazard assistance"],
+      category: "warranty"
+    },
+    {
+      id: "emergency-road-service",
+      question: "What should I do if my sedan tire bursts late at night in Lahore? Do you offer 24/7 emergency roadside support?",
+      answer: "Yes, Haider Brothers operates a dedicated 24 Hours Emergency Roadside Tyre Assistance service. If you encounter a flat tire, puncture, or rim issue late at night anywhere around Faisal Town, Model Town, Gulberg, Johar Town, or Garden Town, call our emergency hotline at +92 302 4594403 immediately. Our responsive mobile service van will dispatch with fresh stock to assist on-site.",
+      keywords: ["24/7 tyre repair Lahore", "midnight flat tire recovery", "emergency roadside assistance", "mobile tire van Faisal Town"],
+      category: "services"
+    },
+    {
+      id: "alignment-frequency",
+      question: "How often should I get computerized 3D wheel alignment checks and wheel balancing for Pakistani roads?",
+      answer: "For Pakistani road terrains, we strongly recommend a computerized 3D wheel alignment and professional wheel balancing check every 8,000 to 10,000 Kilometers, or whenever you feel alignment pulling to one side. Regular alignments prevent premature tread wear (uneven tire scrubbing), keep steering vibration-free on motorways at high speeds, and optimize vehicle fuel economy.",
+      keywords: ["computerized wheel alignment frequency", "tire balancing intervals", "how to prevent uneven tire wear", "Pakistani road maintenance"],
+      category: "services"
+    }
+  ];
+
+  const toggleFAQ = (id: string) => {
+    setOpenId((prev) => (prev === id ? null : id));
+  };
+
+  // Filter and search logic for great SEO reach
+  const filteredFAQs = FAQS.filter((faq) => {
+    const categoryMatches = filterCategory === "all" || faq.category === filterCategory;
+    const searchString = `${faq.question} ${faq.answer} ${faq.keywords.join(" ")}`.toLowerCase();
+    const queryMatches = searchString.includes(searchQuery.toLowerCase());
+    return categoryMatches && queryMatches;
+  });
+
+  return (
+    <section 
+      id="showroom-faqs-accordion"
+      className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 pt-12 border-t border-black/5 dark:border-white/5"
+    >
+      {/* Schema.org Structured Data Injection for high-fidelity Google SEO relevance */}
+      <script type="application/ld+json">
+        {JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "FAQPage",
+          "mainEntity": FAQS.map((faq) => ({
+            "@type": "Question",
+            "name": faq.question,
+            "acceptedAnswer": {
+              "@type": "Answer",
+              "text": faq.answer
+            }
+          }))
+        })}
+      </script>
+
+      <div className="text-center max-w-2xl mx-auto mb-8">
+        <span className="text-xs font-mono tracking-widest uppercase bg-brand-orange/15 text-brand-orange px-3.5 py-1 rounded-full font-bold inline-flex items-center gap-1.5 shadow-xs">
+          <BadgeHelp className="w-3.5 h-3.5 animate-pulse" />
+          <span>Haider Brothers FAQ Hub</span>
+        </span>
+        <h2 className="text-2xl sm:text-3.5xl font-display font-black tracking-tight mt-3">
+          Tire Warranty & Service FAQs
+        </h2>
+        <p className={`text-xs sm:text-sm mt-2 leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+          Honest, transparent answers about premium tyre warranties, alignment services, and emergency 24/7 roadside assistances in Faisal Town Lahore.
+        </p>
+      </div>
+
+      {/* Segment Category Switcher + SEO Search Input */}
+      <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 justify-between mb-6">
+        <div className="flex p-1 rounded-xl bg-slate-200/50 dark:bg-black/30 border border-slate-300/30 dark:border-white/5 self-start">
+          {[
+            { id: "all", label: "All Questions" },
+            { id: "warranty", label: "🛡️ Warranty" },
+            { id: "services", label: "🛠️ Services & 3D Align" }
+          ].map((cat) => (
+            <button
+              key={cat.id}
+              onClick={() => setFilterCategory(cat.id as any)}
+              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
+                filterCategory === cat.id
+                  ? "bg-brand-orange text-white"
+                  : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
+              }`}
+              type="button"
+            >
+              {cat.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Live Search inside FAQ content with key phrases */}
+        <div className="relative max-w-xs w-full">
+          <input
+            type="text"
+            placeholder="Search FAQs (e.g. alignment, DOT, Michelin)..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className={`w-full p-2.5 pl-8 text-xs rounded-xl border focus:ring-1 focus:ring-brand-orange focus:outline-hidden ${
+              darkMode
+                ? "bg-black/35 border-white/10 text-white placeholder-slate-500"
+                : "bg-white border-slate-200 text-slate-850 placeholder-slate-400"
+            }`}
+          />
+          <Search className="w-3.5 h-3.5 text-slate-400 absolute left-2.5 top-1/2 -translate-y-1/2" />
+        </div>
+      </div>
+
+      {/* Accordion List Container */}
+      {filteredFAQs.length > 0 ? (
+        <div className="space-y-3.5">
+          {filteredFAQs.map((faq) => {
+            const isOpen = openId === faq.id;
+            return (
+              <div
+                key={faq.id}
+                className={`rounded-2xl border transition-all duration-300 overflow-hidden ${
+                  isOpen
+                    ? darkMode
+                      ? "bg-[#1c1c24] border-brand-orange/40"
+                      : "bg-white border-brand-orange shadow-md"
+                    : darkMode
+                    ? "bg-black/25 border-white/5 hover:border-white/10"
+                    : "bg-white border-slate-200 hover:border-slate-300"
+                }`}
+                id={`faq-item-${faq.id}`}
+              >
+                {/* Header Interactive Trigger Button */}
+                <button
+                  onClick={() => toggleFAQ(faq.id)}
+                  className="w-full p-4 sm:p-5 flex items-center justify-between font-sans font-bold text-xs sm:text-sm text-left transition-colors focus:outline-hidden relative group"
+                  aria-expanded={isOpen}
+                  type="button"
+                >
+                  <div className="flex items-start space-x-3 pr-4">
+                    {faq.category === "warranty" ? (
+                      <ShieldCheck className="w-4 h-4 text-brand-orange mt-0.5 shrink-0" />
+                    ) : faq.category === "services" ? (
+                      <Wrench className="w-4 h-4 text-brand-orange mt-0.5 shrink-0" />
+                    ) : (
+                      <HelpCircle className="w-4 h-4 text-brand-orange mt-0.5 shrink-0" />
+                    )}
+                    <span className={darkMode ? "text-slate-100 group-hover:text-white" : "text-slate-850 group-hover:text-brand-orange"}>
+                      {faq.question}
+                    </span>
+                  </div>
+
+                  <span className={`p-1 rounded-lg transition-transform duration-300 ${
+                    isOpen ? "bg-brand-orange/15 text-brand-orange rotate-180" : "text-slate-400 hover:text-slate-600"
+                  }`}>
+                    <ChevronDown className="w-4 h-4 shrink-0" />
+                  </span>
+                </button>
+
+                {/* Smooth Expandable Accordion Body Panels */}
+                <AnimatePresence initial={false}>
+                  {isOpen && (
+                    <motion.div
+                      initial={{ height: 0, opacity: 0 }}
+                      animate={{ height: "auto", opacity: 1 }}
+                      exit={{ height: 0, opacity: 0 }}
+                      transition={{ duration: 0.25, ease: "easeInOut" }}
+                    >
+                      <div className={`p-4 sm:p-5 pt-0 border-t font-sans text-xs sm:text-[13px] leading-relaxed select-none ${
+                        darkMode ? "border-white/5 text-slate-300" : "border-slate-100 text-slate-700"
+                      }`}>
+                        <p>{faq.answer}</p>
+                        
+                        {/* SEO Keyword tags indicator for algorithmic reach */}
+                        <div className="mt-3.5 flex flex-wrap gap-1.5 items-center opacity-80">
+                          <Tag className="w-3 h-3 text-brand-orange shrink-0" />
+                          <span className="text-[10px] font-mono text-slate-400">Related indexes:</span>
+                          {faq.keywords.map((kw, i) => (
+                            <span 
+                              key={i} 
+                              className="text-[9px] font-mono bg-brand-orange/5 text-brand-orange/80 px-2 py-0.5 rounded-md border border-brand-orange/10"
+                            >
+                              {kw}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <div className={`p-10 text-center rounded-2xl border border-dashed text-slate-400 ${
+          darkMode ? "bg-white/5 border-white/10" : "bg-slate-50 border-slate-200"
+        }`}>
+          <HelpCircle className="w-8 h-8 mx-auto text-slate-500 mb-2 animate-bounce" />
+          <h4 className="font-bold text-xs">No matching faq answers found</h4>
+          <p className="text-[11px] mt-1">Try searching for simple words like "warranty", "3D alignment", or "DOT".</p>
+        </div>
+      )}
+
+      {/* Extra Service Pledge stamp */}
+      <div className={`mt-8 p-4 rounded-2xl border text-center font-mono text-[10px] ${
+        darkMode ? "bg-brand-orange/5 border-brand-orange/10" : "bg-orange-50/50 border-brand-orange/20"
+      }`}>
+        <span className="text-brand-orange font-bold font-sans">🛡️ CERTIFIED DIRECT CLAIM GUARANTOR: </span>
+        <span className={darkMode ? "text-slate-400" : "text-slate-600"}>We deal strictly in direct legal brand imports on all 2026 batches. No duplicate or high wear compounds guaranteed.</span>
+      </div>
+    </section>
+  );
+}

src/components/FloatingActions.tsx

@@ -0,0 +1,96 @@
+import { motion, AnimatePresence } from "motion/react";
+import { Phone, MessageSquare } from "lucide-react";
+import { BUSINESS_INFO, TireProduct } from "../data";
+
+interface FloatingActionsProps {
+  darkMode: boolean;
+  selectedTire?: TireProduct | null;
+}
+
+export default function FloatingActions({ darkMode, selectedTire }: FloatingActionsProps) {
+  // Format dynamic WhatsApp URL
+  const getWhatsAppUrl = () => {
+    if (!selectedTire) {
+      return `${BUSINESS_INFO.whatsappUrl}?text=${encodeURIComponent(
+        "Hello Haider Brothers, I need assistance with tyres right now"
+      )}`;
+    }
+
+    const message = `Hello Haider Brothers, I'm interested in the following tyre:
+
+🚗 *Tyre details:*
+• *Brand:* ${selectedTire.brand}
+• *Model:* ${selectedTire.name}
+• *Size:* ${selectedTire.size}
+• *Features:* ${selectedTire.feature}
+• *Price:* PKR ${selectedTire.price.toLocaleString()}
+• *Stock status:* ${selectedTire.stock !== undefined ? `${selectedTire.stock} Units Available` : "Available"}
+
+Could you please confirm the current stock and availability for installation? Thank you!`;
+
+    return `${BUSINESS_INFO.whatsappUrl}?text=${encodeURIComponent(message)}`;
+  };
+
+  const hasSelectedTire = !!selectedTire;
+
+  return (
+    <div className="fixed bottom-6 right-6 z-40 flex flex-col space-y-3.5 pointer-events-auto items-end">
+      {/* Alert Tooltip for Selected Tyre */}
+      <AnimatePresence>
+        {selectedTire && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.85, y: 15 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.85, y: 15 }}
+            className={`mr-1 mb-1 p-3.5 rounded-2xl shadow-xl max-w-xs border text-left scale-95 origin-bottom-right flex flex-col space-y-1 backdrop-blur-md ${
+              darkMode 
+                ? "bg-black/95 border-white/10 text-white" 
+                : "bg-white/95 border-slate-200 text-slate-800"
+            }`}
+          >
+            <div className="flex items-center space-x-1.5 text-brand-orange text-[10px] uppercase font-mono tracking-wider font-extrabold">
+              <span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-ping shrink-0" />
+              <span>Direct Product Inquiry</span>
+            </div>
+            <p className={`text-xs font-bold leading-tight line-clamp-1 ${darkMode ? "text-slate-100" : "text-slate-850"}`}>
+              {selectedTire.brand} {selectedTire.name}
+            </p>
+            <p className={`text-[10px] leading-snug ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              Click below to send instant specifications over WhatsApp!
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Clickable Phone Call dialer */}
+      <a
+        href={`tel:${BUSINESS_INFO.phoneRaw}`}
+        className="w-12 h-12 rounded-full bg-gradient-to-br from-brand-orange to-red-600 text-white flex items-center justify-center shadow-lg shadow-brand-orange/30 hover:scale-110 active:scale-95 transition-all group"
+        title="Dial emergency tire service line"
+        id="floating-call-btn"
+      >
+        <Phone className="w-5 h-5 group-hover:rotate-12 transition-transform" />
+      </a>
+
+      {/* Floating interactive WhatsApp */}
+      <a
+        href={getWhatsAppUrl()}
+        target="_blank"
+        rel="noreferrer referrer"
+        className={`relative w-12 h-12 rounded-full text-white flex items-center justify-center shadow-lg transition-all group ${
+          hasSelectedTire 
+            ? "bg-brand-orange hover:bg-brand-orange-dark shadow-brand-orange/40 hover:scale-112" 
+            : "bg-green-500 hover:bg-green-600 shadow-green-500/30 hover:scale-110"
+        }`}
+        title={hasSelectedTire ? `Inquire about ${selectedTire.brand} ${selectedTire.name} on WhatsApp` : "Chat live on WhatsApp"}
+        id="floating-whatsapp-btn"
+      >
+        {/* Pulsating green or orange ring indication */}
+        <span className={`absolute inset-0 rounded-full animate-ping pointer-events-none scale-105 ${
+          hasSelectedTire ? "bg-brand-orange/40" : "bg-green-500/40"
+        }`}></span>
+        <MessageSquare className="w-5 h-5 group-hover:-translate-y-0.5 transition-transform" />
+      </a>
+    </div>
+  );
+}

src/components/Hero.tsx

@@ -0,0 +1,275 @@
+import { motion } from "motion/react";
+import { Phone, ArrowRight, Star, Clock, Sparkles, ShieldCheck, MapPin } from "lucide-react";
+import { BUSINESS_INFO, BRANDS } from "../data";
+
+interface HeroProps {
+  darkMode: boolean;
+}
+
+export default function Hero({ darkMode }: HeroProps) {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+        delayChildren: 0.1
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
+  };
+
+  return (
+    <section
+      id="home"
+      className={`relative min-h-screen pt-28 pb-16 flex flex-col justify-center overflow-hidden transition-colors duration-300 ${
+        darkMode ? "bg-brand-dark text-white" : "bg-slate-50 text-slate-900"
+      }`}
+    >
+      {/* Dynamic Background Playing Tire Video */}
+      <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden">
+        <video
+          autoPlay
+          loop
+          muted
+          playsInline
+          className={`w-full h-full object-cover transition-opacity duration-700 ${
+            darkMode ? "opacity-25" : "opacity-10"
+          }`}
+          src="https://assets.mixkit.co/videos/preview/mixkit-tire-of-a-car-wheels-spinning-on-the-road-41484-large.mp4"
+          style={{ objectFit: "cover" }}
+        />
+        {/* Horizontal Dark Gradient Mask for Left-Column Text Readability */}
+        <div 
+          className={`absolute inset-0 transition-opacity duration-500 bg-gradient-to-r ${
+            darkMode 
+              ? "from-brand-dark via-brand-dark/85 to-transparent" 
+              : "from-slate-100 via-slate-100/75 to-transparent"
+          }`}
+        />
+        {/* Vertical Transition Mask to Blend into the next sections flawlessly */}
+        <div 
+          className={`absolute inset-0 transition-opacity duration-500 bg-gradient-to-t ${
+            darkMode 
+              ? "from-brand-dark via-transparent to-transparent" 
+              : "from-slate-50 via-transparent to-transparent"
+          }`}
+        />
+      </div>
+
+      {/* Decorative Orbs with glassmersion */}
+      <div className="absolute top-1/4 right-0 w-80 h-80 rounded-full bg-gradient-to-br from-brand-orange/30 to-rose-600/10 blur-[100px] pointer-events-none animate-pulse-slow"></div>
+      <div className="absolute bottom-1/4 -left-20 w-96 h-96 rounded-full bg-gradient-to-br from-blue-600/10 to-brand-orange/10 blur-[120px] pointer-events-none"></div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center"
+        >
+          {/* Left Hero Column */}
+          <div className="lg:col-span-7 space-y-8">
+            <motion.div variants={itemVariants} className="inline-flex items-center space-x-2 bg-brand-orange/10 dark:bg-brand-orange/15 border border-brand-orange/30 px-3.5 py-1.5 rounded-full text-brand-orange">
+              <Sparkles className="w-4 h-4" />
+              <span className="text-xs font-mono font-semibold tracking-wider uppercase">Faisal Town's #1 Rated Tyre Store</span>
+            </motion.div>
+
+            <motion.div variants={itemVariants} className="space-y-4">
+              <h1 className="font-display text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight leading-[1.05]">
+                Premium Tyres <br />
+                <span className="text-transparent bg-clip-text bg-gradient-to-r from-brand-orange via-orange-500 to-red-600">
+                  Built For Safety
+                </span>
+              </h1>
+              <p className={`text-base sm:text-lg max-w-xl ${
+                darkMode ? "text-slate-300" : "text-slate-600"
+              }`}>
+                Authorized distributor of world-renowned tyre brands in Lahore. From high-speed touring tyres to rugged off-road compounds, enjoy 
+                <span className="text-brand-orange font-semibold"> 24/7 emergency tyre repairs</span> & alignment services.
+              </p>
+            </motion.div>
+
+            {/* Quick Actions Buttons */}
+            <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-4">
+              <a
+                href="#all-products"
+                className="group flex items-center justify-center space-x-2 bg-gradient-to-br from-brand-orange to-red-600 hover:from-brand-orange-light hover:to-red-500 text-white px-7 py-4 rounded-xl text-base font-semibold shadow-lg shadow-brand-orange/25 hover:shadow-brand-orange/40 hover:-translate-y-0.5 transition-all text-center"
+              >
+                <span>View Tyre Catalog</span>
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </a>
+
+              <a
+                href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                className={`flex items-center justify-center space-x-2 border px-7 py-4 rounded-xl text-base font-semibold transition-all hover:-translate-y-0.5 ${
+                  darkMode
+                    ? "border-white/10 dark:hover:bg-white/5 bg-white/5 active:bg-white/10 text-white"
+                    : "border-slate-300 hover:bg-slate-100 bg-white shadow-sm text-slate-800"
+                }`}
+              >
+                <Phone className="w-5 h-5 text-brand-orange animate-wiggle" />
+                <span>Call Hotline +92 302 4594403</span>
+              </a>
+            </motion.div>
+
+            {/* Micro badges */}
+            <motion.div variants={itemVariants} className="grid grid-cols-3 gap-4 border-t pt-8 border-black/5 dark:border-white/5">
+              <div className="flex flex-col">
+                <span className="text-brand-orange font-display text-2xl font-bold">100% Original</span>
+                <span className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Authentic Import Warranty</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-brand-orange font-display text-2xl font-bold">24/7 Hours</span>
+                <span className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Night Emergency Road Rescue</span>
+              </div>
+              <div className="flex flex-col">
+                <span className="text-brand-orange font-display text-2xl font-bold">Same Day</span>
+                <span className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Instant Fitting & Tuning</span>
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Right Bento Grid Column */}
+          <div className="lg:col-span-5 grid grid-cols-2 gap-4">
+            {/* Bento Card 1: Map Google Ratings */}
+            <motion.div
+              variants={itemVariants}
+              whileHover={{ y: -4, scale: 1.02 }}
+              className={`col-span-2 p-5 rounded-3xl ${
+                darkMode ? "glassmorphism relative overflow-hidden" : "glassmorphism-light shadow-md"
+              }`}
+            >
+              <div className="flex items-start justify-between">
+                <div>
+                  <span className={`text-xs font-mono tracking-wider uppercase block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Google Reviews</span>
+                  <h3 className="text-2xl font-display font-extrabold mt-1 text-brand-orange">4.8 ★ Rating</h3>
+                  <p className={`text-xs mt-2 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>Overwhelming praise for swift customer support & precise alignment.</p>
+                </div>
+                <div className="flex space-x-1 bg-brand-orange/10 p-2 rounded-xl text-brand-orange">
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                  <Star className="w-5 h-5 fill-current" />
+                </div>
+              </div>
+              {/* Profile group miniature */}
+              <div className="flex items-center space-x-2.5 mt-4 pt-4 border-t border-black/5 dark:border-white/5">
+                <div className="flex items-center -space-x-2 overflow-hidden">
+                  <div className="w-7 h-7 rounded-full ring-2 ring-white dark:ring-[#1c1c24] bg-gradient-to-br from-emerald-500 to-teal-600 text-[10px] text-white flex items-center justify-center font-bold uppercase shadow-sm">
+                    GM
+                  </div>
+                  <div className="w-7 h-7 rounded-full ring-2 ring-white dark:ring-[#1c1c24] bg-gradient-to-br from-blue-500 to-indigo-600 text-[10px] text-white flex items-center justify-center font-bold uppercase shadow-sm">
+                    MB
+                  </div>
+                  <div className="w-7 h-7 rounded-full ring-2 ring-white dark:ring-[#1c1c24] bg-gradient-to-br from-purple-500 to-fuchsia-600 text-[10px] text-white flex items-center justify-center font-bold uppercase shadow-sm">
+                    MR
+                  </div>
+                </div>
+                <span className={`text-[11px] font-medium tracking-wide ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+                  Verified Customer Comments on Maps
+                </span>
+              </div>
+            </motion.div>
+
+            {/* Bento Card 2: 24/7 Hours */}
+            <motion.div
+              variants={itemVariants}
+              whileHover={{ y: -4 }}
+              className={`p-5 rounded-3xl ${
+                darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+              }`}
+            >
+              <div className="w-10 h-10 rounded-xl bg-orange-500/10 text-brand-orange flex items-center justify-center mb-4">
+                <Clock className="w-5 h-5" />
+              </div>
+              <h4 className="font-display font-bold text-lg">Always Open</h4>
+              <p className={`text-xs mt-1 ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                Emergency assistance, fitting & air services 24 hours open.
+              </p>
+            </motion.div>
+
+            {/* Bento Card 3: Secure Products */}
+            <motion.div
+              variants={itemVariants}
+              whileHover={{ y: -4 }}
+              className={`p-5 rounded-3xl ${
+                darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+              }`}
+            >
+              <div className="w-10 h-10 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center mb-4">
+                <ShieldCheck className="w-5 h-5" />
+              </div>
+              <h4 className="font-display font-bold text-lg">100% Genuine</h4>
+              <p className={`text-xs mt-1 ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                Authorized dealer of global and local major brands.
+              </p>
+            </motion.div>
+
+            {/* Bento Card 4: Location Pin */}
+            <motion.div
+              variants={itemVariants}
+              whileHover={{ y: -4 }}
+              className={`col-span-2 p-5 rounded-3xl flex items-center space-x-4 ${
+                darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+              }`}
+            >
+              <div className="w-12 h-12 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center shrink-0">
+                <MapPin className="w-6 h-6 animate-bounce" />
+              </div>
+              <div>
+                <span className={`text-[10px] font-mono uppercase ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Faisal Town, Block C 1, Lahore</span>
+                <h4 className="font-display font-bold text-md mt-0.5">Near Center Flats</h4>
+                <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>F8G5+H9, Lahore, Pakistan</p>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+
+        {/* Brand Stripe Ribbons Area */}
+        <div className="mt-20 pt-8 border-t border-black/5 dark:border-white/5">
+          <p className={`text-center font-mono text-xs tracking-widest uppercase mb-6 ${
+            darkMode ? "text-slate-400" : "text-slate-500"
+          }`}>
+            Official Retailer / Authorized Distributor Of Premium Brands
+          </p>
+          
+          <div className="relative w-full overflow-hidden whitespace-nowrap py-4">
+            {/* Smooth mask on edges */}
+            <div className={`absolute top-0 left-0 w-20 h-full z-10 pointer-events-none bg-gradient-to-r ${
+              darkMode ? "from-brand-dark to-transparent" : "from-slate-50 to-transparent"
+            }`}></div>
+            <div className={`absolute top-0 right-0 w-20 h-full z-10 pointer-events-none bg-gradient-to-l ${
+              darkMode ? "from-brand-dark to-transparent" : "from-slate-50 to-transparent"
+            }`}></div>
+
+            {/* Marquee scroll loop */}
+            <div className="inline-flex space-x-12 animate-marquee-scroll">
+              {[...BRANDS, ...BRANDS].map((brand, bIdx) => (
+                <div
+                  key={`${brand.name}-${bIdx}`}
+                  className={`inline-flex items-center space-x-2 bg-white/5 dark:bg-white/5 px-4 py-2.5 rounded-xl border ${
+                    brand.hasDirectAccent
+                      ? "border-brand-orange/40 text-brand-orange"
+                      : darkMode
+                      ? "border-white/5 text-slate-300 hover:border-white/25 hover:text-white"
+                      : "border-slate-200 text-slate-700 hover:border-slate-400 hover:text-slate-900"
+                  } transition-colors cursor-default`}
+                >
+                  {/* Brand visual emoji / tire mockup symbol */}
+                  <span className="text-sm font-semibold">⚙️</span>
+                  <span className="font-display font-bold uppercase tracking-wider text-sm">{brand.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/InventoryManager.tsx

@@ -0,0 +1,1311 @@
+import React, { useState, useEffect, useRef } from "react";
+import { TireProduct } from "../data";
+import { 
+  getTireProducts, 
+  saveTireProduct, 
+  deleteTireProduct 
+} from "../lib/tireService";
+import { 
+  loginAdmin, 
+  logoutAdmin, 
+  checkAuthState, 
+  createAdminUser,
+  bulkUpdatePrices,
+  getLowStockProducts,
+  onProductsSnapshot,
+  exportToJSON,
+  importFromJSON,
+  isBrowserOnline,
+  registerNetworkStateListener,
+  uploadProductImage,
+  ProductDocument,
+  getVisitorLogs,
+  VisitorRecord
+} from "../lib/firebaseService";
+import { 
+  Plus, 
+  Trash2, 
+  Edit, 
+  Database, 
+  Wrench, 
+  RefreshCw, 
+  Sparkles, 
+  Save, 
+  X, 
+  Search, 
+  Tag, 
+  Check,
+  User,
+  Lock,
+  LogOut,
+  Download,
+  Upload,
+  AlertTriangle,
+  FileSpreadsheet,
+  Wifi,
+  WifiOff,
+  Image as ImageIcon,
+  Eye,
+  Users,
+  Monitor,
+  Globe
+} from "lucide-react";
+import { User as AuthUser } from "firebase/auth";
+
+interface InventoryManagerProps {
+  darkMode: boolean;
+  onRefreshProducts: () => void;
+}
+
+export default function InventoryManager({ darkMode, onRefreshProducts }: InventoryManagerProps) {
+  const [products, setProducts] = useState<TireProduct[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  const [showAddForm, setShowAddForm] = useState<boolean>(false);
+  const [editingProduct, setEditingProduct] = useState<any | null>(null);
+
+  // Connection State
+  const [isOnline, setIsOnline] = useState<boolean>(isBrowserOnline());
+
+  // Authentication State
+  const [currentUser, setCurrentUser] = useState<AuthUser | null>(null);
+  const [authEmail, setAuthEmail] = useState<string>("");
+  const [authPassword, setAuthPassword] = useState<string>("");
+  const [isRegisterMode, setIsRegisterMode] = useState<boolean>(false);
+  const [authLoading, setAuthLoading] = useState<boolean>(false);
+
+  // Bulk operation states
+  const [bulkPercent, setBulkPercent] = useState<number>(10);
+  const [bulkLoading, setBulkLoading] = useState<boolean>(false);
+
+  // Form State for Adding / Editing
+  const [formId, setFormId] = useState<string>("");
+  const [formName, setFormName] = useState<string>("");
+  const [formBrand, setFormBrand] = useState<string>("");
+  const [formSize, setFormSize] = useState<string>("");
+  const [formFeature, setFormFeature] = useState<string>("");
+  const [formPrice, setFormPrice] = useState<number>(15000);
+  const [formStock, setFormStock] = useState<number>(10);
+  const [formBadge, setFormBadge] = useState<string>("Hot Selling");
+  const [formSegment, setFormSegment] = useState<"hot" | "new" | "famous">("hot");
+  const [formImage, setFormImage] = useState<string>("");
+  const [formDescription, setFormDescription] = useState<string>("");
+
+  // Upload state
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploadLoading, setUploadLoading] = useState<boolean>(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Low stock products alert list
+  const [lowStockProducts, setLowStockProducts] = useState<ProductDocument[]>([]);
+
+  // Visitor Analytics State
+  const [visitorLogs, setVisitorLogs] = useState<VisitorRecord[]>([]);
+  const [visitorStatsLoading, setVisitorStatsLoading] = useState<boolean>(false);
+  const [activeAdminTab, setActiveAdminTab] = useState<"products" | "visitors">("products");
+
+  // Notification Toast log
+  const [logMessage, setLogMessage] = useState<{ text: string; type: "success" | "error" | "info" } | null>(null);
+
+  // Synchronize visitor analytics list when admin is authenticated
+  useEffect(() => {
+    if (currentUser) {
+      fetchVisitorAnalytics();
+    } else {
+      setVisitorLogs([]);
+    }
+  }, [currentUser]);
+
+  const fetchVisitorAnalytics = async () => {
+    setVisitorStatsLoading(true);
+    try {
+      const logs = await getVisitorLogs();
+      setVisitorLogs(logs);
+    } catch (err) {
+      console.error("Failed to load visitor logs:", err);
+    } finally {
+      setVisitorStatsLoading(false);
+    }
+  };
+
+  // Trigger custom state snapshots and online listener hooks
+  useEffect(() => {
+    // 1. Real-time online checker
+    const removeNetworkListener = registerNetworkStateListener((online) => {
+      setIsOnline(online);
+      triggerToast(online ? "System online. Real-time databases synced." : "Workspace offline. Some writes may be queued.", online ? "success" : "error");
+    });
+
+    // 2. Auth listener
+    const removeAuthListener = checkAuthState((user) => {
+      setCurrentUser(user);
+    });
+
+    // 3. Real-time Snapshot listeners
+    const removeSnapshotListener = onProductsSnapshot((snapshotList) => {
+      const mapped = snapshotList.map(p => ({
+        id: p.id,
+        name: p.name,
+        brand: p.brand,
+        size: p.size,
+        feature: p.feature,
+        price: p.price,
+        badge: p.badge || (p.category === "hot-selling" ? "Hot Selling" : p.category === "new-brands" ? "New Arrival" : "Famous"),
+        segment: p.segment || (p.category === "hot-selling" ? "hot" : p.category === "new-brands" ? "new" : "famous"),
+        image: p.image || p.imageUrl,
+        stock: p.stock || 0,
+        description: p.description || ""
+      }));
+      setProducts(mapped);
+      setLoading(false);
+      
+      // Update low stock list
+      getLowStockProducts(5).then(lows => setLowStockProducts(lows)).catch(err => console.log(err));
+    });
+
+    return () => {
+      removeNetworkListener();
+      removeAuthListener();
+      removeSnapshotListener();
+    };
+  }, []);
+
+  const triggerToast = (text: string, type: "success" | "error" | "info" = "success") => {
+    setLogMessage({ text, type });
+    setTimeout(() => setLogMessage(null), 4000);
+  };
+
+  // Login handler
+  const handleAuthSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!authEmail || !authPassword) {
+      triggerToast("Please supply email and password", "error");
+      return;
+    }
+    setAuthLoading(true);
+    try {
+      if (isRegisterMode) {
+        await createAdminUser(authEmail, authPassword);
+        triggerToast("Admin created and authenticated successfully!", "success");
+      } else {
+        await loginAdmin(authEmail, authPassword);
+        triggerToast("Authenticated successfully as Administrator!", "success");
+      }
+      setAuthEmail("");
+      setAuthPassword("");
+    } catch (err: any) {
+      triggerToast(err.message || "Authentication attempt rejected.", "error");
+    } finally {
+      setAuthLoading(false);
+    }
+  };
+
+  const handleSignOut = async () => {
+    try {
+      await logoutAdmin();
+      triggerToast("Signed out successfully.", "info");
+    } catch (err) {
+      triggerToast("Signout failed.", "error");
+    }
+  };
+
+  // Pre-fill edit form
+  const handleEditClick = (prod: any) => {
+    setEditingProduct(prod);
+    setFormId(prod.id);
+    setFormName(prod.name);
+    setFormBrand(prod.brand);
+    setFormSize(prod.size);
+    setFormFeature(prod.feature);
+    setFormPrice(prod.price);
+    setFormStock(prod.stock || 10);
+    setFormBadge(prod.badge);
+    setFormSegment(prod.segment);
+    setFormImage(prod.image);
+    setFormDescription(prod.description);
+    setShowAddForm(true); // Open the form drawer
+    window.scrollTo({ top: 120, behavior: "smooth" });
+  };
+
+  // Reset/Clear Form Fields
+  const clearForm = () => {
+    setEditingProduct(null);
+    setFormId("");
+    setFormName("");
+    setFormBrand("");
+    setFormSize("");
+    setFormFeature("");
+    setFormPrice(15000);
+    setFormStock(10);
+    setFormBadge("New Arrival");
+    setFormSegment("new");
+    setFormImage("");
+    setFormDescription("");
+    setSelectedFile(null);
+  };
+
+  // Handle storage file uploads
+  const handleFileUploadChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setSelectedFile(e.target.files[0]);
+    }
+  };
+
+  // Trigger storage upload
+  const handleImageUploadToStorage = async () => {
+    if (!selectedFile) {
+      triggerToast("Please select a file to upload first.", "info");
+      return;
+    }
+    if (!formName) {
+      triggerToast("Please define the Tyre Name first to tag your image correctly.", "info");
+      return;
+    }
+    setUploadLoading(true);
+    try {
+      const responseUrl = await uploadProductImage(selectedFile, formName);
+      setFormImage(responseUrl);
+      triggerToast("Image asset uploaded to Storage bucket successfully!", "success");
+      setSelectedFile(null);
+    } catch (err: any) {
+      triggerToast(err.message || "Failed to upload image. Writes are restricted.", "error");
+    } finally {
+      setUploadLoading(false);
+    }
+  };
+
+  // Create / Save Handler (triggers Firebase writing)
+  const handleSaveProduct = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!formName || !formBrand || !formSize || !formPrice) {
+      triggerToast("Please fill in all mandatory inputs.", "error");
+      return;
+    }
+
+    if (!currentUser) {
+      triggerToast("Unauthorized operation. Please log in as Administrator first.", "error");
+      return;
+    }
+
+    const imgUrl = formImage.trim() || "https://images.unsplash.com/photo-1542282088-fe8426682b8f?auto=format&fit=crop&q=80&w=600";
+    const customId = formId || `custom-${Date.now()}`;
+
+    const parsedPrice = parseInt(String(formPrice), 10);
+    const parsedStock = parseInt(String(formStock), 10);
+    if (isNaN(parsedPrice) || parsedPrice <= 0) {
+      triggerToast("Price must be a valid positive integer.", "error");
+      return;
+    }
+
+    const categoryMapped = formSegment === "hot" ? "hot-selling" : formSegment === "new" ? "new-brands" : "famous";
+
+    const payload: TireProduct & { stock: number } = {
+      id: customId,
+      name: formName,
+      brand: formBrand,
+      size: formSize,
+      feature: formFeature,
+      price: parsedPrice,
+      badge: formBadge,
+      segment: formSegment,
+      image: imgUrl,
+      stock: parsedStock,
+      description: formDescription.trim() || `Premium high-durability tire configured specifically for the local roads of Lahore.`
+    };
+
+    try {
+      await saveTireProduct(payload);
+      triggerToast(
+        editingProduct 
+          ? `Successfully saved modifications for '${payload.name}'!` 
+          : `Successfully registered and seeded '${payload.name}' into the database!`,
+        "success"
+      );
+      clearForm();
+      setShowAddForm(false);
+      onRefreshProducts(); // Trigger app refetch
+    } catch (err: any) {
+      console.error(err);
+      triggerToast(`Operation rejected. Verify schema rules or Admin privileges.`, "error");
+    }
+  };
+
+  // Delete Handler
+  const handleDeleteClick = async (id: string, name: string) => {
+    if (!currentUser) {
+      triggerToast("Authentication required. Please log in to complete deletions.", "error");
+      return;
+    }
+    if (!window.confirm(`Are you absolutely sure you want to delete '${name}'?`)) {
+      return;
+    }
+
+    try {
+      await deleteTireProduct(id);
+      triggerToast(`Deleted '${name}' from Firestore!`, "info");
+      onRefreshProducts();
+    } catch (err) {
+      triggerToast("Restricted write. Confirm your role.", "error");
+    }
+  };
+
+  // Bulk rate updater
+  const handleBulkUpdate = async () => {
+    if (!currentUser) {
+      triggerToast("Admin authentication is required for bulk price variations.", "error");
+      return;
+    }
+    if (!window.confirm(`Are you sure you want to alter ALL inventory prices by ${bulkPercent}%?`)) {
+      return;
+    }
+    setBulkLoading(true);
+    try {
+      await bulkUpdatePrices(bulkPercent);
+      triggerToast(`Successfully adjusted all catalog rates in bulk by ${bulkPercent}%!`, "success");
+      onRefreshProducts();
+    } catch (err: any) {
+      triggerToast(err.message || "Bulk operation failed. Check rules permissions.", "error");
+    } finally {
+      setBulkLoading(false);
+    }
+  };
+
+  // JSON backup download
+  const handleExportJSON = async () => {
+    try {
+      await exportToJSON();
+      triggerToast("Product catalog downloaded successfully!", "success");
+    } catch (e) {
+      triggerToast("Export failed.", "error");
+    }
+  };
+
+  // JSON backup upload
+  const handleImportJSONChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!currentUser) {
+      triggerToast("Admin authentication is required to run database imports.", "error");
+      return;
+    }
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      if (!window.confirm(`This will import products from '${file.name}'. Duplicate profiles will be ignored. Proceed?`)) {
+        return;
+      }
+      try {
+        const outcomes = await importFromJSON(file);
+        triggerToast(`Import completed with success! Added: ${outcomes.imported} items, Ignored (Duplicates): ${outcomes.duplicates} items.`, "success");
+        onRefreshProducts();
+      } catch (err: any) {
+        triggerToast(err.message || "Failed to process database import file.", "error");
+      }
+    }
+  };
+
+  // Filter local inventory display list
+  const filteredProducts = products.filter((p) => {
+    const term = searchQuery.toLowerCase();
+    return (
+      p.name.toLowerCase().includes(term) ||
+      p.brand.toLowerCase().includes(term) ||
+      p.size.toLowerCase().includes(term) ||
+      p.segment.toLowerCase().includes(term)
+    );
+  });
+
+  return (
+    <div className="space-y-8">
+      {/* Toast Alert popup banner */}
+      {logMessage && (
+        <div className={`fixed bottom-6 right-6 z-55 max-w-sm rounded-2xl p-4 shadow-2xl border transition-all duration-300 flex items-center space-x-3 text-sm font-semibold animate-bounce ${
+          logMessage.type === "success" 
+            ? "bg-green-600 text-white border-green-500" 
+            : logMessage.type === "error" 
+            ? "bg-red-600 text-white border-red-500" 
+            : "bg-blue-600 text-white border-blue-500"
+        }`}>
+          <span>{logMessage.type === "success" ? "✔" : "ℹ"}</span>
+          <p className="flex-1">{logMessage.text}</p>
+        </div>
+      )}
+
+      {/* Connection Checker & Admin Identity Banner */}
+      <div className={`p-4 rounded-2xl border flex flex-col sm:flex-row items-center justify-between gap-4 font-mono text-xs ${
+        darkMode ? "bg-white/5 border-white/10" : "bg-white border-slate-200"
+      }`}>
+        <div className="flex items-center space-x-2">
+          {isOnline ? (
+            <span className="flex items-center space-x-1.5 text-emerald-500">
+              <Wifi className="w-4 h-4" />
+              <span className="font-bold">SYSTEM ONLINE (bahaduralimunnabhai@gmail.com)</span>
+            </span>
+          ) : (
+            <span className="flex items-center space-x-1.5 text-rose-500">
+              <WifiOff className="w-4 h-4 animate-pulse" />
+              <span className="font-bold">SYSTEM OFFLINE (LOCAL CACHE SHIELDS ACTIVE)</span>
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center space-x-3">
+          {currentUser ? (
+            <div className="flex items-center space-x-2">
+              <span className="text-emerald-400 font-semibold truncate max-w-xs">
+                👤 Admin: {currentUser.email}
+              </span>
+              <button
+                onClick={handleSignOut}
+                className="bg-red-500/10 hover:bg-red-500/20 text-red-400 p-1.5 px-3 rounded-lg border border-red-500/20 flex items-center space-x-1 transition-all"
+              >
+                <LogOut className="w-3.5 h-3.5" />
+                <span>Logout</span>
+              </button>
+            </div>
+          ) : (
+            <span className="text-amber-500 font-semibold flex items-center space-x-1">
+              <Lock className="w-3.5 h-3.5" />
+              <span>Role: Unauthenticated Client (Sign in below to write to DB)</span>
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Admin Credentials Login Form Panel (when not logged in) */}
+      {!currentUser && (
+        <form
+          onSubmit={handleAuthSubmit}
+          className={`p-6 rounded-3xl border ${
+            darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200 shadow-sm"
+          }`}
+          id="admin-login-form"
+        >
+          <div className="flex items-center space-x-2 mb-4">
+            <Lock className="w-5 h-5 text-brand-orange" />
+            <h3 className="font-display font-bold text-base">
+              {isRegisterMode ? "Create New Security Admin Account" : "Registered Administrator Authentication"}
+            </h3>
+          </div>
+          <p className="text-xs text-slate-400 mb-4 leading-relaxed">
+            By default, Firestore security rules block unauthorized browser requests. Use this panel to sign in with an administrator email and password, or quickly register a credentials profile below!
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className="text-[10px] uppercase font-mono tracking-wider block mb-1">Email Username</label>
+              <input
+                type="email"
+                required
+                placeholder="e.g. admin@haiderbrothers.com"
+                value={authEmail}
+                onChange={(e) => setAuthEmail(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:outline-none focus:ring-1 focus:ring-brand-orange ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-slate-50 border-slate-200"
+                }`}
+                id="admin-email-field"
+              />
+            </div>
+
+            <div>
+              <label className="text-[10px] uppercase font-mono tracking-wider block mb-1">Secure Password</label>
+              <input
+                type="password"
+                required
+                placeholder="••••••••"
+                value={authPassword}
+                onChange={(e) => setAuthPassword(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:outline-none focus:ring-1 focus:ring-brand-orange ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-slate-50 border-slate-200"
+                }`}
+                id="admin-password-field"
+              />
+            </div>
+          </div>
+
+          <div className="mt-4 flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3">
+            <button
+              type="button"
+              onClick={() => setIsRegisterMode(!isRegisterMode)}
+              className="text-xs text-brand-orange hover:underline self-start text-left"
+            >
+              {isRegisterMode ? "Already have an account? Sign in here" : "Don't have an admin credential? Register one instantly"}
+            </button>
+
+            <button
+              type="submit"
+              disabled={authLoading}
+              className="bg-brand-orange hover:bg-brand-orange-dark text-white font-bold p-2.5 px-6 rounded-xl text-xs flex items-center justify-center space-x-1.5 shadow-md shadow-brand-orange/20"
+              id="admin-auth-btn"
+            >
+              {authLoading ? (
+                <RefreshCw className="w-3.5 h-3.5 animate-spin" />
+              ) : (
+                <User className="w-3.5 h-3.5" />
+              )}
+              <span>{isRegisterMode ? "Create Admin Credentials" : "Authorize Session"}</span>
+            </button>
+          </div>
+        </form>
+      )}
+
+      {/* KPI stats display */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        <div className={`p-5 rounded-2xl border flex items-center space-x-4 transition-all ${
+          darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/60 shadow-xs"
+        }`}>
+          <div className="p-3 bg-brand-orange/10 rounded-xl text-brand-orange font-bold text-lg">
+            <Database className="w-5 h-5" />
+          </div>
+          <div>
+            <span className={`text-[10px] font-mono block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              FIRESTORE PRODUCTS COUNT
+            </span>
+            <span className="text-xl sm:text-2xl font-display font-black text-brand-orange leading-none">
+              {products.length} Items
+            </span>
+          </div>
+        </div>
+
+        <div className={`p-5 rounded-2xl border flex items-center space-x-4 transition-all ${
+          darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/60 shadow-xs"
+        }`}>
+          <div className="p-3 bg-green-500/10 rounded-xl text-green-500 font-bold text-lg">
+            <Tag className="w-5 h-5" />
+          </div>
+          <div>
+            <span className={`text-[10px] font-mono block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              AVERAGE WHOLESALE RATE
+            </span>
+            <span className="text-xl sm:text-2xl font-display font-black text-green-500 leading-none">
+              PKR {Math.round(products.reduce((acc, current) => acc + current.price, 0) / (products.length || 1)).toLocaleString()}
+            </span>
+          </div>
+        </div>
+
+        <div className={`p-5 rounded-2xl border flex items-center space-x-4 transition-all ${
+          darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/60 shadow-xs"
+        }`}>
+          <div className="p-3 bg-indigo-500/10 rounded-xl text-indigo-500 font-bold text-lg">
+            <AlertTriangle className="w-5 h-5" />
+          </div>
+          <div>
+            <span className={`text-[10px] font-mono block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              CRITICAL RESTOCK LOG (STOCK &lt; 5)
+            </span>
+            <span className="text-xl sm:text-2xl font-display font-black text-indigo-500 leading-none">
+              {lowStockProducts.length} Items Alerted
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Bulk editing & backup portability deck (visible when logged in) */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Module A: Bulk Adjustments */}
+        <div className={`p-5 rounded-3xl border flex flex-col justify-between ${
+          darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200 shadow-sm"
+        }`}>
+          <div>
+            <h4 className="font-display font-bold text-sm tracking-tight flex items-center space-x-1">
+              <Tag className="w-4 h-4 text-emerald-500" />
+              <span>Bulk Margin Adjustment Command</span>
+            </h4>
+            <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+              Instantly increment or decrement ALL prices of tires stored in your Firestore database using a single batch payload.
+            </p>
+
+            <div className="mt-4 space-y-3">
+              <label className="text-[10px] font-mono text-slate-400 block">
+                Adjust Rate (Percentage % Value): <span className="text-brand-orange font-bold font-sans text-sm">{bulkPercent > 0 ? `+${bulkPercent}` : bulkPercent}%</span>
+              </label>
+              <div className="flex items-center space-x-3">
+                <span className="text-[10px] text-slate-500 font-mono">-50%</span>
+                <input
+                  type="range"
+                  min="-50"
+                  max="50"
+                  step="5"
+                  value={bulkPercent}
+                  onChange={(e) => setBulkPercent(parseInt(e.target.value, 10))}
+                  className="w-full accent-brand-orange bg-slate-200 dark:bg-neutral-800 rounded-lg"
+                />
+                <span className="text-[10px] text-slate-500 font-mono">+50%</span>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-6">
+            <button
+              onClick={handleBulkUpdate}
+              disabled={bulkLoading || !currentUser}
+              className={`w-full p-2.5 rounded-xl text-xs font-bold font-sans transition-all flex items-center justify-center space-x-1.5 ${
+                currentUser 
+                  ? "bg-[#10b981] text-white hover:bg-emerald-600 shadow-md shadow-emerald-500/10" 
+                  : "bg-slate-300 dark:bg-neutral-800 text-slate-500 cursor-not-allowed"
+              }`}
+            >
+              {bulkLoading ? (
+                <RefreshCw className="w-4 h-4 animate-spin" />
+              ) : (
+                <Wrench className="w-4 h-4" />
+              )}
+              <span>{currentUser ? `Apply ${bulkPercent}% Price Adjustment` : "Login to enable bulk command"}</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Module B: JSON Data Portability (Export & Import) */}
+        <div className={`p-5 rounded-3xl border flex flex-col justify-between ${
+          darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200 shadow-sm"
+        }`}>
+          <div>
+            <h4 className="font-display font-bold text-sm tracking-tight flex items-center space-x-1">
+              <FileSpreadsheet className="w-4 h-4 text-indigo-500" />
+              <span>Firebase Backup Data Portability</span>
+            </h4>
+            <p className="text-xs text-slate-400 mt-1 leading-relaxed">
+              Download your complete inventory collection as a standard JSON file, or restore assets from backups with automatic duplicate detection.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3 mt-6">
+            {/* Export */}
+            <button
+              onClick={handleExportJSON}
+              className={`p-3 rounded-xl border text-xs font-bold transition-all flex items-center justify-center space-x-1.5 ${
+                darkMode 
+                  ? "border-indigo-500/20 bg-indigo-500/10 text-indigo-400 hover:bg-indigo-500/20" 
+                  : "border-indigo-200 bg-indigo-50 text-indigo-800 hover:bg-indigo-100"
+              }`}
+            >
+              <Download className="w-4 h-4" />
+              <span>Export Backup</span>
+            </button>
+
+            {/* Import file mask */}
+            <div className="relative">
+              <input
+                type="file"
+                accept=".json"
+                disabled={!currentUser}
+                onChange={handleImportJSONChange}
+                className="absolute inset-0 opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                id="file-import-input"
+              />
+              <span className={`w-full p-3 rounded-xl border text-xs font-bold transition-all flex items-center justify-center space-x-1.5 ${
+                currentUser 
+                  ? darkMode
+                    ? "border-violet-500/20 bg-violet-500/10 text-violet-400 hover:bg-violet-500/20" 
+                    : "border-violet-200 bg-violet-50 text-violet-800 hover:bg-violet-100"
+                  : "border-slate-300 dark:border-neutral-800 bg-slate-300/10 dark:bg-neutral-800/25 text-slate-500 cursor-not-allowed"
+              }`}>
+                <Upload className="w-4 h-4" />
+                <span>Upload JSON</span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Button controls */}
+      <div className="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center">
+        <div className="flex items-center gap-2">
+          {currentUser && (
+            <button
+              onClick={() => { clearForm(); setShowAddForm(!showAddForm); }}
+              className="bg-brand-orange hover:bg-brand-orange-dark text-white font-bold px-4 py-2.5 rounded-xl text-xs flex items-center gap-1.5 transition-all shadow-md shadow-brand-orange/20"
+              id="admin-new-tyre-btn"
+            >
+              {showAddForm ? <X className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
+              <span>{showAddForm ? "Close Form Panel" : "Add New Tyre"}</span>
+            </button>
+          )}
+
+          <button
+            onClick={() => onRefreshProducts()}
+            className={`p-2.5 rounded-xl border flex items-center gap-1 text-xs transition-all ${
+              darkMode ? "border-white/10 hover:bg-white/5 text-slate-300" : "border-slate-200 hover:bg-slate-50 text-slate-700"
+            }`}
+            title="Refresh list"
+            id="admin-sync-btn"
+          >
+            <RefreshCw className="w-3.5 h-3.5" />
+            <span>Sync DB</span>
+          </button>
+        </div>
+
+        {/* Display badge for low stock warning items */}
+        {lowStockProducts.length > 0 && (
+          <div className="bg-amber-500/10 border border-amber-500/20 text-amber-500 py-2.5 px-3.5 rounded-xl text-xs font-semibold flex items-center space-x-1.5">
+            <AlertTriangle className="w-4.5 h-4.5 animate-pulse" />
+            <span>Stock alerts: {lowStockProducts.length} items cataloged under 5 units!</span>
+          </div>
+        )}
+      </div>
+
+      {/* Add / Edit Form Panel */}
+      {showAddForm && currentUser && (
+        <form 
+          onSubmit={handleSaveProduct}
+          className={`p-6 sm:p-8 rounded-2xl border transition-all ${
+            darkMode ? "glassmorphism box-glow" : "glassmorphism-light shadow-xl"
+          }`}
+          id="tire-product-form"
+        >
+          <div className="flex items-center justify-between pb-4 border-b border-black/5 dark:border-white/5 mb-6">
+            <h4 className="font-display font-bold text-md flex items-center gap-2">
+              <Sparkles className="w-5 h-5 text-brand-orange" />
+              <span>{editingProduct ? `Edit Tyre Configuration: ${editingProduct.name}` : "Create New Tyre Product"}</span>
+            </h4>
+            <button
+              type="button"
+              onClick={clearForm}
+              className={`text-xs ${darkMode ? "text-slate-400 hover:text-white" : "text-slate-600 hover:text-black"}`}
+            >
+              Clear Values
+            </button>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Tyre Name */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Tyre Name (Model) *</label>
+              <input
+                type="text"
+                required
+                placeholder="e.g. Pilot Sport 5"
+                value={formName}
+                onChange={(e) => setFormName(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Brand */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Brand (Manufacturer) *</label>
+              <input
+                type="text"
+                required
+                placeholder="e.g. Michelin"
+                value={formBrand}
+                onChange={(e) => setFormBrand(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Size */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Tyre Size Code *</label>
+              <input
+                type="text"
+                required
+                placeholder="e.g. 205/55R16"
+                value={formSize}
+                onChange={(e) => setFormSize(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Feature Highlight */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Highlight Feature *</label>
+              <input
+                type="text"
+                required
+                placeholder="e.g. Comfort ride and wet braking compound"
+                value={formFeature}
+                onChange={(e) => setFormFeature(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Price (PKR) */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Price (PKR Rate) *</label>
+              <input
+                type="number"
+                required
+                min={1}
+                placeholder="e.g. 15000"
+                value={formPrice}
+                onChange={(e) => setFormPrice(parseInt(e.target.value, 10) || 15000)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Segment Type */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Segment Category *</label>
+              <select
+                required
+                value={formSegment}
+                onChange={(e) => {
+                  setFormSegment(e.target.value as any);
+                  if (e.target.value === "hot") setFormBadge("Hot Selling");
+                  else if (e.target.value === "new") setFormBadge("New Arrival");
+                  else setFormBadge("Famous");
+                }}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              >
+                <option value="hot">Hot Selling</option>
+                <option value="new">New Arrival</option>
+                <option value="famous">Famous Bestseller</option>
+              </select>
+            </div>
+
+            {/* Stock Levels */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Showroom Stock Units *</label>
+              <input
+                type="number"
+                required
+                min={0}
+                placeholder="e.g. 10"
+                value={formStock}
+                onChange={(e) => setFormStock(parseInt(e.target.value, 10) || 0)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Image path */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Image Address URL</label>
+              <input
+                type="text"
+                placeholder="Leave blank to upload file instead"
+                value={formImage}
+                onChange={(e) => setFormImage(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Firebase Storage Image Upload module */}
+            <div>
+              <label className="text-xs font-mono font-semibold block mb-1">Upload To Storage Bucket</label>
+              <div className="flex items-center space-x-1">
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleFileUploadChange}
+                  ref={fileInputRef}
+                  className="hidden"
+                />
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  className={`flex-1 p-2.5 rounded-xl text-[10px] font-bold border flex items-center justify-center space-x-1 ${
+                    darkMode ? "border-white/10 bg-white/5 text-slate-300" : "border-slate-200 bg-slate-50 text-slate-700"
+                  }`}
+                >
+                  <ImageIcon className="w-3.5 h-3.5 text-brand-orange" />
+                  <span className="truncate">{selectedFile ? selectedFile.name : "Select Asset"}</span>
+                </button>
+                {selectedFile && (
+                  <button
+                    type="button"
+                    onClick={handleImageUploadToStorage}
+                    disabled={uploadLoading}
+                    className="p-2.5 bg-brand-orange text-white text-[10px] font-bold rounded-xl flex items-center space-x-0.5"
+                  >
+                    {uploadLoading ? <RefreshCw className="w-3 h-3 animate-spin" /> : <Upload className="w-3 h-3" />}
+                    <span>Upload</span>
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {/* Display Badge */}
+            <div>
+              <label className="text-xs font-mono block mb-1">Display Flag Badge</label>
+              <input
+                type="text"
+                value={formBadge}
+                onChange={(e) => setFormBadge(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+
+            {/* Detailed Description */}
+            <div className="md:col-span-2">
+              <label className="text-xs font-mono font-semibold block mb-1">Detailed Commercial Description</label>
+              <textarea
+                rows={2}
+                placeholder="Provide details about speed rating, mileage targets, and wet grip attributes..."
+                value={formDescription}
+                onChange={(e) => setFormDescription(e.target.value)}
+                className={`w-full p-2.5 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/35 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+              />
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end space-x-2">
+            <button
+              type="button"
+              onClick={() => { clearForm(); setShowAddForm(false); }}
+              className={`px-4 py-2 rounded-xl text-xs font-semibold ${
+                darkMode ? "bg-white/5 hover:bg-white/10 text-slate-300" : "bg-slate-100 hover:bg-slate-200 text-slate-700"
+              }`}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="bg-brand-orange hover:bg-brand-orange-dark text-white font-bold px-5 py-2 rounded-xl text-xs flex items-center space-x-1 shadow-md shadow-brand-orange/25"
+            >
+              <Save className="w-3.5 h-3.5" />
+              <span>{editingProduct ? "Save Modifications" : "SeedTest/Publish to Firestore"}</span>
+            </button>
+          </div>
+        </form>
+      )}
+
+      {/* Admin Feature Tabs */}
+      {currentUser && (
+        <div className="flex border-b border-black/5 dark:border-white/10 pb-0.5 space-x-6">
+          <button
+            type="button"
+            onClick={() => setActiveAdminTab("products")}
+            className={`pb-3 text-sm font-bold font-display relative transition-all flex items-center space-x-2 ${
+              activeAdminTab === "products" 
+                ? "text-brand-orange" 
+                : "text-slate-400 hover:text-slate-300"
+            }`}
+          >
+            <span>Tire Store Catalog</span>
+            {activeAdminTab === "products" && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-orange rounded-full" />
+            )}
+          </button>
+          <button
+            type="button"
+            onClick={() => setActiveAdminTab("visitors")}
+            className={`pb-3 text-sm font-bold font-display relative transition-all flex items-center space-x-2 ${
+              activeAdminTab === "visitors" 
+                ? "text-brand-orange" 
+                : "text-slate-400 hover:text-slate-300"
+            }`}
+          >
+            <span className="flex items-center space-x-1.5">
+              <span>Visitor Traffic Analytics</span>
+              <span className="text-[10px] bg-brand-orange/15 text-brand-orange px-2 py-0.5 rounded-full font-mono">
+                {visitorLogs.length} Logs
+              </span>
+            </span>
+            {activeAdminTab === "visitors" && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-brand-orange rounded-full" />
+            )}
+          </button>
+        </div>
+      )}
+
+      {activeAdminTab === "products" ? (
+        /* Main Inventory Listings Search table panel */
+        <div className={`rounded-2xl border overflow-hidden ${
+          darkMode ? "bg-black/20 border-white/10" : "bg-white border-slate-200/80 shadow-xs"
+        }`}>
+          {/* Search header info */}
+          <div className="p-4 border-b border-black/5 dark:border-white/5 flex flex-col md:flex-row gap-3 justify-between items-stretch md:items-center">
+            <h5 className="font-display font-medium text-sm">
+              Live Tire Catalog List ({filteredProducts.length} entries shown)
+            </h5>
+
+            <div className="relative max-w-sm w-full">
+              <input
+                type="text"
+                placeholder="Search by brand, model, size..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className={`w-full p-2 pl-9 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/30 border-white/10 text-white" : "bg-slate-50 border-slate-200 text-slate-800"
+                }`}
+                id="inventory-search-input"
+              />
+              <Search className="w-4 h-4 text-slate-400 absolute left-3 top-1/2 -translate-y-1/2" />
+            </div>
+          </div>
+
+          {/* Loading Indicator */}
+          {loading ? (
+            <div className="p-12 text-center">
+              <RefreshCw className="w-8 h-8 text-brand-orange animate-spin mx-auto mb-2" />
+              <p className="text-xs text-slate-400">Loading catalog indexing records...</p>
+            </div>
+          ) : filteredProducts.length > 0 ? (
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-xs">
+                <thead className={`font-mono text-[10px] uppercase font-bold text-slate-500 border-b ${
+                  darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100"
+                }`}>
+                  <tr>
+                    <th className="p-3">Tyre (Make/Model)</th>
+                    <th className="p-3">Brand</th>
+                    <th className="p-3">Size Code</th>
+                    <th className="p-3">Wholesale Price</th>
+                    <th className="p-3">Stock level</th>
+                    <th className="p-3">Segment Highlight</th>
+                    {currentUser && <th className="p-3 text-right">Actions</th>}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-black/5 dark:divide-white/5">
+                  {filteredProducts.map((p: any) => (
+                    <tr key={p.id} className={`hover:bg-brand-orange/5 transition-colors`}>
+                      <td className="p-3 font-semibold text-brand-orange flex items-center gap-2">
+                        <div className="w-6 h-6 rounded bg-slate-500/10 overflow-hidden shrink-0">
+                          <img src={p.image} className="w-full h-full object-cover" alt="" />
+                        </div>
+                        <span>{p.name}</span>
+                      </td>
+                      <td className="p-3 text-slate-400 dark:text-slate-300">{p.brand}</td>
+                      <td className="p-3 font-mono font-medium">{p.size}</td>
+                      <td className="p-3 font-bold text-green-500">PKR {p.price.toLocaleString()}</td>
+                      <td className="p-3 font-mono">
+                        <span className={`p-1 px-2.5 rounded-full text-[10px] font-bold truncate ${
+                          (p.stock || 0) < 5 
+                            ? "bg-rose-500/15 text-rose-500 border border-rose-500/10 animate-pulse" 
+                            : "bg-emerald-500/15 text-emerald-500 border border-emerald-500/10"
+                        }`}>
+                          {p.stock !== undefined ? `${p.stock} Units` : "10 Units"}
+                        </span>
+                      </td>
+                      <td className="p-3 uppercase font-mono text-[10px] tracking-wider text-slate-400">
+                        <span className="bg-slate-500/10 px-2 py-0.5 rounded-md">
+                          {p.segment}
+                        </span>
+                      </td>
+                      {currentUser && (
+                        <td className="p-3 text-right space-x-1">
+                          <button
+                            type="button"
+                            onClick={() => handleEditClick(p)}
+                            className={`p-1.5 rounded-lg text-blue-500 hover:bg-blue-500/10`}
+                            title="Edit product"
+                          >
+                            <Edit className="w-4 h-4" />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => handleDeleteClick(p.id, p.name)}
+                            className={`p-1.5 rounded-lg text-red-500 hover:bg-red-500/10`}
+                            title="Delete product"
+                          >
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      )}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          ) : (
+            <div className="p-10 text-center text-slate-400">
+              <span className="text-2xl block mb-2">🎈</span>
+              <p className="text-xs">No matching tyre configurations found in database.</p>
+            </div>
+          )}
+        </div>
+      ) : (
+        /* Visitor Traffic Analytics Panel */
+        <div className="space-y-6">
+          {/* Analytics KPI grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+            <div className={`p-4 rounded-2xl border ${darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[10px] font-mono uppercase text-slate-400 font-bold">Total Page Views</span>
+                <Eye className="w-4 h-4 text-brand-orange" />
+              </div>
+              <div className="text-2xl font-black font-display text-brand-orange">{visitorLogs.length} Views</div>
+              <p className="text-[10px] text-slate-400 mt-1">Cumulative page navigation hits logged</p>
+            </div>
+
+            <div className={`p-4 rounded-2xl border ${darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[10px] font-mono uppercase text-slate-400 font-bold">Unique Visitors</span>
+                <Users className="w-4 h-4 text-emerald-500" />
+              </div>
+              <div className="text-2xl font-black font-display text-emerald-500">
+                {new Set(visitorLogs.map(l => l.sessionId)).size} Sessions
+              </div>
+              <p className="text-[10px] text-slate-400 mt-1">Total singular client cookie sessions</p>
+            </div>
+
+            <div className={`p-4 rounded-2xl border ${darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[10px] font-mono uppercase text-slate-400 font-bold">Primary Live Hub</span>
+                <Globe className="w-4 h-4 text-indigo-500" />
+              </div>
+              <div className="text-sm font-black font-display text-indigo-400 truncate uppercase mt-1">
+                {(() => {
+                  const counts: Record<string, number> = {};
+                  visitorLogs.forEach(l => { counts[l.pagePath] = (counts[l.pagePath] || 0) + 1; });
+                  const top = Object.entries(counts).sort((a,b) => b[1]-a[1])[0];
+                  return top ? `${top[0]} (${top[1]} views)` : "N/A";
+                })()}
+              </div>
+              <p className="text-[10px] text-slate-400 mt-1">Section driving maximum user count</p>
+            </div>
+
+            <div className={`p-4 rounded-2xl border ${darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-[10px] font-mono uppercase text-slate-400 font-bold">Dominant OS Client</span>
+                <Monitor className="w-4 h-4 text-purple-500" />
+              </div>
+              <div className="text-2xl font-black font-display text-purple-400">
+                {(() => {
+                  const counts: Record<string, number> = {};
+                  visitorLogs.forEach(l => { counts[l.platform] = (counts[l.platform] || 0) + 1; });
+                  const top = Object.entries(counts).sort((a,b) => b[1]-a[1])[0];
+                  return top ? top[0] : "Web Portal";
+                })()}
+              </div>
+              <p className="text-[10px] text-slate-400 mt-1">Identified operating system signature</p>
+            </div>
+          </div>
+
+          {/* Graphics layout columns */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {/* Section visits bar breakdown */}
+            <div className={`p-5 rounded-2xl border ${darkMode ? "bg-black/25 border-white/10" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <h6 className="font-display font-medium text-xs mb-4 uppercase tracking-wider text-slate-400">Section Hits Proportion</h6>
+              <div className="space-y-3.5">
+                {(() => {
+                  const counts: Record<string, number> = {};
+                  visitorLogs.forEach(l => { counts[l.pagePath] = (counts[l.pagePath] || 0) + 1; });
+                  const items = Object.entries(counts).sort((a,b)=>b[1]-a[1]);
+                  const total = visitorLogs.length || 1;
+                  return items.slice(0, 5).map(([page, count]) => {
+                    const pct = Math.round((count / total) * 100);
+                    return (
+                      <div key={page} className="space-y-1">
+                        <div className="flex justify-between text-[11px] font-mono">
+                          <span className="text-slate-300 font-semibold uppercase">{page}</span>
+                          <span className="text-slate-400">{count} views ({pct}%)</span>
+                        </div>
+                        <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
+                          <div className="h-full bg-brand-orange" style={{ width: `${pct}%` }} />
+                        </div>
+                      </div>
+                    );
+                  });
+                })()}
+                {visitorLogs.length === 0 && <p className="text-xs text-slate-500 text-center py-4">No page flow patterns registered yet.</p>}
+              </div>
+            </div>
+
+            {/* Operating systems bar breakdown */}
+            <div className={`p-5 rounded-2xl border ${darkMode ? "bg-black/25 border-white/10" : "bg-white border-slate-200/80 shadow-xs"}`}>
+              <h6 className="font-display font-medium text-xs mb-4 uppercase tracking-wider text-slate-400">System Platforms Split</h6>
+              <div className="space-y-3.5">
+                {(() => {
+                  const counts: Record<string, number> = {};
+                  visitorLogs.forEach(l => { counts[l.platform] = (counts[l.platform] || 0) + 1; });
+                  const items = Object.entries(counts).sort((a,b)=>b[1]-a[1]);
+                  const total = visitorLogs.length || 1;
+                  return items.slice(0, 5).map(([plat, count]) => {
+                    const pct = Math.round((count / total) * 100);
+                    return (
+                      <div key={plat} className="space-y-1">
+                        <div className="flex justify-between text-[11px] font-mono">
+                          <span className="text-slate-300 font-semibold">{plat}</span>
+                          <span className="text-slate-400">{count} hits ({pct}%)</span>
+                        </div>
+                        <div className="h-1.5 w-full bg-slate-800 rounded-full overflow-hidden">
+                          <div className="h-full bg-emerald-500" style={{ width: `${pct}%` }} />
+                        </div>
+                      </div>
+                    );
+                  });
+                })()}
+                {visitorLogs.length === 0 && <p className="text-xs text-slate-500 text-center py-4">Device platform stream is currently empty.</p>}
+              </div>
+            </div>
+          </div>
+
+          {/* Sequential Live Visitory Logs stream table */}
+          <div className={`rounded-2xl border overflow-hidden ${darkMode ? "bg-black/20 border-white/10" : "bg-white border-slate-200/80 shadow-xs"}`}>
+            <div className="p-4 border-b border-black/5 dark:border-white/5 flex justify-between items-center bg-black/10">
+              <h6 className="font-display font-medium text-xs uppercase tracking-wider text-slate-400">Visitation Sequence Logs</h6>
+              <button
+                type="button"
+                onClick={fetchVisitorAnalytics}
+                className="text-xs font-semibold text-brand-orange hover:underline flex items-center space-x-1"
+              >
+                <RefreshCw className="w-3.5 h-3.5" />
+                <span>Refresh Live Traffic</span>
+              </button>
+            </div>
+
+            {visitorStatsLoading ? (
+              <div className="p-12 text-center">
+                <RefreshCw className="w-8 h-8 text-brand-orange animate-spin mx-auto mb-2" />
+                <p className="text-xs text-slate-400">Querying analytical traffic logs from cloud...</p>
+              </div>
+            ) : visitorLogs.length > 0 ? (
+              <div className="overflow-x-auto max-h-[380px] overflow-y-auto">
+                <table className="w-full text-left text-xs">
+                  <thead className={`font-mono text-[10px] uppercase font-bold text-slate-500 border-b ${
+                    darkMode ? "bg-neutral-900 border-white/5" : "bg-slate-50 border-slate-100"
+                  }`}>
+                    <tr>
+                      <th className="p-3 pl-4">Timestamp (Asia/Karachi)</th>
+                      <th className="p-3">Session Hash</th>
+                      <th className="p-3">Device OS</th>
+                      <th className="p-3">Client Language</th>
+                      <th className="p-3">Section Section ID</th>
+                      <th className="p-3 pr-4 truncate max-w-xs">User Agent string</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-black/5 dark:divide-white/5 font-mono text-[11px]">
+                    {visitorLogs.map((log) => {
+                      const timeStr = log.timestamp
+                        ? new Date(log.timestamp.seconds * 1000).toLocaleString("en-PK", { timeZone: "Asia/Karachi" })
+                        : "Syncing timestamp...";
+                      return (
+                        <tr key={log.id} className="hover:bg-brand-orange/5 transition-colors text-slate-400 dark:text-slate-300">
+                          <td className="p-3 pl-4 font-bold text-slate-500">{timeStr}</td>
+                          <td className="p-3 font-semibold text-emerald-400">{log.sessionId.substring(4, 14)}...</td>
+                          <td className="p-3 font-sans">
+                            <span className="p-1 px-2 text-[10px] font-semibold bg-indigo-500/10 text-indigo-400 border border-indigo-500/5 rounded-md">
+                              {log.platform}
+                            </span>
+                          </td>
+                          <td className="p-3">{log.language}</td>
+                          <td className="p-3 font-bold text-brand-orange uppercase">{log.pagePath}</td>
+                          <td className="p-3 pr-4 truncate max-w-[200px] text-[10px] text-slate-500" title={log.userAgent}>
+                            {log.userAgent}
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            ) : (
+              <div className="p-12 text-center text-slate-400">
+                <p className="text-xs">No user navigation sessions registered in the Firebase storage logs yet.</p>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/LocationContact.tsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect } from "react";
+import { Phone, MapPin, Clock, MessageSquare, Compass, ClipboardCheck, Send, Sparkles } from "lucide-react";
+import { BUSINESS_INFO } from "../data";
+
+interface LocationContactProps {
+  darkMode: boolean;
+}
+
+export default function LocationContact({ darkMode }: LocationContactProps) {
+  const [lahoreTime, setLahoreTime] = useState("");
+  const [inquiryText, setInquiryText] = useState("");
+  const [inquirySuccess, setInquirySuccess] = useState(false);
+
+  useEffect(() => {
+    const updateTime = () => {
+      try {
+        const timeString = new Date().toLocaleTimeString("en-US", {
+          timeZone: "Asia/Karachi",
+          hour: "2-digit",
+          minute: "2-digit",
+          second: "2-digit",
+          hour12: true
+        });
+        setLahoreTime(timeString);
+      } catch (e) {
+        // Fallback if platform has minor timezone translation block
+        const now = new Date();
+        const localUTC = now.getTime() + now.getTimezoneOffset() * 60000;
+        const pktTime = new Date(localUTC + 3600000 * 5); // GMT+5
+        setLahoreTime(pktTime.toLocaleTimeString());
+      }
+    };
+    
+    updateTime();
+    const timer = setInterval(updateTime, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const handleInquirySubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inquiryText.trim()) return;
+
+    // Direct redirection to WhatsApp web chat prefilled with customer inquiry
+    const encoded = encodeURIComponent(`Hi Haider Brothers Traders, I am interested in: ${inquiryText}`);
+    window.open(`${BUSINESS_INFO.whatsappUrl}?text=${encoded}`, "_blank");
+    setInquirySuccess(true);
+    setInquiryText("");
+  };
+
+  return (
+    <section
+      id="contact"
+      className={`py-24 relative overflow-hidden transition-colors duration-300 ${
+        darkMode ? "bg-brand-dark text-white" : "bg-slate-50 text-slate-900"
+      }`}
+    >
+      {/* Visual lighting accents */}
+      <div className="absolute right-0 top-1/2 w-80 h-80 rounded-full bg-red-600/10 blur-[130px] pointer-events-none"></div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center max-w-2xl mx-auto mb-16">
+          <div className="inline-flex items-center space-x-2 bg-brand-orange/10 px-3.5 py-1.5 rounded-full text-brand-orange text-xs font-mono tracking-wider uppercase mb-3">
+            <MapPin className="w-3.5 h-3.5 animate-bounce" />
+            <span>Faisal Town Lahore Office</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-display font-extrabold tracking-tight">
+            Stop By Or Get Instant Support
+          </h2>
+          <p className={`text-sm mt-3 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+            Located at the trade center of Faisal Town block C1, Lahore. Ready to assist you 24/7 with professional tyre fitting, alignment tuning, or roadside emergency fixes.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch">
+          
+          {/* Left Column: Coordinates & Real Contact bento Cards (lg:col-span-5) */}
+          <div className="lg:col-span-5 flex flex-col justify-between gap-4">
+            
+            {/* Live Indicator Card */}
+            <div className={`p-6 rounded-3xl border transition-all duration-300 ${
+              darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+            }`}>
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] font-mono tracking-widest uppercase text-slate-500">Live Showroom Status</span>
+                <div className="flex items-center space-x-1.5 bg-green-500/10 px-2.5 py-1 rounded-full border border-green-500/20 text-green-500">
+                  <span className="w-2 h-2 rounded-full bg-green-500 animate-ping"></span>
+                  <span className="text-[10px] font-bold font-mono">24/7 OPEN NOW</span>
+                </div>
+              </div>
+              
+              <div className="mt-6 flex items-baseline space-x-2">
+                <span className="text-2xl sm:text-3xl font-mono font-extrabold tracking-tight text-brand-orange">
+                  {lahoreTime || "Loading..."}
+                </span>
+                <span className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>Lahore PKT Time</span>
+              </div>
+              <p className={`text-xs mt-3 leading-relaxed ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                Midnight puncture repair? Highway wheel balance issue? Our crews never sleep. Call first or drive in at any hour.
+              </p>
+            </div>
+
+            {/* Quick Connection Options Card */}
+            <div className={`p-6 rounded-3xl border ${
+              darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100 shadow-sm"
+            } space-y-4`}>
+              {/* Telephone */}
+              <a
+                href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                className={`p-4 rounded-2xl border flex items-center space-x-4 transition-all hover:scale-[1.01] ${
+                  darkMode
+                    ? "bg-black/20 border-white/5 hover:border-brand-orange/40 hover:bg-black/40"
+                    : "bg-white border-slate-200/60 hover:border-brand-orange/40"
+                }`}
+                id="contact-phone-link"
+              >
+                <div className="w-10 h-10 rounded-xl bg-orange-600/10 text-brand-orange flex items-center justify-center shrink-0">
+                  <Phone className="w-5 h-5" />
+                </div>
+                <div>
+                  <span className={`text-[9px] font-mono uppercase block ${darkMode ? "text-slate-500" : "text-slate-400"}`}>Direct Hotline Support</span>
+                  <span className="font-display font-bold text-sm sm:text-base text-brand-orange">{BUSINESS_INFO.phone}</span>
+                </div>
+              </a>
+
+              {/* WhatsApp */}
+              <a
+                href={`${BUSINESS_INFO.whatsappUrl}?text=Hello%20Haider%20Brothers,%20I'd%20like%20to%20ask%20about%20your%20tyre%20inventory`}
+                target="_blank"
+                rel="noreferrer referrer"
+                className={`p-4 rounded-2xl border flex items-center space-x-4 transition-all hover:scale-[1.01] ${
+                  darkMode
+                    ? "bg-black/20 border-white/5 hover:border-green-500/45 hover:bg-black/40"
+                    : "bg-white border-slate-200/60 hover:border-green-500/40"
+                }`}
+                id="contact-whatsapp-link"
+              >
+                <div className="w-10 h-10 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center shrink-0">
+                  <MessageSquare className="w-5 h-5" />
+                </div>
+                <div>
+                  <span className={`text-[9px] font-mono uppercase block ${darkMode ? "text-slate-500" : "text-slate-400"}`}>WhatsApp Instant Quote</span>
+                  <span className="font-display font-semibold text-sm sm:text-base text-green-500">Secure Live Text Chat</span>
+                </div>
+              </a>
+
+              {/* Address */}
+              <div className={`p-4 rounded-2xl border flex items-start space-x-4 ${
+                darkMode ? "bg-black/20 border-white/5" : "bg-white border-slate-200/60"
+              }`}>
+                <div className="w-10 h-10 rounded-xl bg-red-500/10 text-red-500 flex items-center justify-center shrink-0 mt-0.5">
+                  <MapPin className="w-5 h-5" />
+                </div>
+                <div>
+                  <span className={`text-[9px] font-mono uppercase block ${darkMode ? "text-slate-400" : "text-slate-400"}`}>Postal Address</span>
+                  <p className="text-xs font-semibold leading-relaxed mt-1">
+                    {BUSINESS_INFO.address}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Live Message Form */}
+            <div className={`p-6 rounded-3xl border ${
+              darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+            }`}>
+              <h3 className="font-display font-bold text-sm mb-2">Search Stock or Request Quote</h3>
+              
+              <form onSubmit={handleInquirySubmit} className="space-y-3">
+                <input
+                  type="text"
+                  required
+                  placeholder="e.g., need 4 tyre price for Pirelli 205/60R16..."
+                  value={inquiryText}
+                  onChange={(e) => setInquiryText(e.target.value)}
+                  className={`w-full p-3 rounded-xl text-xs border focus:ring-2 focus:ring-brand-orange focus:outline-none transition-all ${
+                    darkMode
+                      ? "bg-black/40 border-white/10 text-white placeholder-slate-500"
+                      : "bg-white border-slate-200 text-slate-900 placeholder-slate-400"
+                  }`}
+                  id="contact-stock-search-input"
+                />
+                
+                <button
+                  type="submit"
+                  className="w-full bg-gradient-to-r from-brand-orange to-red-600 text-white py-2.5 rounded-xl text-xs font-bold transition-all hover:-translate-y-0.5 flex items-center justify-center space-x-1"
+                  id="contact-submit-btn"
+                >
+                  <Send className="w-3.5 h-3.5" />
+                  <span>Send WhatsApp Message</span>
+                </button>
+              </form>
+            </div>
+          </div>
+
+          {/* Right Column: Google Maps Location Interactive Container (lg:col-span-7) */}
+          <div className={`lg:col-span-7 flex flex-col justify-between rounded-3xl overflow-hidden border shadow-xl min-h-[400px] transition-all duration-300 hover:scale-[1.005] ${
+            darkMode 
+              ? "bg-[#111115] border-white/5 hover:border-brand-orange/30 hover:shadow-[0_0_25px_rgba(255,85,0,0.2)]" 
+              : "bg-white border-slate-200/60 hover:border-brand-orange/30 hover:shadow-2xl"
+          }`}>
+            {/* Maps Iframe */}
+            <div className="relative w-full h-full min-h-[350px] flex-1">
+              <iframe
+                title="Haider Brothers Traders Google Maps Location"
+                src={BUSINESS_INFO.mapIframeUrl}
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+                referrerPolicy="no-referrer-when-downgrade"
+                className="absolute inset-0 w-full h-full grayscale-0 dark:brightness-[0.85] dark:contrast-[1.15] transition-all duration-300"
+              />
+            </div>
+            
+            {/* Map footer directions link */}
+            <div className={`p-4 sm:p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-t ${
+              darkMode ? "bg-[#1c1c24] border-white/5" : "bg-white border-slate-100"
+            }`}>
+              <div>
+                <h4 className="font-display font-bold text-sm">Faisal Town C-1 Roadway</h4>
+                <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                  Located right on Block C 1, Faisal Town, Lahore, Pakistan.
+                </p>
+              </div>
+
+              <a
+                href="https://www.google.com/maps/place/Haider+Brothers+Traders/@31.4764496,74.3084687,17z/data=!3m1!4b1!4m6!3m5!1s0x3919030037af462f:0xc479c225327c71d6!8m2!3d31.4764496!4d74.3084687!16s%2Fg%2F11zjmlbgth?entry=ttu&g_ep=EgoyMDI2MDYxMC4wIKXMDSoASAFQAw%3D%3D"
+                target="_blank"
+                rel="noreferrer referrer"
+                className="flex items-center justify-center space-x-2 bg-brand-orange hover:bg-brand-orange-dark text-white px-5 py-3 rounded-xl text-xs font-bold shadow-md shadow-brand-orange/20 transition-all text-center hover:scale-105 active:scale-95"
+                id="maps-directions-btn"
+              >
+                <Compass className="w-4 h-4 shrink-0" />
+                <span>Navigate on Google Maps</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/Logo.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+
+interface LogoProps {
+  className?: string;
+  variant?: "full" | "icon" | "compact";
+  darkMode?: boolean;
+}
+
+export default function Logo({ className = "h-12", variant = "full", darkMode = true }: LogoProps) {
+  // Brand Colors matching the logo:
+  // Red: Racing red/orange-red (#EB1C24 or brand-orange)
+  // Dark text: Slate-900 / white depending on darkMode
+  const primaryRed = "#E11D48"; // vibrant racing red
+  const textDarkColor = darkMode ? "#FFFFFF" : "#0F172A";
+  const grayColor = darkMode ? "#94A3B8" : "#64748B";
+
+  if (variant === "icon") {
+    // A quick, highly-identifiable compact circular/square icon for favicon / tiny spots
+    return (
+      <svg
+        viewBox="0 0 100 100"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={className}
+      >
+        {/* Ambient Glow */}
+        <circle cx="50" cy="50" r="40" fill="url(#iconGlow)" opacity="0.15" />
+        
+        {/* Tire track arc on top of icon */}
+        <path
+          d="M20,38 C30,22 70,22 80,38"
+          stroke={textDarkColor}
+          strokeWidth="4"
+          strokeDasharray="4 4"
+          strokeLinecap="round"
+          opacity="0.8"
+        />
+        
+        {/* Slanted bold letter "H" and "T" */}
+        <g transform="skewX(-10) translate(8, 0)">
+          <text
+            x="20"
+            y="65"
+            fill={primaryRed}
+            fontSize="32"
+            fontWeight="900"
+            fontFamily="system-ui, -apple-system, sans-serif"
+            letterSpacing="-1"
+          >
+            H
+          </text>
+          <text
+            x="48"
+            y="65"
+            fill={textDarkColor}
+            fontSize="32"
+            fontWeight="900"
+            fontFamily="system-ui, -apple-system, sans-serif"
+            letterSpacing="-1"
+          >
+            B
+          </text>
+        </g>
+
+        {/* Tire wrapping right side */}
+        <circle cx="76" cy="55" r="14" stroke={textDarkColor} strokeWidth="4.5" />
+        <circle cx="76" cy="55" r="8" stroke={textDarkColor} strokeWidth="2.5" />
+        <path d="M76,41 L76,69 M62,55 L90,55" stroke={textDarkColor} strokeWidth="1.5" />
+
+        <defs>
+          <radialGradient id="iconGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor={primaryRed} />
+            <stop offset="100%" stopColor="transparent" />
+          </radialGradient>
+        </defs>
+      </svg>
+    );
+  }
+
+  // Full HBT Logo matching the shop's physical sign board and uploaded image
+  return (
+    <div className={`flex items-center select-none ${className}`}>
+      <svg
+        viewBox="0 0 350 115"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-full h-full"
+      >
+        {/* BACKGROUND GLOW (Subtle, professional) */}
+        <defs>
+          <filter id="glow" x="-10%" y="-10%" width="120%" height="120%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feComposite in="SourceGraphic" in2="blur" operator="over" />
+          </filter>
+        </defs>
+
+        {/* 1. TIRE TREAD TRACK ARC (Top header curving down over the letters into the wheel) */}
+        <g id="Tire-Tread-Arc" transform="translate(45, 10)">
+          {/* Subtle guide curve */}
+          <path d="M 5,20 Q 100,-8 212,28" stroke={grayColor} strokeWidth="1" fill="none" opacity="0.15" />
+          
+          {/* Authentic Herringbone/Leaning tread tracks from the uploaded sign */}
+          <g fill={textDarkColor} opacity="0.85">
+            {/* Left side rising treads */}
+            <path d="M 5,22 L 11,14 L 16,16 L 10,24 Z" />
+            <path d="M 23,17 L 29,9 L 34,11 L 28,19 Z" />
+            <path d="M 42,13 L 48,5 L 53,7 L 47,15 Z" />
+            <path d="M 62,10 L 68,2 L 73,4 L 67,12 Z" />
+            <path d="M 83,8 L 89,1 L 94,3 L 88,10 Z" />
+            
+            {/* Center-right crowning treads bending towards the tire */}
+            <path d="M 105,7 L 111,1 L 116,3 L 110,9 Z" />
+            <path d="M 127,8 L 133,3 L 137,6 L 131,11 Z" />
+            <path d="M 149,11 L 154,6 L 158,9 L 153,14 Z" />
+            <path d="M 170,15 L 175,10 L 179,13 L 174,18 Z" />
+            <path d="M 190,21 L 194,16 L 198,19 L 194,24 Z" />
+            <path d="M 209,28 L 213,23 L 217,26 L 213,31 Z" />
+          </g>
+        </g>
+
+        {/* 2. MAIN LOGO BODY: STYLIZED SLANTED "HBT" */}
+        <g id="HBT-Acronym" transform="translate(56, 32)">
+          {/* High-fidelity, sharp racing red path for 'H' */}
+          <path 
+            d="M 5,48 L 16,6 H 31 L 27,22 H 49 L 53,6 H 68 L 57,48 H 42 L 46,31 H 24 L 20,48 Z" 
+            fill={primaryRed} 
+          />
+          
+          {/* High-fidelity block 'B' in Racing Red */}
+          <path 
+            d="M 72,48 L 84,6 H 112 C 122,6 128,10 126,17 C 125,21 121,24 116,26 C 122,27 124,31 122,37 C 120,44 113,48 102,48 Z 
+               M 94,21 H 105 C 109,21 111,19 112,16 C 113,13 111,11 107,11 H 97 Z 
+               M 90,38 H 101 C 105,38 107,36 108,32 C 109,28 107,26 103,26 H 93 Z" 
+            fill={primaryRed} 
+          />
+          
+          {/* High-fidelity slanted 'T' adjacent and integrated to the wheel */}
+          <path 
+            d="M 124,13 L 126,6 H 168 L 166,13 H 152 L 143,48 H 128 L 137,13 Z" 
+            fill={primaryRed} 
+          />
+
+          {/* 3. SIMPLIFIED & AUTHENTIC TIRE & RIM SYSTEM (Clean, high-contrast circular wheel matching the real shop brand) */}
+          <g id="Wheel-Icon" transform="translate(178, 14)">
+            {/* Elegant, clean concentric circular ring in the rim disc */}
+            <circle cx="25" cy="25" r="9" stroke={grayColor} strokeWidth="1.5" fill="none" opacity="0.6" />
+          </g>
+        </g>
+
+        {/* 4. "HAIDER BROTHERS TRADERS" sub-text at the base */}
+        <text
+          x="175"
+          y="104"
+          fill={textDarkColor}
+          fontSize="15.5"
+          fontWeight="800"
+          fontFamily="system-ui, -apple-system, sans-serif"
+          letterSpacing="5.8"
+          textAnchor="middle"
+          id="hbt-signature-text"
+        >
+          HAIDER BROTHERS TRADERS
+        </text>
+
+        {/* Small trademark label */}
+        <text
+          x="332"
+          y="102"
+          fill={grayColor}
+          fontSize="7"
+          fontWeight="700"
+          fontFamily="monospace"
+        >
+          ®
+        </text>
+      </svg>
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -0,0 +1,211 @@
+import { useState, useEffect } from "react";
+import { Phone, MessageSquare, Menu, X, Sun, Moon, Sparkles, FolderLock } from "lucide-react";
+import { BUSINESS_INFO } from "../data";
+import Logo from "./Logo";
+
+interface NavbarProps {
+  darkMode: boolean;
+  setDarkMode: (val: boolean) => void;
+  currentPage: string;
+  setCurrentPage: (page: string) => void;
+  isAuthorizedAdmin: boolean;
+}
+
+export default function Navbar({ darkMode, setDarkMode, currentPage, setCurrentPage, isAuthorizedAdmin }: NavbarProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const baseNavItems = [
+    { label: "Home", page: "home" },
+    { label: "Catalogue", page: "catalogue" },
+    { label: "Reviews Feed", page: "reviews" },
+    { label: "Showroom", page: "showroom" },
+    { label: "Inventory Manager", page: "admin", isIconic: true }
+  ];
+
+  const navItems = isAuthorizedAdmin 
+    ? baseNavItems 
+    : baseNavItems.filter(item => item.page !== "admin");
+
+  return (
+    <nav
+      className={`sticky top-0 left-0 w-full z-50 transition-all duration-300 ${
+        scrolled || currentPage !== "home"
+          ? darkMode
+            ? "bg-[#121214]/95 backdrop-blur-md border-b border-white/10 py-3 shadow-lg shadow-black/20"
+            : "bg-white/95 backdrop-blur-md border-b border-black/5 py-3 shadow-sm"
+          : "bg-transparent py-5"
+      }`}
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between">
+          {/* Logo Brand */}
+          <button
+            onClick={() => { setCurrentPage("home"); window.scrollTo({ top: 0, behavior: "smooth" }); }}
+            className="flex items-center group transition-all transform hover:scale-[1.02] active:scale-95 text-left"
+            id="navbar-logo-btn"
+          >
+            <Logo variant="full" darkMode={darkMode} className="h-10 sm:h-12 w-auto" />
+          </button>
+
+          {/* Desktop Navigation Links (Responsive breakpoint updated to lg to prevent overlapping on tablets) */}
+          <div className="hidden lg:flex items-center space-x-1 xl:space-x-2">
+            {navItems.map((item) => {
+              const isActive = currentPage === item.page;
+              return (
+                <button
+                  key={item.page}
+                  onClick={() => { setCurrentPage(item.page); window.scrollTo({ top: 0, behavior: "smooth" }); }}
+                  className={`px-3 py-2 rounded-lg text-xs xl:text-sm font-medium transition-all relative flex items-center space-x-1 ${
+                    isActive
+                      ? "text-brand-orange font-bold bg-brand-orange/5"
+                      : darkMode
+                      ? "text-slate-300 hover:text-white hover:bg-white/5"
+                      : "text-slate-600 hover:text-slate-900 hover:bg-black/5"
+                  }`}
+                >
+                  {item.isIconic && <FolderLock className="w-3.5 h-3.5 mr-1 text-brand-orange inline" />}
+                  <span>{item.label}</span>
+                  {isActive && (
+                    <span className="absolute bottom-0 left-2 right-2 h-[2px] bg-brand-orange rounded-full" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Right Action panel for Desktop */}
+          <div className="hidden lg:flex items-center space-x-3">
+            {/* Theme Toggle Button */}
+            <button
+              onClick={() => setDarkMode(!darkMode)}
+              className={`p-2 rounded-xl transition-all ${
+                darkMode
+                  ? "bg-white/5 hover:bg-white/10 text-amber-400"
+                  : "bg-black/5 hover:bg-black/10 text-slate-800"
+              }`}
+              title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
+              id="theme-toggle-desktop"
+            >
+              {darkMode ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+            </button>
+
+            {/* Emergency Hotline Button */}
+            <a
+              href={`tel:${BUSINESS_INFO.phoneRaw}`}
+              className="flex items-center space-x-1.5 bg-gradient-to-r from-brand-orange to-red-600 text-white px-3.5 py-2 rounded-xl text-xs font-semibold shadow-md shadow-brand-orange/20 hover:shadow-brand-orange/40 hover:-translate-y-0.5 transition-all"
+            >
+              <Phone className="w-3.5 h-3.5" />
+              <span>24/7 Helpline</span>
+            </a>
+          </div>
+
+          {/* Mobile Right Controls (Menu & Theme) */}
+          <div className="flex lg:hidden items-center space-x-2">
+            <button
+              onClick={() => setDarkMode(!darkMode)}
+              className={`p-1.5 rounded-lg transition-all ${
+                darkMode ? "bg-white/5 text-amber-400" : "bg-black/5 text-slate-800"
+              }`}
+              id="theme-toggle-mobile"
+            >
+              {darkMode ? <Sun className="w-4.5 h-4.5" /> : <Moon className="w-4.5 h-4.5" />}
+            </button>
+
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              className={`p-1.5 rounded-lg transition-all ${
+                darkMode ? "bg-white/5 text-white" : "bg-black/5 text-slate-800"
+              }`}
+              aria-label="Toggle navigation menu"
+              id="mobile-menu-btn"
+            >
+              {isOpen ? <X className="w-5.5 h-5.5" /> : <Menu className="w-5.5 h-5.5" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Drawer Overlay */}
+      {isOpen && (
+        <div className="lg:hidden fixed inset-0 top-[60px] z-45 bg-black/60 backdrop-blur-sm">
+          <div
+            className={`w-4/5 max-w-sm h-[calc(100vh-60px)] p-6 shadow-2xl flex flex-col justify-between transition-transform duration-300 ${
+              darkMode ? "bg-[#1c1c24] text-white" : "bg-white text-slate-900"
+            }`}
+          >
+            <div className="space-y-4">
+              <span className={`text-[10px] font-mono tracking-widest block pb-2 border-b uppercase ${
+                darkMode ? "text-slate-400 border-white/5" : "text-slate-500 border-black/5"
+              }`}>
+                Browse Showroom Sections
+              </span>
+              
+              <div className="flex flex-col space-y-1">
+                {navItems.map((item) => {
+                  const isActive = currentPage === item.page;
+                  return (
+                    <button
+                      key={item.page}
+                      onClick={() => {
+                        setCurrentPage(item.page);
+                        setIsOpen(false);
+                        window.scrollTo({ top: 0, behavior: "smooth" });
+                      }}
+                      className={`px-4 py-3 rounded-xl text-sm font-medium transition-all flex items-center justify-between text-left w-full ${
+                        isActive
+                          ? "bg-brand-orange/10 text-brand-orange font-bold"
+                          : darkMode
+                          ? "hover:bg-white/5 text-slate-300"
+                          : "hover:bg-slate-100 text-slate-700"
+                      }`}
+                    >
+                      <span className="flex items-center">
+                        {item.isIconic && <FolderLock className="w-4 h-4 mr-2 text-brand-orange" />}
+                        {item.label}
+                      </span>
+                      {isActive && <span className="w-2 h-2 rounded-full bg-brand-orange" />}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="space-y-4 pt-6 border-t border-black/5 dark:border-white/5">
+              <div className="flex items-center space-x-2 text-xs font-mono text-slate-500 dark:text-slate-400">
+                <Sparkles className="w-4 h-4 text-brand-orange animate-pulse" />
+                <span>OPEN 24 HOURS IN FAISAL TOWN</span>
+              </div>
+              
+              <a
+                href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                className="flex items-center justify-center space-x-2 w-full bg-gradient-to-r from-brand-orange to-red-600 text-white py-2.5 rounded-xl text-xs font-semibold shadow-md shadow-brand-orange/30 text-center"
+              >
+                <Phone className="w-4 h-4" />
+                <span>Call Emergency Service</span>
+              </a>
+
+              <a
+                href={`${BUSINESS_INFO.whatsappUrl}?text=Hello%20Haider%20Brothers,%20I%20have%20an%20emergency%20tyre%20request`}
+                target="_blank"
+                rel="noreferrer referrer"
+                className="flex items-center justify-center space-x-2 w-full border border-green-500/35 text-green-500 bg-green-500/5 py-2.5 rounded-xl text-xs font-medium"
+              >
+                <MessageSquare className="w-4 h-4" />
+                <span>WhatsApp Live Chat</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

src/components/NewsletterSignup.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { Mail, Send, Check, Loader2, Sparkles } from "lucide-react";
+import { subscribeNewsletter } from "../lib/firebaseService";
+
+interface NewsletterSignupProps {
+  darkMode: boolean;
+}
+
+export default function NewsletterSignup({ darkMode }: NewsletterSignupProps) {
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const handleSubscribe = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email.trim()) return;
+
+    setLoading(true);
+    setStatus("idle");
+    setErrorMessage("");
+
+    try {
+      await subscribeNewsletter(email);
+      setStatus("success");
+      setEmail("");
+    } catch (err: any) {
+      console.error("Subscription failed:", err);
+      setStatus("error");
+      
+      // Extract a descriptive human error message
+      let msg = "Something went wrong. Please check your network or try again.";
+      if (err instanceof Error) {
+        try {
+          const parsed = JSON.parse(err.message);
+          if (parsed.error) {
+            msg = parsed.error;
+          }
+        } catch {
+          msg = err.message;
+        }
+      }
+      setErrorMessage(msg);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4" id="newsletter-signup-container">
+      <div className="space-y-1.5">
+        <h4 className={`font-display font-medium text-xs uppercase tracking-widest flex items-center gap-1.5 font-mono ${
+          darkMode ? "text-slate-200" : "text-slate-950"
+        }`}>
+          <Mail className="w-3.5 h-3.5 text-brand-orange" />
+          <span>Maintenance Newsletter</span>
+        </h4>
+        <p className="leading-relaxed text-[11px] text-slate-500">
+          Subscribe to receive seasonal tyre maintenance advice, road safety checks, and priority showroom discount vouchers in Lahore.
+        </p>
+      </div>
+
+      {status === "success" ? (
+        <div 
+          className={`p-3 rounded-2xl border flex items-start space-x-2.5 transition-all animate-fadeIn ${
+            darkMode 
+              ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-400" 
+              : "bg-emerald-50 border-emerald-200 text-emerald-800"
+          }`}
+          id="newsletter-success-alert"
+        >
+          <div className="p-1 rounded-full bg-emerald-500/20 text-emerald-400 mt-0.5 shrink-0">
+            <Check className="w-3.5 h-3.5" />
+          </div>
+          <div>
+            <p className="font-bold text-xs">Successfully Subscribed!</p>
+            <p className="text-[10px] mt-0.5 opacity-90">
+              You're registered to receive maintenance tips. Stay safe on the road!
+            </p>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={handleSubscribe} className="space-y-2">
+          <div className="relative">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email address"
+              required
+              disabled={loading}
+              className={`w-full text-xs px-3.5 py-2.5 pr-10 rounded-xl border font-sans focus:outline-hidden focus:ring-1 focus:ring-brand-orange transition-all duration-200 ${
+                darkMode
+                  ? "bg-black/40 border-white/10 text-white placeholder-slate-500 focus:border-brand-orange/40"
+                  : "bg-white border-slate-200 text-slate-900 placeholder-slate-400 focus:border-brand-orange"
+              }`}
+              id="newsletter-email-input"
+            />
+            <button
+              type="submit"
+              disabled={loading || !email.trim()}
+              className="absolute right-1.5 top-1/2 -translate-y-1/2 p-1.5 rounded-lg bg-brand-orange hover:bg-brand-orange-dark text-white hover:scale-105 active:scale-95 transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none"
+              title="Subscribe"
+              id="newsletter-submit-btn"
+            >
+              {loading ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              ) : (
+                <Send className="w-3.5 h-3.5" />
+              )}
+            </button>
+          </div>
+
+          {status === "error" && (
+            <p className="text-[10px] text-rose-500 font-medium px-1 leading-snug" id="newsletter-error-message">
+              ⚠️ {errorMessage}
+            </p>
+          )}
+
+          <div className="flex items-center space-x-1.5 text-[10px] text-slate-500 font-mono px-1">
+            <Sparkles className="w-3 h-3 text-brand-orange/60 shrink-0" />
+            <span>Updates twice a month • Opt-out anytime</span>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

src/components/ProductDetailsModal.tsx

@@ -0,0 +1,175 @@
+import { X, MessageSquare, ShieldCheck, CheckCircle2, Phone, Compass } from "lucide-react";
+import { TireProduct, BUSINESS_INFO } from "../data";
+
+interface ProductDetailsModalProps {
+  tire: TireProduct | null;
+  onClose: () => void;
+  darkMode: boolean;
+}
+
+export default function ProductDetailsModal({ tire, onClose, darkMode }: ProductDetailsModalProps) {
+  if (!tire) return null;
+
+  const waPreFilledText = `Hello Haider Brothers, I want price & stock for ${tire.name} (Size: ${tire.size})`;
+  const encodedText = encodeURIComponent(waPreFilledText);
+  const waLink = `${BUSINESS_INFO.whatsappUrl}?text=${encodedText}`;
+
+  // Calculated physical traits for mock premium display
+  const loadSpeedIndex = tire.size.includes("14") ? "88H" : tire.size.includes("15") ? "91H" : tire.size.includes("16") ? "94V" : tire.size.includes("17") ? "98W" : "103W";
+  const treadwear = tire.brand.toLowerCase() === "michelin" || tire.brand.toLowerCase() === "continental" ? "540 A A" : "400 A A";
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 overflow-y-auto bg-black/80 backdrop-blur-sm animate-fadeIn">
+      {/* Container Card */}
+      <div
+        className={`relative w-full max-w-3xl rounded-3xl overflow-hidden shadow-2xl transition-all border duration-300 ${
+          darkMode ? "bg-[#1c1c24] border-white/10 text-white" : "bg-white border-slate-200 text-slate-900"
+        }`}
+      >
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className={`absolute top-4 right-4 z-10 p-2 rounded-xl transition-all ${
+            darkMode ? "bg-black/40 hover:bg-black/60 text-white" : "bg-slate-100 hover:bg-slate-200 text-slate-800"
+          }`}
+          aria-label="Close specifications modal"
+          id="close-modal-btn"
+        >
+          <X className="w-5 h-5" />
+        </button>
+
+        <div className="grid grid-cols-1 md:grid-cols-2">
+          {/* Card Media Section */}
+          <div className="relative aspect-square md:h-full overflow-hidden bg-slate-950">
+            <img
+              src={tire.image}
+              alt={tire.name}
+              className="w-full h-full object-cover"
+              referrerPolicy="no-referrer"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent pointer-events-none"></div>
+            
+            {/* Image caption absolute */}
+            <div className="absolute bottom-6 left-6 right-6">
+              <span className="bg-brand-orange text-white text-[10px] font-mono font-bold px-2.5 py-1 rounded-full uppercase tracking-wider block w-fit mb-2">
+                ORIGINAL SPECIFICATIONS
+              </span>
+              <h3 className="font-display text-2xl font-extrabold text-white leading-tight">
+                {tire.name}
+              </h3>
+              <p className="text-xs text-slate-300 mt-1">Authorized Import & Supply</p>
+            </div>
+          </div>
+
+          {/* Details / Spec column */}
+          <div className="p-6 sm:p-8 flex flex-col justify-between space-y-6">
+            <div className="space-y-4">
+              <div className="flex items-center space-x-2">
+                <span className="text-brand-orange font-bold text-xs uppercase tracking-widest font-mono">
+                  {tire.brand} Tyre Details
+                </span>
+                <span className="w-1 h-1 rounded-full bg-slate-500"></span>
+                <span className={`text-xs font-semibold ${
+                  tire.stock !== undefined && tire.stock < 5 
+                    ? "text-rose-500 animate-pulse" 
+                    : "text-emerald-500"
+                }`}>
+                  Lahore Stock: {tire.stock !== undefined ? `${tire.stock} Units Remaining` : "Available (In Stock)"}
+                </span>
+              </div>
+
+              <div className="border-b pb-4 border-black/5 dark:border-white/5">
+                <p className={`text-xs leading-relaxed ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                  {tire.description} Perfect for drivers focused on safety, longevity, and comfortable ride acoustics on both dual highways and local Lahore residential lanes.
+                </p>
+              </div>
+
+              {/* Specs Bento Grid Table */}
+              <div className="grid grid-cols-2 gap-3 pt-2">
+                <div className={`p-3 rounded-xl border ${darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100"}`}>
+                  <span className={`text-[10px] uppercase font-mono tracking-wider block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    Tyre Size
+                  </span>
+                  <span className="font-mono text-sm font-bold text-brand-orange">{tire.size}</span>
+                </div>
+
+                <div className={`p-3 rounded-xl border ${darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100"}`}>
+                  <span className={`text-[10px] uppercase font-mono tracking-wider block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    Load/Speed Rating
+                  </span>
+                  <span className="font-mono text-sm font-bold">{loadSpeedIndex}</span>
+                </div>
+
+                <div className={`p-3 rounded-xl border ${darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100"}`}>
+                  <span className={`text-[10px] uppercase font-mono tracking-wider block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    UTQG / Treadwear
+                  </span>
+                  <span className="font-mono text-sm font-bold">{treadwear}</span>
+                </div>
+
+                <div className={`p-3 rounded-xl border ${darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100"}`}>
+                  <span className={`text-[10px] uppercase font-mono tracking-wider block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    Installation
+                  </span>
+                  <span className="text-green-500 text-xs font-bold font-mono">FREE AT STORE</span>
+                </div>
+              </div>
+
+              {/* Warranties flags */}
+              <div className="space-y-2 pt-1 font-mono text-[11px]">
+                <div className="flex items-center space-x-1.5 text-emerald-500">
+                  <CheckCircle2 className="w-4 h-4" />
+                  <span>Official Year Manufacturing Date Warranted</span>
+                </div>
+                <div className="flex items-center space-x-1.5 text-brand-orange">
+                  <Compass className="w-4 h-4" />
+                  <span>Optimized for Pakistan's heat cycles & road asphalt</span>
+                </div>
+              </div>
+            </div>
+
+            {/* Price & Primary Call-to-actions */}
+            <div className="pt-4 border-t border-black/5 dark:border-white/5 space-y-4">
+              <div className="flex items-baseline justify-between">
+                <span className={`text-xs font-mono tracking-wider ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                  Wholesale Unit Price
+                </span>
+                <span className="text-brand-orange font-display text-2xl font-black">
+                  PKR {tire.price.toLocaleString()}
+                </span>
+              </div>
+
+              <div className="grid grid-cols-2 gap-3">
+                {/* Dial Store hotline */}
+                <a
+                  href={`tel:${BUSINESS_INFO.phoneRaw}`}
+                  className={`flex items-center justify-center space-x-2 py-3.5 rounded-xl text-xs font-bold transition-all border ${
+                    darkMode
+                      ? "border-white/10 bg-white/5 hover:bg-white/10 text-white"
+                      : "border-slate-200 bg-slate-50 hover:bg-slate-100 text-slate-800"
+                  }`}
+                  id="modal-phone-btn"
+                >
+                  <Phone className="w-4 h-4 text-brand-orange" />
+                  <span>Call Store Office</span>
+                </a>
+
+                {/* WhatsApp Chat prefilled */}
+                <a
+                  href={waLink}
+                  target="_blank"
+                  rel="noreferrer referrer"
+                  className="flex items-center justify-center space-x-2 bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-500 hover:to-emerald-400 text-white py-3.5 rounded-xl text-xs font-bold shadow-md shadow-green-600/10 transition-all"
+                  id="modal-wa-btn"
+                >
+                  <MessageSquare className="w-4 h-4" />
+                  <span>WhatsApp Secure Order</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Promotions.tsx

@@ -0,0 +1,318 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { 
+  ChevronLeft, 
+  ChevronRight, 
+  Sparkles, 
+  Percent, 
+  Gift, 
+  ShieldCheck, 
+  Flame, 
+  TrendingUp, 
+  Calendar,
+  AlertCircle
+} from "lucide-react";
+import { BUSINESS_INFO } from "../data";
+
+interface PromoOffer {
+  id: string;
+  title: string;
+  subtitle: string;
+  tagline: string;
+  description: string;
+  badge: {
+    text: string;
+    type: "discount" | "bundle" | "limited" | "exclusive";
+  };
+  highlightFeatures: string[];
+  duration: string;
+  actionText: string;
+  gradient: string;
+  icon: any;
+}
+
+export default function Promotions({ darkMode }: { darkMode: boolean }) {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [isAutoPlaying, setIsAutoPlaying] = useState<boolean>(true);
+
+  const PROMO_DATA: PromoOffer[] = [
+    {
+      id: "monsoon-alignment-bundle",
+      title: "Lahore Monsoon Safety Package",
+      subtitle: "FREE Computerized 3D Alignment & Wheel Balancing",
+      tagline: "Total peace-of-mind during rainy seasons on wet Lahore roads",
+      description: "Buy any premium set of 4 Tyres (Yokohama, Michelin, or Continental) and unlock complete computerized German 3D alignment, nitrogen air filling, and four heavy-duty brass safety valves absolutely free of charge.",
+      badge: {
+        text: "Special Bundle",
+        type: "bundle"
+      },
+      highlightFeatures: [
+        "Free 3D Alignment (PKR 3,500 value)",
+        "Premium German Tubeless Valves",
+        "Computerized Wheel Balancing Included",
+        "Lifetime Nitrogen topping-up sessions"
+      ],
+      duration: "Valid until July 31, 2026",
+      actionText: "Claim Bundle on WhatsApp",
+      gradient: "from-blue-600 via-indigo-900 to-[#0e1017]",
+      icon: Gift,
+    },
+    {
+      id: "yokohama-summer-blast",
+      title: "Summer Heat-Resistant Tyre Fest",
+      subtitle: "Save up to 15% on Eco-Friendly Japanese Yokohama Imports",
+      tagline: "Advanced rubber compounds designed for Pakistan's extreme summer asphalt",
+      description: "Yokohama BluEarth and Advan series tyres have advanced silica compound protection to withhold high highway friction and temperature spikes during summer without risking tire decompression.",
+      badge: {
+        text: "Flat Discount",
+        type: "discount"
+      },
+      highlightFeatures: [
+        "15% Flat Rebate on selected sizes",
+        "Genuine 2026 Import DOT markings",
+        "Wet traction Class-A safety ratings",
+        "Reduced fuel consumption thread patterns"
+      ],
+      duration: "Limited stock quota",
+      actionText: "Check Size Compatibility",
+      gradient: "from-brand-orange via-amber-850 to-[#120703]",
+      icon: Percent,
+    },
+    {
+      id: "executive-continental-bundle",
+      title: "Continental Premium Executive Deal",
+      subtitle: "Get PKR 8,000 Instant Voucher on Set of 4 Continental Tyres",
+      tagline: "Engineered in Germany, trusted on Pakistani Motorways",
+      description: "Elevate your sedan's comfort level. Continental offers exceptional noise reduction and high-speed stability. Install at our Faisal Town showroom to claim your premium service cashback voucher.",
+      badge: {
+        text: "Exclusive Reward",
+        type: "exclusive"
+      },
+      highlightFeatures: [
+        "PKR 8,000 Instant Cash Voucher",
+        "Free Professional fitting & balancing",
+        "5-Year official structural backup warranty",
+        "Complimentary Suspension checkups"
+      ],
+      duration: "Hurry! Active this week only",
+      actionText: "Secure Cash Voucher",
+      gradient: "from-emerald-600 via-teal-950 to-[#0c1613]",
+      icon: Sparkles,
+    },
+    {
+      id: "general-tyre-pakistan",
+      title: "General Tyre Durability Drive",
+      subtitle: "Flat 8% Off on All Local General Tyre Products",
+      tagline: "The absolute rugged champion for everyday Lahore traffic and pothole terrains",
+      description: "Specially formulated for Pakistani road conditions. Extreme puncture-resistance and thick reinforcement sidewalls guarantee reliable performance for cabs, sedans, and commercial wagons.",
+      badge: {
+        text: "High Durability",
+        type: "limited"
+      },
+      highlightFeatures: [
+        "Economical Lahore pricing",
+        "Reinforced steel belt core protection",
+        "Excellent water-channeling grooves",
+        "Unbeatable lifetime warranty terms"
+      ],
+      duration: "Offer valid on cash payments",
+      actionText: "Inquire stock levels",
+      gradient: "from-red-600 via-rose-900 to-[#1e0a0f]",
+      icon: ShieldCheck,
+    }
+  ];
+
+  // Auto-play timer
+  useEffect(() => {
+    if (!isAutoPlaying) return;
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % PROMO_DATA.length);
+    }, 6000);
+    return () => clearInterval(interval);
+  }, [isAutoPlaying, PROMO_DATA.length]);
+
+  const handlePrev = () => {
+    setIsAutoPlaying(false);
+    setCurrentIndex((prev) => (prev - 1 + PROMO_DATA.length) % PROMO_DATA.length);
+  };
+
+  const handleNext = () => {
+    setIsAutoPlaying(false);
+    setCurrentIndex((prev) => (prev + 1) % PROMO_DATA.length);
+  };
+
+  const getBadgeStyles = (type: string) => {
+    switch (type) {
+      case "discount":
+        return "bg-amber-500/15 text-amber-400 border border-amber-500/30";
+      case "bundle":
+        return "bg-blue-500/15 text-blue-400 border border-blue-500/30";
+      case "exclusive":
+        return "bg-purple-500/15 text-purple-400 border border-purple-500/30";
+      default:
+        return "bg-red-500/15 text-red-400 border border-red-500/30";
+    }
+  };
+
+  const currentPromo = PROMO_DATA[currentIndex];
+  const IconComponent = currentPromo.icon;
+
+  return (
+    <section 
+      id="promotions"
+      className="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
+      onMouseEnter={() => setIsAutoPlaying(false)}
+      onMouseLeave={() => setIsAutoPlaying(true)}
+    >
+      <div className="text-center max-w-2xl mx-auto mb-10">
+        <span className="text-xs font-mono tracking-widest uppercase bg-brand-orange/15 text-brand-orange px-3.5 py-1 rounded-full font-extrabold flex items-center justify-center w-fit mx-auto gap-1.5 shadow-sm">
+          <Flame className="w-3.5 h-3.5 animate-pulse" />
+          <span>Seasonal Promotions & Offers</span>
+        </span>
+        <h2 className="text-2xl sm:text-4xl font-display font-extrabold tracking-tight mt-3">
+          Special Bundle Packages & Discounts
+        </h2>
+        <p className={`text-sm mt-2 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+          Exclusively designed packages for Lahore drivers. Enjoy free alignment services, road hazard upgrades, and seasonal cash savings.
+        </p>
+      </div>
+
+      {/* Main Carousel Frame */}
+      <div 
+        className={`relative rounded-3xl overflow-hidden border ${
+          darkMode ? "border-white/10 bg-black/40 shadow-2xl" : "border-slate-200 bg-white shadow-xl"
+        }`}
+        id="promotions-carousel-stage"
+      >
+        <div className="absolute inset-0 bg-linear-to-r from-black/80 to-transparent z-10 pointer-events-none md:block hidden" />
+
+        {/* Carousel Content Render */}
+        <div className="relative min-h-[460px] md:min-h-[400px] flex flex-col justify-center overflow-hidden">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={currentPromo.id}
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -50 }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+              className={`absolute inset-0 w-full h-full bg-gradient-to-r ${currentPromo.gradient} flex flex-col md:flex-row items-stretch`}
+            >
+              {/* Left Column: Promotion Info */}
+              <div className="flex-1 p-6 sm:p-10 md:p-12 flex flex-col justify-between z-20 text-white select-none">
+                <div className="space-y-4">
+                  <div className="flex flex-wrap items-center gap-2.5">
+                    <span className={`text-[10px] uppercase font-mono tracking-widest px-3 py-1 rounded-full font-bold ${getBadgeStyles(currentPromo.badge.type)}`}>
+                      {currentPromo.badge.text}
+                    </span>
+                    <span className="text-[10px] font-mono text-slate-300 flex items-center gap-1">
+                      <Calendar className="w-3.5 h-3.5 text-brand-orange" />
+                      {currentPromo.duration}
+                    </span>
+                  </div>
+
+                  <div className="space-y-1">
+                    <h3 className="text-xl sm:text-2xl md:text-3xl font-display font-black tracking-tight text-white leading-tight">
+                      {currentPromo.title}
+                    </h3>
+                    <h4 className="text-sm sm:text-base font-semibold text-brand-orange font-mono">
+                      {currentPromo.subtitle}
+                    </h4>
+                  </div>
+
+                  <p className="text-xs sm:text-sm text-slate-300 leading-relaxed font-sans max-w-xl">
+                    {currentPromo.description}
+                  </p>
+
+                  {/* Highlights Grid */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-2">
+                    {currentPromo.highlightFeatures.map((feat, i) => (
+                      <div key={i} className="flex items-center space-x-2 text-xs text-slate-200">
+                        <span className="w-1.5 h-1.5 rounded-full bg-brand-orange shrink-0" />
+                        <span>{feat}</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Bottom Interactive Trigger Area */}
+                <div className="pt-6 sm:pt-0 mt-6 md:mt-0 flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                  <a
+                    href={`${BUSINESS_INFO.whatsappUrl}?text=${encodeURIComponent(
+                      `Hello Haider Brothers, I'm interested in the promotion: *${currentPromo.title}* (${currentPromo.subtitle}).`
+                    )}`}
+                    target="_blank"
+                    rel="noreferrer referrer"
+                    className="bg-brand-orange hover:bg-brand-orange-dark text-white font-bold text-xs px-5 py-3 rounded-xl flex items-center space-x-2 transition-all shadow-lg shadow-brand-orange/25"
+                  >
+                    <span>{currentPromo.actionText}</span>
+                    <ChevronRight className="w-4 h-4" />
+                  </a>
+                  <span className="text-[10px] text-slate-400 font-mono italic flex items-center gap-1">
+                    <AlertCircle className="w-3.5 h-3.5 text-slate-500 shrink-0" />
+                    Premium standard tire sizes apply. Rates subject to stock.
+                  </span>
+                </div>
+              </div>
+
+              {/* Right Column: High Fidelity Aesthetic Visual Cover art */}
+              <div className="w-full md:w-[40%] bg-black/40 md:bg-transparent relative overflow-hidden flex items-center justify-center p-8 md:p-0">
+                {/* Glowing aesthetic backdrop circle matching promotion icon */}
+                <div className="absolute w-52 h-52 sm:w-64 sm:h-64 rounded-full bg-brand-orange/15 blur-3xl" />
+                
+                <div className="relative text-center flex flex-col items-center justify-center space-y-3 z-20">
+                  <div className="p-5 rounded-3xl bg-white/5 border border-white/10 shadow-lg backdrop-blur-md">
+                    <IconComponent className="w-12 h-12 text-brand-orange animate-pulse" />
+                  </div>
+                  <span className="text-xs font-mono tracking-widest uppercase text-slate-300 font-bold block">
+                    Haider Brothers Deals
+                  </span>
+                  <p className="text-[10px] text-slate-400 max-w-[200px] text-center mx-auto">
+                    {currentPromo.tagline}
+                  </p>
+                </div>
+              </div>
+            </motion.div>
+          </AnimatePresence>
+        </div>
+
+        {/* Manual Carousel Chevron Controls */}
+        <button
+          onClick={handlePrev}
+          className="absolute left-4 top-1/2 -translate-y-1/2 z-30 p-2 rounded-xl border border-white/10 bg-black/30 hover:bg-black/50 text-white hover:scale-105 active:scale-95 transition-all text-sm backdrop-blur-md"
+          title="Previous slide"
+          type="button"
+          id="btn-promo-prev"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+        <button
+          onClick={handleNext}
+          className="absolute right-4 top-1/2 -translate-y-1/2 z-30 p-2 rounded-xl border border-white/10 bg-black/30 hover:bg-black/50 text-white hover:scale-105 active:scale-95 transition-all text-sm backdrop-blur-md"
+          title="Next slide"
+          type="button"
+          id="btn-promo-next"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+
+        {/* Bullet Progress Indicator bar */}
+        <div className="absolute bottom-4 left-1/2 -translate-y-0 -translate-x-1/2 z-30 flex items-center space-x-2 bg-black/20 p-1.5 px-3 rounded-full backdrop-blur-sm">
+          {PROMO_DATA.map((promo, idx) => (
+            <button
+              key={promo.id}
+              onClick={() => {
+                setIsAutoPlaying(false);
+                setCurrentIndex(idx);
+              }}
+              className={`h-2.5 rounded-full transition-all duration-300 ${
+                idx === currentIndex ? "w-6 bg-brand-orange" : "w-2.5 bg-slate-500/50"
+              }`}
+              title={`Go to slide ${idx + 1}`}
+              type="button"
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/ReviewsSection.tsx

@@ -0,0 +1,251 @@
+import React, { useState } from "react";
+import { Star, Sparkles, CheckCircle2 } from "lucide-react";
+
+interface ReviewsSectionProps {
+  darkMode: boolean;
+  reviews: any[];
+  onAddReview: (review: { name: string; rating: number; text: string; date: string; initials: string }) => Promise<void>;
+}
+
+export default function ReviewsSection({ darkMode, reviews, onAddReview }: ReviewsSectionProps) {
+  const [newReview, setNewReview] = useState({
+    name: "",
+    text: "",
+    rating: 5
+  });
+  const [formSuccess, setFormSuccess] = useState(false);
+  const [hoverRating, setHoverRating] = useState<number | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newReview.name.trim() || !newReview.text.trim()) return;
+
+    // Grab initials
+    const initials = newReview.name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2) || "U";
+
+    const newlyCreated = {
+      name: newReview.name,
+      rating: newReview.rating,
+      text: newReview.text,
+      date: "Just now",
+      initials: initials
+    };
+
+    try {
+      await onAddReview(newlyCreated);
+      setNewReview({ name: "", text: "", rating: 5 });
+      setFormSuccess(true);
+      setTimeout(() => setFormSuccess(false), 4500);
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <section
+      id="reviews"
+      className={`py-24 relative overflow-hidden transition-colors duration-300 ${
+        darkMode ? "bg-brand-dark/95 text-white" : "bg-white text-slate-900"
+      }`}
+    >
+      {/* Visual glowing orbs */}
+      <div className="absolute top-1/3 left-0 w-72 h-72 rounded-full bg-brand-orange/10 blur-[90px] pointer-events-none"></div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center max-w-2xl mx-auto mb-16">
+          <div className="inline-flex items-center space-x-2 bg-brand-orange/10 px-3.5 py-1.5 rounded-full text-brand-orange text-xs font-mono tracking-wider uppercase mb-3">
+            <Sparkles className="w-3.5 h-3.5" />
+            <span>4.8★ Ratings On Google Maps</span>
+          </div>
+          <h2 className="text-3xl sm:text-4xl font-display font-extrabold tracking-tight">
+            Loved By Lahore's Car Community
+          </h2>
+          <p className={`text-sm mt-3 ${darkMode ? "text-slate-400" : "text-slate-600"}`}>
+            Real testimonials from car, SUV, and commercial truck owners who buy their Michelin, Yokohama, and Autogrip tyres from us.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
+          {/* Left Column: List of Reviews */}
+          <div className="lg:col-span-7 space-y-6">
+            <div className="grid grid-cols-1 gap-4">
+              {reviews.map((review, rIdx) => (
+                <div
+                  key={`${review.name}-${rIdx}`}
+                  className={`p-6 rounded-2xl border transition-all hover:scale-[1.01] duration-300 ${
+                    darkMode
+                      ? "bg-[#1c1c24] border-white/5 hover:border-brand-orange/30 shadow-md"
+                      : "bg-slate-50 border-slate-100 hover:border-brand-orange/30 shadow-sm"
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex items-center space-x-3.5">
+                      <div className="w-10 h-10 rounded-xl bg-orange-600/10 text-brand-orange text-sm font-bold flex items-center justify-center shrink-0">
+                        {review.initials}
+                      </div>
+                      <div>
+                        <h4 className="font-display font-bold text-sm">{review.name}</h4>
+                        <span className={`text-[10px] font-mono ${darkMode ? "text-slate-500" : "text-slate-400"}`}>
+                          Verified User • {review.date}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex space-x-0.5 text-amber-500">
+                      {Array.from({ length: 5 }).map((_, sIdx) => (
+                        <Star
+                          key={sIdx}
+                          className={`w-3.5 h-3.5 fill-current ${
+                            sIdx < Math.floor(review.rating)
+                              ? "text-amber-500"
+                              : "text-slate-300 dark:text-slate-600"
+                          }`}
+                        />
+                      ))}
+                    </div>
+                  </div>
+
+                  <p className={`text-xs sm:text-sm mt-4 italic leading-relaxed ${
+                    darkMode ? "text-slate-300" : "text-slate-600"
+                  }`}>
+                    "{review.text}"
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Right Column: Custom aggregate and submission form */}
+          <div className="lg:col-span-5 space-y-6">
+            {/* Aggregate Dashboard breakout */}
+            <div className={`p-6 rounded-3xl border ${
+              darkMode ? "bg-white/5 border-white/5" : "bg-slate-50 border-slate-100 shadow-sm"
+            }`}>
+              <h3 className="font-display font-extrabold text-lg mb-4">Google Maps Score</h3>
+              <div className="flex items-center space-x-4">
+                <span className="text-4xl sm:text-5xl font-black text-brand-orange font-display">4.8</span>
+                <div>
+                  <div className="flex space-x-0.5 text-amber-500">
+                    <Star className="w-5 h-5 fill-current text-amber-500" />
+                    <Star className="w-5 h-5 fill-current text-amber-500" />
+                    <Star className="w-5 h-5 fill-current text-amber-500" />
+                    <Star className="w-5 h-5 fill-current text-amber-500" />
+                    <Star className="w-5 h-5 fill-current text-amber-500" />
+                  </div>
+                  <span className={`text-xs font-mono block mt-1 ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    Based on {reviews.length} Genuine Feedback Records
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Leave a review interactive form */}
+            <div className={`p-6 sm:p-8 rounded-3xl border relative ${
+              darkMode ? "glassmorphism" : "glassmorphism-light shadow-md"
+            }`}>
+              <h3 className="font-display font-bold text-lg">Leave Your Review</h3>
+              <p className={`text-xs mt-1.5 ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                Submit your experience with Haider Brothers Traders. Your feedback will write directly to our Firestore node.
+              </p>
+
+              {formSuccess && (
+                <div className="mt-4 p-3 bg-green-500/10 border border-green-500/35 text-green-500 rounded-xl text-xs flex items-center space-x-2">
+                  <CheckCircle2 className="w-4 h-4 shrink-0" />
+                  <span>Review recorded in Firestore database successfully!</span>
+                </div>
+              )}
+
+              <form onSubmit={handleSubmit} className="space-y-4 mt-6">
+                {/* Star rating selector */}
+                <div className="space-y-1">
+                  <label className={`text-xs font-semibold uppercase font-mono block ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                    Your Rating:
+                  </label>
+                  <div className="flex space-x-1">
+                    {Array.from({ length: 5 }).map((_, idx) => {
+                      const ratingVal = idx + 1;
+                      return (
+                        <button
+                          key={idx}
+                          type="button"
+                          onClick={() => setNewReview({ ...newReview, rating: ratingVal })}
+                          onMouseEnter={() => setHoverRating(ratingVal)}
+                          onMouseLeave={() => setHoverRating(null)}
+                          className="p-1 transition-transform active:scale-95"
+                          title={`Rate ${ratingVal} Stars`}
+                          id={`star-btn-${ratingVal}`}
+                        >
+                          <Star
+                            className={`w-6 h-6 ${
+                              ratingVal <= (hoverRating ?? newReview.rating)
+                                ? "text-amber-500 fill-current"
+                                : "text-slate-400 dark:text-slate-600"
+                            }`}
+                          />
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Name field */}
+                <div className="space-y-1">
+                  <label className={`text-xs font-semibold uppercase font-mono block ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                    Full Name
+                  </label>
+                  <input
+                    type="text"
+                    required
+                    placeholder="e.g. Hammad Butt"
+                    value={newReview.name}
+                    onChange={(e) => setNewReview({ ...newReview, name: e.target.value })}
+                    className={`w-full p-3 rounded-xl text-sm border focus:ring-2 focus:ring-brand-orange focus:outline-none transition-all ${
+                      darkMode
+                        ? "bg-black/40 border-white/10 text-white placeholder-slate-500"
+                        : "bg-white border-slate-200 text-slate-900 placeholder-slate-400"
+                    }`}
+                    id="review-name-input"
+                  />
+                </div>
+
+                {/* Feedback text */}
+                <div className="space-y-1">
+                  <label className={`text-xs font-semibold uppercase font-mono block ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                    Your Message
+                  </label>
+                  <textarea
+                    required
+                    rows={3}
+                    placeholder="Describe your tire purchase, prices, or alignment support experience..."
+                    value={newReview.text}
+                    onChange={(e) => setNewReview({ ...newReview, text: e.target.value })}
+                    className={`w-full p-3 rounded-xl text-sm border focus:ring-2 focus:ring-brand-orange focus:outline-none transition-all ${
+                      darkMode
+                        ? "bg-black/40 border-white/10 text-white placeholder-slate-500"
+                        : "bg-white border-slate-200 text-slate-900 placeholder-slate-400"
+                    }`}
+                    id="review-text-input"
+                  />
+                </div>
+
+                {/* Submit button */}
+                <button
+                  type="submit"
+                  className="w-full bg-brand-orange hover:bg-brand-orange-dark text-white font-bold py-3.5 rounded-xl text-sm shadow-md shadow-brand-orange/20 transition-all hover:-translate-y-0.5"
+                  id="submit-review-btn"
+                >
+                  Post Review Onto Feed
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/TireCard.tsx

@@ -0,0 +1,139 @@
+import { motion } from "motion/react";
+import { MessageSquare, ShieldCheck, Compass, Eye } from "lucide-react";
+import { TireProduct, BUSINESS_INFO } from "../data";
+
+interface TireCardProps {
+  tire: TireProduct;
+  darkMode: boolean;
+  onSelect: (tire: TireProduct) => void;
+  key?: string;
+}
+
+export default function TireCard({ tire, darkMode, onSelect }: TireCardProps) {
+  // Format WhatsApp Link
+  const waPreFilledText = `Hello Haider Brothers, I want price & stock for ${tire.name} (Size: ${tire.size})`;
+  const encodedText = encodeURIComponent(waPreFilledText);
+  const waLink = `${BUSINESS_INFO.whatsappUrl}?text=${encodedText}`;
+
+  // Get brand indicator styling
+  const isAutogrip = tire.brand.toLowerCase() === "autogrip";
+
+  return (
+    <motion.div
+      layout
+      initial={{ opacity: 0, scale: 0.95 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.95 }}
+      whileHover={{ y: -6, transition: { duration: 0.2 } }}
+      transition={{ duration: 0.3 }}
+      className={`relative rounded-3xl overflow-hidden flex flex-col justify-between border transition-all duration-300 group ${
+        darkMode
+          ? "bg-[#1c1c24] border-white/5 hover:border-brand-orange/40 shadow-xl shadow-black/20"
+          : "bg-white border-slate-100/90 hover:border-brand-orange/40 shadow-md shadow-slate-100"
+      }`}
+    >
+      {/* Glow highlight on hover */}
+      <div className="absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-transparent via-brand-orange/0 to-transparent group-hover:via-brand-orange/70 transition-all duration-500"></div>
+
+      {/* Card Header Media area */}
+      <div className="relative aspect-video overflow-hidden bg-slate-900 group">
+        {/* Dynamic Image with Lazy Load */}
+        <img
+          src={tire.image}
+          alt={tire.name}
+          loading="lazy"
+          className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 brightness-95"
+          referrerPolicy="no-referrer"
+        />
+
+        {/* Shadow overlays */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-black/30 pointer-events-none"></div>
+
+        {/* Top-row Glass badges */}
+        <div className="absolute top-3 left-3 right-3 flex justify-between items-center">
+          <span className="backdrop-blur-md bg-black/50 text-white border border-white/10 text-[10px] font-mono font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider">
+            {tire.badge}
+          </span>
+          <span className="backdrop-blur-md bg-brand-orange/90 text-white text-[10px] font-mono font-bold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm shadow-brand-orange/20">
+            {tire.size}
+          </span>
+        </div>
+
+        {/* Brand Label block (Bottom-left absolute overlay over media) */}
+        <div className="absolute bottom-3 left-3 flex items-center space-x-1.5 backdrop-blur-md bg-black/60 px-2.5 py-1 rounded-lg border border-white/5 text-white">
+          <span className="text-xs">⚙️</span>
+          <span className={`text-xs font-display font-extrabold tracking-wider uppercase ${isAutogrip ? "text-brand-orange-light" : "text-white"}`}>
+            {tire.brand}
+          </span>
+        </div>
+      </div>
+
+      {/* Card Detail Content */}
+      <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
+        <div>
+          {/* Tire Name */}
+          <h4 className={`font-display text-lg font-bold tracking-tight leading-snug group-hover:text-brand-orange transition-colors ${
+            darkMode ? "text-white" : "text-slate-900"
+          }`}>
+            {tire.name}
+          </h4>
+
+          {/* Quick specs / Description */}
+          <p className={`text-xs mt-1.5 leading-relaxed line-clamp-2 ${
+            darkMode ? "text-slate-400" : "text-slate-500"
+          }`}>
+            {tire.description}
+          </p>
+
+          {/* Core Feature highlight badge */}
+          <div className={`mt-3 flex items-center space-x-1.5 text-xs font-semibold ${
+            darkMode ? "text-slate-300" : "text-slate-700"
+          }`}>
+            <Compass className="w-3.5 h-3.5 text-brand-orange shrink-0" />
+            <span className="truncate">{tire.feature}</span>
+          </div>
+        </div>
+
+        {/* Price & Action row */}
+        <div className="pt-4 border-t border-black/5 dark:border-white/5">
+          <div className="flex items-baseline justify-between mb-4">
+            <span className={`text-[10px] uppercase font-mono tracking-wider ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+              Dealer Net Price
+            </span>
+            <span className="text-brand-orange font-display text-xl font-extrabold tracking-tight">
+              PKR {tire.price.toLocaleString()}
+            </span>
+          </div>
+
+          <div className="grid grid-cols-5 gap-2">
+            {/* Quick Specs Quickview Button */}
+            <button
+              onClick={() => onSelect(tire)}
+              className={`col-span-2 flex items-center justify-center p-3 rounded-xl transition-all ${
+                darkMode
+                  ? "bg-white/5 hover:bg-white/10 border border-white/5 text-slate-300 hover:text-white"
+                  : "bg-slate-100 hover:bg-slate-200 border border-slate-200/50 text-slate-700 hover:text-slate-950"
+              }`}
+              title="View Specifications"
+              id={`quickview-${tire.id}`}
+            >
+              <Eye className="w-4.5 h-4.5" />
+            </button>
+
+            {/* WhatsApp Enquiry Button */}
+            <a
+              href={waLink}
+              target="_blank"
+              rel="noreferrer referrer"
+              className="col-span-3 flex items-center justify-center space-x-1.5 bg-green-600 hover:bg-green-500 text-white py-3 px-3 rounded-xl text-xs font-bold transition-all hover:shadow-md hover:shadow-green-500/10"
+              id={`whatsapp-enquiry-${tire.id}`}
+            >
+              <MessageSquare className="w-4.5 h-4.5 shrink-0" />
+              <span>Quick Enquiry</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}

src/components/VehicleFitmentWidget.tsx

@@ -0,0 +1,296 @@
+import { useState } from "react";
+import { Search, Car, HelpCircle, ArrowRight, MessageSquare, CheckCircle } from "lucide-react";
+import { PAK_CAR_FITMENTS, CarFitment } from "../lib/tireService";
+import { BUSINESS_INFO } from "../data";
+
+interface VehicleFitmentWidgetProps {
+  darkMode: boolean;
+  onFilterSize: (size: string) => void;
+}
+
+export default function VehicleFitmentWidget({ darkMode, onFilterSize }: VehicleFitmentWidgetProps) {
+  const [selectedMake, setSelectedMake] = useState<string>("");
+  const [selectedModel, setSelectedModel] = useState<string>("");
+  const [selectedVariant, setSelectedVariant] = useState<any>(null);
+  const [typedSearch, setTypedSearch] = useState<string>("");
+
+  // Get models for selected make
+  const availableModels = selectedMake
+    ? PAK_CAR_FITMENTS.filter((f) => f.make.toLowerCase() === selectedMake.toLowerCase())
+    : [];
+
+  // Handle Make changes
+  const handleMakeChange = (make: string) => {
+    setSelectedMake(make);
+    setSelectedModel("");
+    setSelectedVariant(null);
+  };
+
+  // Handle Model changes
+  const handleModelChange = (modelName: string) => {
+    setSelectedModel(modelName);
+    const fitment = availableModels.find((m) => m.model.toLowerCase() === modelName.toLowerCase());
+    if (fitment && fitment.variants.length > 0) {
+      setSelectedVariant(fitment.variants[0]);
+    } else {
+      setSelectedVariant(null);
+    }
+  };
+
+  // Quick auto-search matching
+  const filteredSearchFitments = typedSearch.trim()
+    ? PAK_CAR_FITMENTS.flatMap((fit) => 
+        fit.variants.map((v) => ({
+          make: fit.make,
+          model: fit.model,
+          variantName: v.name,
+          engine: v.engine,
+          size: v.recommendedSize
+        }))
+      ).filter((item) => 
+        `${item.make} ${item.model} ${item.variantName}`.toLowerCase().includes(typedSearch.toLowerCase())
+      ).slice(0, 4)
+    : [];
+
+  const handleSelectQuickMatch = (item: any) => {
+    setSelectedMake(item.make);
+    setSelectedModel(item.model);
+    const fitObj = PAK_CAR_FITMENTS.find(f => f.make === item.make && f.model === item.model);
+    const varObj = fitObj?.variants.find(v => v.name === item.variantName);
+    setSelectedVariant(varObj || null);
+    setTypedSearch("");
+  };
+
+  return (
+    <div className={`p-6 sm:p-8 rounded-3xl border transition-all duration-300 hover:scale-[1.005] hover:border-brand-orange/30 ${
+      darkMode ? "glassmorphism box-glow hover:shadow-[0_0_25px_rgba(255,85,0,0.25)]" : "glassmorphism-light shadow-xl hover:shadow-2xl"
+    }`}>
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
+        <div>
+          <span className="text-xs font-mono font-bold tracking-widest text-brand-orange uppercase">
+            ⚡ Fitment Recommendations Guide
+          </span>
+          <h3 className="text-xl sm:text-2xl font-display font-bold mt-1 tracking-tight">
+            Find Recommended Tyre Size by Vehicle model
+          </h3>
+          <p className={`text-xs mt-1 ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+            Configure your car's profile to extract the certified OEM tire dimensions immediately.
+          </p>
+        </div>
+        
+        <div className="flex items-center space-x-2 text-xs font-mono bg-brand-orange/5 text-brand-orange px-3 py-1.5 rounded-xl border border-brand-orange/10 self-start md:self-auto">
+          <Car className="w-3.5 h-3.5" />
+          <span>Pakistan Specs Database</span>
+        </div>
+      </div>
+
+      {/* Interactive Tabs */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Left Side: Selectors */}
+        <div className="space-y-4">
+          {/* Quick Search Input */}
+          <div className="relative">
+            <span className={`text-xs font-mono font-semibold block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+              Search Car Name (e.g. 'Corolla', 'Civic', 'Alto')
+            </span>
+            <div className="relative">
+              <input
+                type="text"
+                placeholder="Type car name..."
+                value={typedSearch}
+                onChange={(e) => setTypedSearch(e.target.value)}
+                className={`w-full p-3 pl-10 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none ${
+                  darkMode ? "bg-black/40 border-white/10 text-white placeholder-slate-500" : "bg-white border-slate-200 text-slate-800 placeholder-slate-400"
+                }`}
+                id="car-search-input"
+              />
+              <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
+            </div>
+
+            {/* Auto-suggest results */}
+            {filteredSearchFitments.length > 0 && (
+              <div className={`absolute left-0 right-0 mt-1.5 rounded-xl border p-2 z-10 shadow-2xl ${
+                darkMode ? "bg-[#1c1c24] border-white/10" : "bg-white border-slate-200"
+              }`}>
+                {filteredSearchFitments.map((fit, idx) => (
+                  <button
+                    key={idx}
+                    type="button"
+                    onClick={() => handleSelectQuickMatch(fit)}
+                    className={`w-full text-left px-3 py-2 rounded-lg text-xs flex justify-between items-center transition-all ${
+                      darkMode ? "hover:bg-white/5 text-slate-200" : "hover:bg-slate-50 text-slate-800"
+                    }`}
+                  >
+                    <div>
+                      <span className="font-bold text-brand-orange">{fit.make}</span> {fit.model} <span className="text-slate-400">({fit.variantName})</span>
+                    </div>
+                    <span className="font-mono text-[10px] bg-slate-500/10 px-2 py-0.5 rounded text-brand-orange font-bold">
+                      {fit.size}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            {/* Make Selector */}
+            <div>
+              <label className={`text-xs font-mono font-semibold block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                Select Brand (Make)
+              </label>
+              <select
+                value={selectedMake}
+                onChange={(e) => handleMakeChange(e.target.value)}
+                className={`w-full p-3 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none transition-all ${
+                  darkMode ? "bg-black/40 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+                id="vehicle-make-select"
+              >
+                <option value="">-- Choose Make --</option>
+                <option value="toyota">Toyota Pakistan</option>
+                <option value="honda">Honda Atlas</option>
+                <option value="suzuki">Pak Suzuki</option>
+                <option value="kia">KIA Lucky Motors</option>
+                <option value="hyundai">Hyundai Nishat</option>
+                <option value="changan">Changan Pakistan</option>
+                <option value="mg">MG Motors</option>
+                <option value="haval">Haval Pakistan</option>
+                <option value="proton">Proton Pakistan</option>
+                <option value="dfsk">DFSK Motors</option>
+              </select>
+            </div>
+
+            {/* Model Selector */}
+            <div>
+              <label className={`text-xs font-mono font-semibold block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                Select Model
+              </label>
+              <select
+                value={selectedModel}
+                disabled={!selectedMake}
+                onChange={(e) => handleModelChange(e.target.value)}
+                className={`w-full p-3 rounded-xl text-xs border focus:ring-1 focus:ring-brand-orange focus:outline-none transition-all disabled:opacity-50 ${
+                  darkMode ? "bg-black/40 border-white/10 text-white" : "bg-white border-slate-200 text-slate-800"
+                }`}
+                id="vehicle-model-select"
+              >
+                <option value="">-- Choose Model --</option>
+                {Array.from(new Set(availableModels.map((m) => m.model))).map((model) => (
+                  <option key={model} value={model.toLowerCase()}>
+                    {model}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Variant Selector */}
+          {selectedModel && (
+            <div>
+              <label className={`text-xs font-mono font-semibold block mb-1 px-1 ${darkMode ? "text-slate-300" : "text-slate-600"}`}>
+                Select Car Variant / Engine Specifications
+              </label>
+              <div className="flex flex-wrap gap-2">
+                {availableModels
+                  .find((m) => m.model.toLowerCase() === selectedModel.toLowerCase())
+                  ?.variants.map((v) => (
+                    <button
+                      key={v.name}
+                      onClick={() => setSelectedVariant(v)}
+                      className={`px-3 py-2 rounded-xl text-xs font-medium border transition-all ${
+                        selectedVariant?.name === v.name
+                          ? "border-brand-orange text-brand-orange bg-brand-orange/10 font-bold"
+                          : darkMode
+                          ? "border-white/5 bg-white/5 text-slate-300 hover:border-white/20"
+                          : "border-slate-200 bg-white text-slate-700 hover:border-slate-300"
+                      }`}
+                      id={`variant-btn-${v.name.replace(/\s+/g, '-').toLowerCase()}`}
+                    >
+                      {v.name} <span className="text-[10px] opacity-75">({v.engine})</span>
+                    </button>
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right Side: Recommendation Results Card container */}
+        <div className="flex flex-col justify-between h-full">
+          {selectedVariant ? (
+            <div className={`p-5 rounded-2xl border flex flex-col justify-between h-full bg-linear-to-br transition-all duration-300 ${
+              darkMode ? "bg-white/5 border-white/10 text-white" : "bg-slate-100/70 border-slate-200 text-slate-900"
+            }`}>
+              <div>
+                <div className="flex justify-between items-start mb-4">
+                  <div>
+                    <span className="text-[10px] font-mono tracking-widest text-brand-orange uppercase font-bold">
+                      PROFILING MATCH FOUND
+                    </span>
+                    <h4 className="font-display font-black text-lg sm:text-l tracking-tight mt-0.5 uppercase">
+                      {selectedMake} {selectedModel}
+                    </h4>
+                    <p className={`text-xs ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                      Variant: <span className="font-semibold text-brand-orange">{selectedVariant.name}</span> ({selectedVariant.engine})
+                    </p>
+                  </div>
+                  <span className="p-2 rounded-lg bg-green-500/10 text-green-500">
+                    <CheckCircle className="w-5 h-5" />
+                  </span>
+                </div>
+
+                <div className={`p-4 rounded-xl text-center border my-3 ${
+                  darkMode ? "bg-black/30 border-white/5" : "bg-white border-slate-200"
+                }`}>
+                  <span className={`text-[11px] font-mono block ${darkMode ? "text-slate-400" : "text-slate-500"}`}>
+                    RECOMMENDED TYRE SIZE
+                  </span>
+                  <span className="font-display font-black text-2xl sm:text-3xl tracking-wider text-brand-orange block my-1">
+                    {selectedVariant.recommendedSize}
+                  </span>
+                  <span className={`text-[10px] block leading-normal ${darkMode ? "text-slate-500" : "text-slate-400"}`}>
+                    Spec matches the exact manufacturing profile for road pressure distribution & safety rules of Lahore.
+                  </span>
+                </div>
+              </div>
+
+              {/* Practical CTAs */}
+              <div className="flex flex-col sm:flex-row gap-2 mt-4">
+                <button
+                  onClick={() => onFilterSize(selectedVariant.recommendedSize)}
+                  className="flex-1 bg-gradient-to-r from-brand-orange to-red-600 hover:from-brand-orange hover:to-red-700 text-white font-bold p-2.5 rounded-xl text-xs flex items-center justify-center space-x-1 shadow-md hover:shadow-lg transition-all"
+                  id="fitment-search-match-btn"
+                >
+                  <span>Filter Catalogue for this Size</span>
+                  <ArrowRight className="w-3.5 h-3.5" />
+                </button>
+
+                <a
+                  href={`${BUSINESS_INFO.whatsappUrl}?text=Asalam-o-ALaykum%20Haider%20Brothers%20Traders,%20I'm%20looking%20for%20tyres%20in%20specification%20size%20${selectedVariant.recommendedSize}%20for%20my%20${selectedMake}%20${selectedModel}%20${selectedVariant.name}%20car.%20What%20brands%20are%20available%20now?`}
+                  target="_blank"
+                  rel="noreferrer referrer"
+                  className="bg-green-600 hover:bg-green-700 text-white font-bold px-3 py-2.5 rounded-xl text-xs flex items-center justify-center space-x-1 shadow-md transition-all shrink-0"
+                >
+                  <MessageSquare className="w-4 h-4" />
+                  <span>WhatsApp Query</span>
+                </a>
+              </div>
+            </div>
+          ) : (
+            <div className={`p-10 rounded-2xl border border-dashed flex flex-col items-center justify-center text-center h-full ${
+              darkMode ? "bg-white/5 border-white/10" : "bg-slate-100/50 border-slate-200"
+            }`}>
+              <span className="text-4xl animate-pulse block mb-3">🚗</span>
+              <h4 className={`font-display font-bold text-sm ${darkMode ? "text-slate-300" : "text-slate-700"}`}>
+                Select Car to Extract Fitments
+              </h4>
+              <p className={`text-xs max-w-[280px] mt-2 leading-relaxed ${darkMode ? "text-slate-500" : "text-slate-400"}`}>
+                Select brand make/model variables on the left, or query the car name to load the customized profile recommendations instantly.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/data.ts

@@ -0,0 +1,393 @@
+export interface TireProduct {
+  id: string;
+  name: string;
+  brand: string;
+  size: string;
+  feature: string;
+  price: number;
+  badge: string;
+  segment: 'hot' | 'new' | 'famous';
+  image: string;
+  description: string;
+  stock?: number;
+}
+
+export interface Review {
+  name: string;
+  rating: number;
+  text: string;
+  date: string;
+  initials: string;
+}
+
+export const BUSINESS_INFO = {
+  name: "Haider Brothers Traders",
+  rating: 4.8,
+  reviewsCount: 5,
+  phone: "+92 302 4594403",
+  phoneRaw: "+923024594403",
+  whatsappUrl: "https://wa.me/923024594403",
+  address: "36-C-1, Maulana Shaukat Ali Road, Block C-1 Faisal Town, Lahore, Punjab 54700, Pakistan",
+  locationCode: "F8G5+H9, Lahore",
+  hours: "Open 24 hours (24/7)",
+  mapIframeUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3402.1385474320295!2d74.30589377519962!3d31.476454149202534!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3919030037af462f%3A0xc479c225327c71d6!2sHaider%20Brothers%20Traders!5e0!3m2!1sen!2spk!4v1718500000000!5m2!1sen!2spk"
+};
+
+export const BRANDS = [
+  { name: "Autogrip", hasDirectAccent: true },
+  { name: "Michelin", hasDirectAccent: false },
+  { name: "Bridgestone", hasDirectAccent: false },
+  { name: "Pirelli", hasDirectAccent: false },
+  { name: "Goodyear", hasDirectAccent: false },
+  { name: "Dunlop", hasDirectAccent: false },
+  { name: "General Tire", hasDirectAccent: false },
+  { name: "Continental", hasDirectAccent: false },
+  { name: "Yokohama", hasDirectAccent: false },
+  { name: "Hankook", hasDirectAccent: false }
+];
+
+export const REVIEWS: Review[] = [
+  {
+    name: "gitsitmarketing",
+    rating: 5,
+    text: "Excellent service and quality of tires. My experience was good.",
+    date: "1 month ago",
+    initials: "GM"
+  },
+  {
+    name: "M Bilal",
+    rating: 5,
+    text: "My experience was great with haider brother traders. They provided me good service and high quality product.",
+    date: "2 months ago",
+    initials: "MB"
+  },
+  {
+    name: "Muhammad Ramzan",
+    rating: 5,
+    text: "Great quality and service.",
+    date: "3 months ago",
+    initials: "MR"
+  },
+  {
+    name: "Zain Ul Abideen",
+    rating: 4.5,
+    text: "Very reliable place for 24/7 emergencies. Broke down late at night, and they fixed my alignment and tires quickly.",
+    date: "4 months ago",
+    initials: "ZA"
+  },
+  {
+    name: "Ahmad Raza",
+    rating: 5,
+    text: "Genuine products at reasonable wholesale-level rates in Lahore. Highly recommended!",
+    date: "5 months ago",
+    initials: "AR"
+  }
+];
+
+export const TIRE_PRODUCTS: TireProduct[] = [
+  // --- HOT SELLING (9 products) ---
+  {
+    id: "hot-1",
+    name: "Autogrip F107 Comfort",
+    brand: "Autogrip",
+    size: "185/65R14",
+    feature: "All-season wet stability & 185/65R14 smooth ride",
+    price: 12500,
+    badge: "Hot Selling",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Budget-friendly comfort tyre optimized for classic sedan and hatchback daily driving. Low rolling noise, enhanced tread compound, and great drainage to prevent aquaplaning in Lahore's heavy monsoon seasons. Highly compatible with Corolla and older Civic variants."
+  },
+  {
+    id: "hot-2",
+    name: "Dunlop SP Touring T1",
+    brand: "Dunlop",
+    size: "175/65R15",
+    feature: "Extra-durable rubber & premium fuel saver - 175/65R15",
+    price: 14800,
+    badge: "Best Seller",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Highly stable and optimized touring compound engineered to withstand rough tarmac, heatwaves, and long mileage. Outstanding choice for Toyota Yaris, Honda City, and Suzuki Swift owners in Pakistan who value long-lasting performance and maximum fuel economy."
+  },
+  {
+    id: "hot-3",
+    name: "Yokohama BluEarth-Es ES32",
+    brand: "Yokohama",
+    size: "195/65R15",
+    feature: "Premium silica compound & low noise - 195/65R15",
+    price: 21500,
+    badge: "Premium Hot",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Premium JDM quiet tire with state-of-the-art nanocomposite silica compound. Delivers superior wet/dry road grip, luxurious shock-absorption over Lahore potholes, and unmatched stability at high speeds for modern Honda Civic, Toyota Corolla, and luxury hybrid vehicles."
+  },
+  {
+    id: "hot-4",
+    name: "General Tire Euro Glide",
+    brand: "General Tire",
+    size: "165/70R14",
+    feature: "Locally optimized rugged tread - 165/70R14",
+    price: 9800,
+    badge: "Budget King",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Genuine local heavy-duty tire manufactured explicitly for Pakistani hot climates and uneven street grids. Strong side casing provides extreme puncture protection that is loved by Suzuki Cultus, Wagon R, and JDM imported hatchback drivers in Punjab."
+  },
+  {
+    id: "hot-5",
+    name: "Bridgestone Ecopia EP150",
+    brand: "Bridgestone",
+    size: "185/65R15",
+    feature: "Ultra eco-friendly, fuel-efficiency design - 185/65R15",
+    price: 18200,
+    badge: "Hot Selling",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Advanced low-rolling technology reduces carbon footprint while saving up to 6% in fuel fuel-consumption on daily commutes. Solid wet braking performance makes this Ecopia series a prime product for Toyota Yaris, Honda City, and Suzuki Swift."
+  },
+  {
+    id: "hot-6",
+    name: "Mirage MR-162 Utility",
+    brand: "General Tire", // Classifying Mirage as premium general import or general tier
+    size: "145/80R13",
+    feature: "Affordable Alto spec, long durability - 145/80R13",
+    price: 8300,
+    badge: "Alto Spec",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Extremely affordable imported tire featuring deep treads and extra-thick sidewalls designed to survive bad terrain. Specifically matches the highly popular Suzuki Alto, Daihatsu Mira, and generic 660cc imported Japanese kei cars in Lahore."
+  },
+  {
+    id: "hot-7",
+    name: "Dunlop ECO EC201 Eco-Drive",
+    brand: "Dunlop",
+    size: "145/80R13",
+    feature: "Premium Alto comfort & safety grip - 145/80R13",
+    price: 10500,
+    badge: "Alto Premium",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "The ultimate premium radial upgrade for the Suzuki Alto and Wagon R community. Features ultra-quiet rolling technology, outstanding grip on dry asphalt, and superior control under emergency braking at tight city crossings."
+  },
+  {
+    id: "hot-8",
+    name: "Yokohama Advan dB V552",
+    brand: "Yokohama",
+    size: "215/55R17",
+    feature: "Extreme noise reduction & supreme cushion - 215/55R17",
+    price: 38000,
+    badge: "Ultra Luxury",
+    segment: "hot",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Incredibly quiet premium tyre designed for executive luxury. Uses Yokohama's signature chemical compound to cancel asphalt resonance. Provides a cloud-like ride for Honda Civic Oriel/RS, Toyota Corolla Altis Grande, and imported Honda Vezel models."
+  },
+  {
+    id: "hot-9",
+    name: "Michelin Primacy 4 Premium",
+    brand: "Michelin",
+    size: "215/60R16",
+    feature: "World-class quiet touring & wet defense - 215/60R16",
+    price: 44500,
+    badge: "Elite Safety",
+    segment: "hot",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Industry-standard for safety and comfort. Even after extensive mileage, its patented tire pattern drains water with consistent grip. Excellent match for high-profile luxury sedans like Honda Accord, Toyota Camry, and customized JDM vehicles."
+  },
+  
+  // --- NEW BRANDS & ARRIVALS (8 products) ---
+  {
+    id: "new-1",
+    name: "Autogrip SUV A606 Sport",
+    brand: "Autogrip",
+    size: "235/60R18",
+    feature: "Rugged road tracking & heavy SUV compound - 235/60R18",
+    price: 22000,
+    badge: "New Arrival",
+    segment: "new",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Rugged block styling and dual steel belts for midsize crossovers. Delivers long tread life, off-road traction, and stable high-speed tracking on Ring Road Lahore. Excellent fit for KIA Sportage, Hyundai Tucson, and Proton X70."
+  },
+  {
+    id: "new-2",
+    name: "Yokohama Geolandar A/T G015",
+    brand: "Yokohama",
+    size: "265/65R17",
+    feature: "Extreme double-shield all-terrain - 265/65R17",
+    price: 46000,
+    badge: "New Arrival",
+    segment: "new",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Designed for full-sized off-road SUVs. Offers severe snow-rated traction blocks and triple-polymer compound to resist extreme cuts/chipping on rough gravel and inter-city routes. Ideal for Toyota Hilux Revo, Toyota Fortuner, and Prado owners."
+  },
+  {
+    id: "new-3",
+    name: "Bridgestone Dueler H/P Sport",
+    brand: "Bridgestone",
+    size: "225/55R18",
+    feature: "High-horsepower highway response - 225/55R18",
+    price: 39500,
+    badge: "Premium SUV",
+    segment: "new",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Outstanding summer tire built to extract extreme cornering response and stable wet traction for premium crossover profiles. Perfect OEM spec for KIA Sportage, Hyundai Tucson, and MG HS sport package upgrades."
+  },
+  {
+    id: "new-4",
+    name: "Michelin Pilot Sport 5 Precision",
+    brand: "Michelin",
+    size: "225/45R17",
+    feature: "Max sport handling & quick track response - 225/45R17",
+    price: 35000,
+    badge: "New Arrival",
+    segment: "new",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Experience incredible luxury precise control. Features Dynamic Response technology for high cornering precision and immediate dry track response. Perfect premium upgrade for modern luxury sedans and modified sports custom vehicles."
+  },
+  {
+    id: "new-5",
+    name: "Continental PremiumContact 7 Pro",
+    brand: "Continental",
+    size: "195/55R15",
+    feature: "Adaptive contact patch & top handling - 195/55R15",
+    price: 19500,
+    badge: "German Tech",
+    segment: "new",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Adaptive tread design matches itself dynamically to wet or dry conditions for steady, confident braking. Brings elite European safety limits, low vibration, and precise handling to local JDM imports and sport sedans."
+  },
+  {
+    id: "new-6",
+    name: "General Tire Grabber AT3",
+    brand: "General Tire",
+    size: "265/65R17",
+    feature: "All-terrain dual action traction - 265/65R17",
+    price: 28500,
+    badge: "New Arrival",
+    segment: "new",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "High-traction all-terrain tyre with aggressive self-cleaning blocks. Developed specifically for SUV and pickup truck enthusiasts looking for tough off-road capability combined with stable highway dynamics inside Pakistan."
+  },
+  {
+    id: "new-7",
+    name: "Pirelli Cinturato P7 Verde",
+    brand: "Pirelli",
+    size: "205/60R16",
+    feature: "Eco-impact compound & silent highway ride - 205/60R16",
+    price: 24500,
+    badge: "Italian Craft",
+    segment: "new",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "High-end touring tire featuring hybrid polymer materials. Reduced tire weight and rolling resistance lead to immense fuel consumption cuts and lower road vibrations. Universally fits Honda Civic, Toyota Corolla, and imported JDM hatchbacks."
+  },
+  {
+    id: "new-8",
+    name: "Autogrip EcoSaver Radial",
+    brand: "Autogrip",
+    size: "165/65R14",
+    feature: "Fuel conscious hatchback radial - 165/65R14",
+    price: 11200,
+    badge: "New Arrival",
+    segment: "new",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Optimized radial tire designed with a robust eco-compound that evenly distributes vehicle weight. Extremely budget-friendly, delivering a quieter ride and reliable long treadwear for Suzuki Wagon R and imported Japanese JDM hatchbacks."
+  },
+
+  // --- BESTSELLING GLOBAL / FAMOUS (8 products) ---
+  {
+    id: "fam-1",
+    name: "Dunlop Grandtrek AT20 Premium",
+    brand: "Dunlop",
+    size: "265/60R18",
+    feature: "4x4 executive tire & heavy highway duty - 265/60R18",
+    price: 48000,
+    badge: "Famous",
+    segment: "famous",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Wholesale-level standard luxury SUV highway tire. Combines quiet road manners with high structural integrity capable of carrying extreme loads. Highly popular for premium Toyota Fortuner, Land Cruiser Prado, and high-end 4x4 trucks."
+  },
+  {
+    id: "fam-2",
+    name: "General Tire Euro Star Radial",
+    brand: "General Tire",
+    size: "175/70R13",
+    feature: "Classic local design, unbeatable cost - 175/70R13",
+    price: 8900,
+    badge: "Famous Classic",
+    segment: "famous",
+    image: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "The most famous local tire model of Pakistan. Engineered specifically to survive deep potholes and scorching heat. Highly cost-effective and dependable daily workhorse for Suzuki Mehran, Cultus, Wagon R, and small commercial taxis in Lahore."
+  },
+  {
+    id: "fam-3",
+    name: "Yokohama Geolandar CV G058",
+    brand: "Yokohama",
+    size: "215/70R16",
+    feature: "Grand crossover luxury silent touring - 215/70R16",
+    price: 26000,
+    badge: "Famous",
+    segment: "famous",
+    image: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Engineered specifically to transform midsize crossover rides. Provides supreme dry/wet braking safety with Yokohama's proprietary micro-silica compound to drastically reduce interior cabin vibrations and low frequency hums. Fits Toyota RAV4, Kia Sportage base, and Tucson imports."
+  },
+  {
+    id: "fam-4",
+    name: "Pirelli P Zero High Performance",
+    brand: "Pirelli",
+    size: "245/40R19",
+    feature: "Precision sports tracking & F1 DNA - 245/40R19",
+    price: 58000,
+    badge: "Elite Track",
+    segment: "famous",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Legendary sports tire built using genuine Formula 1 racetrack heritage materials. Implements severe cornering stiffeners and specialized compound ratios for incredible braking under extreme speed. Ideal for Mercedes C-Class, E-Class, Audi A6, and sports cars."
+  },
+  {
+    id: "fam-5",
+    name: "Dunlop Sport Maxx RT2 Premium",
+    brand: "Dunlop",
+    size: "225/40R18",
+    feature: "Motorsport grip & short braking - 225/40R18",
+    price: 32000,
+    badge: "Famous Sport",
+    segment: "famous",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Bridges the gap between street driving and track-level responsiveness. Dual compound notches adapt dynamically to high cornering heat to preserve high traction limits. Excellent choice for custom Civic upgrades, Audi A3, and Mercedes models."
+  },
+  {
+    id: "fam-6",
+    name: "Goodyear Eagle F1 Asymmetric 6",
+    brand: "Goodyear",
+    size: "235/35R19",
+    feature: "Asphalt adaptation & high force braking - 235/35R19",
+    price: 42000,
+    badge: "Famous",
+    segment: "famous",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Highly adaptive contact profile reacts instantly to rapid weight shifts. Patented carbon black compounds offer outstanding asphalt feedback and top-level wet braking metrics. Perfectly matches premium sports packages and high-performance sedans."
+  },
+  {
+    id: "fam-7",
+    name: "Hankook Ventus S1 evo3 Elite",
+    brand: "Hankook",
+    size: "225/40R18",
+    feature: "OE-grade precise tracking - 225/40R18",
+    price: 30000,
+    badge: "Famous",
+    segment: "famous",
+    image: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Original Equipment (OE) selected by Audi, BMW, and Mercedes-Benz. Employs advanced aramid reinforcement belts to prevent tread expansion, maximizing speed stability and minimizing road vibration noise. Elite high-speed passenger car tire."
+  },
+  {
+    id: "fam-8",
+    name: "Autogrip Winter Grip W609 Radial",
+    brand: "Autogrip",
+    size: "195/65R15",
+    feature: "Snow/mud traction & deep siped wet protection",
+    price: 14000,
+    badge: "Famous",
+    segment: "famous",
+    image: "/src/assets/images/winter_tire_1781509513584.jpg",
+    description: "Featuring deep self-cleaning channels and microscopic sipes, this model delivers superior road traction during wet rainy days and heavy sludge. Highly recommended for winters and mountainous tourism in Murree, Swat, or Gilgit. Matches Corolla/Civic sizing."
+  }
+];

src/index.css

@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;450;550;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Space Grotesk", sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --color-brand-orange: #ff5500;
+  --color-brand-dark: #121214;
+  --color-brand-card: #1c1c24;
+}
+
+/* Custom styles for smooth scroll & glow effects */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+}
+
+.text-glow {
+  text-shadow: 0 0 10px rgba(255, 85, 0, 0.4);
+}
+
+.box-glow {
+  box-shadow: 0 0 20px rgba(255, 85, 0, 0.15);
+}
+
+.glassmorphism {
+  background: rgba(28, 28, 36, 0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.glassmorphism-light {
+  background: rgba(255, 255, 255, 0.75);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+/* Custom styled scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: #121214;
+}
+::-webkit-scrollbar-thumb {
+  background: #2a2a35;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #ff5500;
+}
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+.animate-marquee-scroll {
+  display: flex;
+  width: max-content;
+  animation: marquee 40s linear infinite;
+}
+
+.animate-spin-slow {
+  animation: spin 20s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes wiggle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-8deg); }
+  75% { transform: rotate(8deg); }
+}
+
+.animate-wiggle {
+  animation: wiggle 1s ease-in-out infinite;
+}
+
+.animate-pulse-slow {
+  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}

src/lib/firebase.ts

@@ -0,0 +1,86 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore, doc, getDocFromServer } from "firebase/firestore";
+import { getStorage } from "firebase/storage";
+import firebaseConfig from "../../firebase-applet-config.json";
+
+/*
+===================================================================
+  FIREBASE CONFIGURATION GUIDE (bahaduralimunnabhai@gmail.com)
+===================================================================
+  To connect this application to your custom Firebase project:
+  
+  1. Go to Firebase Console (https://console.firebase.google.com/)
+  2. Create or select your project.
+  3. Under Project Settings -> General, add a Web App.
+  4. Copy the config object and paste it below, replacing this configuration:
+
+  const manualConfig = {
+    apiKey: "YOUR_API_KEY",
+    authDomain: "YOUR_AUTH_DOMAIN",
+    projectId: "YOUR_PROJECT_ID",
+    storageBucket: "YOUR_STORAGE_BUCKET",
+    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+    appId: "YOUR_APP_ID"
+  };
+===================================================================
+*/
+
+// Use provisioned dynamic config from setup by default
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firestore, Auth, and Storage services
+export const db = getFirestore(app, firebaseConfig.firestoreDatabaseId);
+export const auth = getAuth(app);
+export const storage = getStorage(app);
+
+// Connectivity check as requested by system verification guidelines
+export async function testConnection() {
+  try {
+    await getDocFromServer(doc(db, "test", "connection"));
+    console.log("Firebase Connection verified successfully.");
+  } catch (error) {
+    if (error instanceof Error && error.message.includes("offline")) {
+      console.error("Firebase is offline. Please check your network or configuration.");
+    } else {
+      console.log("Firebase server connectivity confirmed.", error);
+    }
+  }
+}
+
+// Fallback error handler following guidelines
+export enum OperationType {
+  CREATE = "create",
+  UPDATE = "update",
+  DELETE = "delete",
+  LIST = "list",
+  GET = "get",
+  WRITE = "write",
+}
+
+export interface FirestoreErrorInfo {
+  error: string;
+  operationType: OperationType;
+  path: string | null;
+  authInfo: {
+    userId?: string | null;
+    email?: string | null;
+    emailVerified?: boolean | null;
+  };
+}
+
+export function handleFirestoreError(error: unknown, operationType: OperationType, path: string | null) {
+  const errInfo: FirestoreErrorInfo = {
+    error: error instanceof Error ? error.message : String(error),
+    authInfo: {
+      userId: auth.currentUser?.uid || null,
+      email: auth.currentUser?.email || null,
+      emailVerified: auth.currentUser?.emailVerified || null,
+    },
+    operationType,
+    path,
+  };
+  console.error("Firestore Error Detailed: ", JSON.stringify(errInfo));
+  throw new Error(JSON.stringify(errInfo));
+}
+

src/lib/firebaseService.ts

@@ -0,0 +1,827 @@
+import { 
+  collection, 
+  getDocs, 
+  addDoc, 
+  setDoc, 
+  updateDoc, 
+  deleteDoc, 
+  doc, 
+  query, 
+  where, 
+  onSnapshot, 
+  serverTimestamp,
+  Timestamp,
+  writeBatch
+} from "firebase/firestore";
+import { 
+  signInWithEmailAndPassword, 
+  signOut, 
+  onAuthStateChanged, 
+  createUserWithEmailAndPassword,
+  User
+} from "firebase/auth";
+import { 
+  ref, 
+  uploadBytes, 
+  getDownloadURL, 
+  deleteObject 
+} from "firebase/storage";
+import { db, auth, storage, handleFirestoreError, OperationType } from "./firebase";
+
+// Collection Constant
+const COLLECTION_NAME = "products";
+
+// Fully compatible type interface satisfying both the user requested structure and frontend components
+export interface ProductDocument {
+  id: string;
+  name: string;
+  brand: string;
+  size: string;
+  price: number;
+  category: "hot-selling" | "new-brands" | "famous";
+  segment?: "hot" | "new" | "famous"; // UI fallback field
+  badge?: string; // UI fallback field
+  stock: number;
+  feature: string;
+  imageUrl: string;
+  image?: string; // UI fallback field
+  description?: string; // UI fallback field
+  createdAt?: Timestamp | Date | any;
+}
+
+// ---------------------------------------------------------
+// 9. ERROR HANDLING & NETWORK DETECTOR
+// ---------------------------------------------------------
+
+/**
+ * Checks if the system browser environment has active internet connectivity
+ */
+export function isBrowserOnline(): boolean {
+  return typeof navigator !== "undefined" ? navigator.onLine : true;
+}
+
+/**
+ * Registers a callback for changes in native internet connectivity state
+ */
+export function registerNetworkStateListener(callback: (online: boolean) => void): () => void {
+  if (typeof window === "undefined") return () => {};
+  
+  const handleOnline = () => callback(true);
+  const handleOffline = () => callback(false);
+
+  window.addEventListener("online", handleOnline);
+  window.addEventListener("offline", handleOffline);
+
+  return () => {
+    window.removeEventListener("online", handleOnline);
+    window.removeEventListener("offline", handleOffline);
+  };
+}
+
+// ---------------------------------------------------------
+// 3. CRUD FUNCTIONS (TypeScript / JavaScript Module)
+// ---------------------------------------------------------
+
+/**
+ * Fills helper values into the model object so that it remains completely compatible
+ * across the vintage UI segments & new strict collection layouts.
+ */
+function fillCompatibilityFields(data: any): any {
+  const result = { ...data };
+  
+  // Set alternative images
+  if (result.imageUrl && !result.image) {
+    result.image = result.imageUrl;
+  }
+  if (result.image && !result.imageUrl) {
+    result.imageUrl = result.image;
+  }
+  
+  // Set category/segment mapping
+  if (result.category && !result.segment) {
+    if (result.category === "hot-selling") result.segment = "hot";
+    else if (result.category === "new-brands") result.segment = "new";
+    else if (result.category === "famous") result.segment = "famous";
+  }
+  if (result.segment && !result.category) {
+    if (result.segment === "hot") result.category = "hot-selling";
+    else if (result.segment === "new") result.category = "new-brands";
+    else if (result.segment === "famous") result.category = "famous";
+  }
+
+  // Supply default badges
+  if (!result.badge) {
+    if (result.category === "hot-selling") result.badge = "Hot Selling";
+    else if (result.category === "new-brands") result.badge = "New Arrival";
+    else result.badge = "Famous";
+  }
+
+  // Fallback description
+  if (!result.description) {
+    result.description = `Premium tire profile configured for high grip and safety under high heat-cycle Pakistani road asphalt conditions.`;
+  }
+
+  // Type coercions
+  if (result.price !== undefined) result.price = Number(result.price);
+  if (result.stock !== undefined) result.stock = Number(result.stock);
+
+  return result;
+}
+
+/**
+ * Adds a new product document to Firestore 'products' collection
+ */
+export async function addProduct(productData: Omit<ProductDocument, "id">): Promise<string> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to add product. You are currently offline.");
+  }
+  const payload = fillCompatibilityFields(productData);
+  try {
+    const docRef = await addDoc(collection(db, COLLECTION_NAME), {
+      ...payload,
+      createdAt: serverTimestamp()
+    });
+    // Set ID on document itself
+    await updateDoc(docRef, { id: docRef.id });
+    return docRef.id;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, COLLECTION_NAME);
+    throw error;
+  }
+}
+
+/**
+ * Fetches all products with real-time snapshot support optionally, or via one-shot call
+ */
+export async function getAllProducts(isRetry: boolean = false): Promise<ProductDocument[]> {
+  try {
+    const q = query(collection(db, COLLECTION_NAME));
+    const querySnapshot = await getDocs(q);
+    const results: ProductDocument[] = [];
+    querySnapshot.forEach((doc) => {
+      const data = doc.data();
+      results.push(fillCompatibilityFields({ ...data, id: doc.id }) as ProductDocument);
+    });
+    
+    // Check and trigger auto-seeding if collection returns empty
+    if (results.length === 0 && !isRetry) {
+      console.log("Empty 'products' collection found. Seeding with 12 defaults.");
+      await seedDefaultProducts();
+      return await getAllProducts(true);
+    }
+    return results;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.GET, COLLECTION_NAME);
+    throw error;
+  }
+}
+
+/**
+ * Updates an existing product document
+ */
+export async function updateProduct(productId: string, updatedData: Partial<ProductDocument>): Promise<void> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to update product. You are currently offline.");
+  }
+  const payload = fillCompatibilityFields(updatedData);
+  try {
+    const docRef = doc(db, COLLECTION_NAME, productId);
+    await updateDoc(docRef, payload);
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, `${COLLECTION_NAME}/${productId}`);
+    throw error;
+  }
+}
+
+/**
+ * Deletes a product from the database
+ */
+export async function deleteProduct(productId: string): Promise<void> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to delete product. You are currently offline.");
+  }
+  try {
+    await deleteDoc(doc(db, COLLECTION_NAME, productId));
+  } catch (error) {
+    handleFirestoreError(error, OperationType.DELETE, `${COLLECTION_NAME}/${productId}`);
+    throw error;
+  }
+}
+
+/**
+ * Increases or decreases all prices in the inventory database by a given percentage.
+ * Example: bulkUpdatePrices(10) increases all rates by 10%, while bulkUpdatePrices(-5) cuts them by 5%.
+ */
+export async function bulkUpdatePrices(percentage: number): Promise<void> {
+  if (!isBrowserOnline()) {
+    throw new Error("No network connectivity. Bulk operations are disabled.");
+  }
+  try {
+    const q = query(collection(db, COLLECTION_NAME));
+    const querySnapshot = await getDocs(q);
+    
+    const batch = writeBatch(db);
+    let count = 0;
+
+    querySnapshot.forEach((document) => {
+      const data = document.data() as ProductDocument;
+      const originalPrice = Number(data.price) || 0;
+      const multiplier = 1 + (percentage / 100);
+      const newPrice = Math.round(originalPrice * multiplier);
+      
+      batch.update(doc(db, COLLECTION_NAME, document.id), { price: newPrice });
+      count++;
+    });
+
+    if (count > 0) {
+      await batch.commit();
+      console.log(`Successfully completed bulk price update on ${count} products.`);
+    }
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, `${COLLECTION_NAME}/bulkUpdate`);
+    throw error;
+  }
+}
+
+/**
+ * Returns products with stock levels strictly below the threshold value
+ */
+export async function getLowStockProducts(threshold: number = 5): Promise<ProductDocument[]> {
+  try {
+    const q = query(collection(db, COLLECTION_NAME), where("stock", "<", threshold));
+    const querySnapshot = await getDocs(q);
+    const results: ProductDocument[] = [];
+    querySnapshot.forEach((doc) => {
+      results.push(fillCompatibilityFields({ ...doc.data(), id: doc.id }));
+    });
+    return results;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.GET, COLLECTION_NAME);
+    throw error;
+  }
+}
+
+/**
+ * Searches the collection for products with matching names or manufacturer brands
+ */
+export async function searchProducts(searchQuery: string): Promise<ProductDocument[]> {
+  // Firestore does not natively support multi-field partial matching easily in client SDK,
+  // so we fetch all and apply high-performance filter locally to ensure maximum reliability and speed.
+  try {
+    const all = await getAllProducts();
+    const queryLower = searchQuery.toLowerCase().trim();
+    if (!queryLower) return all;
+    
+    return all.filter(p => 
+      p.name.toLowerCase().includes(queryLower) ||
+      p.brand.toLowerCase().includes(queryLower) ||
+      p.size.toLowerCase().includes(queryLower)
+    );
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * Filter products specifically by database category classification
+ */
+export async function filterByCategory(category: "hot-selling" | "new-brands" | "famous"): Promise<ProductDocument[]> {
+  try {
+    const q = query(collection(db, COLLECTION_NAME), where("category", "==", category));
+    const querySnapshot = await getDocs(q);
+    const results: ProductDocument[] = [];
+    querySnapshot.forEach((doc) => {
+      results.push(fillCompatibilityFields({ ...doc.data(), id: doc.id }));
+    });
+    return results;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.GET, COLLECTION_NAME);
+    throw error;
+  }
+}
+
+// ---------------------------------------------------------
+// 4. AUTHENTICATION FUNCTIONS
+// ---------------------------------------------------------
+
+/**
+ * Authenticates an administrator using standard email and password
+ */
+export async function loginAdmin(email: string, password: string): Promise<User> {
+  try {
+    const userCredential = await signInWithEmailAndPassword(auth, email, password);
+    return userCredential.user;
+  } catch (error: any) {
+    console.error("Login attempt failed:", error);
+    throw new Error(error.message || "Invalid authentication credentials.");
+  }
+}
+
+/**
+ * Standard security signout for administrators
+ */
+export async function logoutAdmin(): Promise<void> {
+  try {
+    await signOut(auth);
+  } catch (error: any) {
+    throw new Error(error.message || "Signout failed.");
+  }
+}
+
+/**
+ * Attaches a state change listener tracking authentications
+ */
+export function checkAuthState(callback: (user: User | null) => void): () => void {
+  return onAuthStateChanged(auth, (user) => {
+    callback(user);
+  });
+}
+
+/**
+ * Utility to register fresh admin personnel accounts
+ */
+export async function createAdminUser(email: string, password: string): Promise<User> {
+  try {
+    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+    return userCredential.user;
+  } catch (error: any) {
+    throw new Error(error.message || "Failed to create administrator user.");
+  }
+}
+
+// ---------------------------------------------------------
+// 5. STORAGE FUNCTIONS
+// ---------------------------------------------------------
+
+/**
+ * Uploads a tire image binary file to the Firebase Storage bucket
+ */
+export async function uploadProductImage(file: File, productName: string): Promise<string> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to upload image. Network is currently offline.");
+  }
+  try {
+    const cleanName = productName.replace(/[^a-zA-Z0-9]/g, "_").toLowerCase();
+    const timestamp = Date.now();
+    const storageRef = ref(storage, `product-images/${cleanName}_${timestamp}`);
+    
+    const snapshot = await uploadBytes(storageRef, file);
+    const downloadUrl = await getDownloadURL(snapshot.ref);
+    return downloadUrl;
+  } catch (error: any) {
+    console.error("Storage image upload failure:", error);
+    throw new Error(error.message || "Failed to store product asset image.");
+  }
+}
+
+/**
+ * Deletes standard file objects from the Firebase storage bucket using their download addresses
+ */
+export async function deleteProductImage(imageUrl: string): Promise<void> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to deleted image. Offline mode.");
+  }
+  try {
+    // Extract file reference path from firebase download URI
+    const decodedUrl = decodeURIComponent(imageUrl);
+    const relativePathStart = decodedUrl.indexOf("/o/") + 3;
+    const relativePathEnd = decodedUrl.indexOf("?alt=");
+    
+    if (relativePathStart > 2 && relativePathEnd > relativePathStart) {
+      const filePath = decodedUrl.substring(relativePathStart, relativePathEnd);
+      const fileRef = ref(storage, filePath);
+      await deleteObject(fileRef);
+    }
+  } catch (error: any) {
+    console.warn("Storage item cleanup ignored (possibly using an external image link):", error.message);
+  }
+}
+
+// ---------------------------------------------------------
+// 7. SEED DATA FUNCTION
+// ---------------------------------------------------------
+
+// Exhaustive real Pakistan market default dataset encompassing exactly 12 products
+export const DEFAULT_TIR_PRODUCTS_SEED: Omit<ProductDocument, "id">[] = [
+  // --- HOT SELLING ---
+  {
+    name: "Autogrip F107 Comfort Grip",
+    brand: "Autogrip",
+    size: "185/65R14",
+    price: 12500,
+    category: "hot-selling",
+    stock: 15,
+    feature: "All-season wet grip & stability - 185/65R14",
+    imageUrl: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Designed for premium everyday passenger cars. Delivers superior compound performance in all seasons with low road noise levels. Size: 185/65R14."
+  },
+  {
+    name: "Autogrip SUV A606 Rugged",
+    brand: "Autogrip",
+    size: "235/60R18",
+    price: 22000,
+    category: "hot-selling",
+    stock: 4, // low stock flag
+    feature: "Off-road rugged tread design - 235/60R18",
+    imageUrl: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Aggressive tread blocks and heavy-duty compound for SUVs. Provides high durability on rugged tracks, gravel, and highway driving alike. Size: 235/60R18."
+  },
+  {
+    name: "General Tire Grabber AT3",
+    brand: "General Tire",
+    size: "265/65R17",
+    price: 28500,
+    category: "hot-selling",
+    stock: 8,
+    feature: "All-terrain robust capability - 265/65R17",
+    imageUrl: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Developed to meet the needs of SUV, pick-up truck and off-road vehicle drivers who want high command and high-traction performance. Size: 265/65R17."
+  },
+  {
+    name: "Bridgestone Turanza T005",
+    brand: "Bridgestone",
+    size: "205/55R16",
+    price: 21000,
+    category: "hot-selling",
+    stock: 12,
+    feature: "Premium comfort & low noise rating - 205/55R16",
+    imageUrl: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Flagship luxury touring tire providing superior control in wet and dry conditions, with fuel efficiency optimization. Size: 205/55R16."
+  },
+
+  // --- NEW BRANDS / NEW ARRIVALS ---
+  {
+    name: "Michelin Pilot Sport 5",
+    brand: "Michelin",
+    size: "225/45R17",
+    price: 35000,
+    category: "new-brands",
+    stock: 3, // low stock flag
+    feature: "Ultra-high performance & control - 225/45R17",
+    imageUrl: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Live each driving moment to the fullest. Dynamic response technology ensures high precision handling and short braking distances. Size: 225/45R17."
+  },
+  {
+    name: "Pirelli Cinturato P7 Eco",
+    brand: "Pirelli",
+    size: "205/60R16",
+    price: 24500,
+    category: "new-brands",
+    stock: 7,
+    feature: "Eco-friendly, low rolling resistance - 205/60R16",
+    imageUrl: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Green performance luxury tire developed for modern cars. High safety levels, low fuel consumption, and eco-friendly raw materials. Size: 205/60R16."
+  },
+  {
+    name: "Yokohama Geolandar CV G058",
+    brand: "Yokohama",
+    size: "215/70R16",
+    price: 26000,
+    category: "new-brands",
+    stock: 9,
+    feature: "Crossover/SUV quiet touring - 215/70R16",
+    imageUrl: "/src/assets/images/suv_tire_1781509472580.jpg",
+    description: "Formidable wet grip with advanced CV silica compound. Designed to deliver confident handling and long wear life for modern crossovers. Size: 215/70R16."
+  },
+  {
+    name: "Continental PremiumContact 7",
+    brand: "Continental",
+    size: "195/55R15",
+    price: 19500,
+    category: "new-brands",
+    stock: 14,
+    feature: "Outstanding safety & wet braking - 195/55R15",
+    imageUrl: "/src/assets/images/comfort_tire_1781509452553.jpg",
+    description: "Experience absolute driving comfort and peace of mind. Outstanding safety on wet roads and superior wet braking efficiency. Size: 195/55R15."
+  },
+
+  // --- BESTSELLING GLOBAL / FAMOUS Products ---
+  {
+    name: "Dunlop Sport Maxx RT2",
+    brand: "Dunlop",
+    size: "225/40R18",
+    price: 32000,
+    category: "famous",
+    stock: 2, // low stock flag
+    feature: "Ultra-high performance sport traction - 225/40R18",
+    imageUrl: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Champion grip and braking performance. Motorsport-derived compound offers supreme steering precision and curve cornering. Size: 225/40R18."
+  },
+  {
+    name: "Goodyear Eagle F1 Asymmetric 6",
+    brand: "Goodyear",
+    size: "235/35R19",
+    price: 42000,
+    category: "famous",
+    stock: 11,
+    feature: "Max grip, sports performance - 235/35R19",
+    imageUrl: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Ready for anything. Adaptable contact patch ensures extreme asphalt feedback. Excellent performance in both wet and dry tracks. Size: 235/35R19."
+  },
+  {
+    name: "Hankook Ventus S1 evo3 Elite",
+    brand: "Hankook",
+    size: "225/40R18",
+    price: 30000,
+    category: "famous",
+    stock: 6,
+    feature: "Luxury sports OE high response rating - 225/40R18",
+    imageUrl: "/src/assets/images/sport_tire_1781509490802.jpg",
+    description: "Original Equipment (OE) for BMW, Audi, and Mercedes. Highlights high response speed, high durability, and lower rolling noise. Size: 225/40R18."
+  },
+  {
+    name: "Autogrip Winter Grip W609 Extreme",
+    brand: "Autogrip",
+    size: "195/65R15",
+    price: 14000,
+    category: "famous",
+    stock: 5,
+    feature: "Extreme snow & water grip traction - 195/65R15",
+    imageUrl: "/src/assets/images/winter_tire_1781509513584.jpg",
+    description: "Heavy-siped tread design that grips perfectly during heavy rain, wet mud, and cold winter situations. Ensures reliable road security. Size: 195/65R15."
+  }
+];
+
+/**
+ * Checks if the products collection is empty and fills it with 12 premium tyres if needed
+ */
+export async function seedDefaultProducts(): Promise<void> {
+  try {
+    const q = query(collection(db, COLLECTION_NAME));
+    const querySnapshot = await getDocs(q);
+    
+    if (!querySnapshot.empty) {
+      console.log("Database 'products' collection is already populated. Seeding aborted.");
+      return;
+    }
+
+    console.log("Initiating premium 12 product configurations cloud seed operation.");
+    
+    // Batch write to optimize bandwidth
+    const batch = writeBatch(db);
+    
+    for (let i = 0; i < DEFAULT_TIR_PRODUCTS_SEED.length; i++) {
+      const item = DEFAULT_TIR_PRODUCTS_SEED[i];
+      const cleanBrand = item.brand.toLowerCase().replace(/[^a-z0-9]/g, "-").replace(/-+/g, "-");
+      const customId = `seed-${cleanBrand}-${i + 1}`;
+      const payload = fillCompatibilityFields({
+        ...item,
+        id: customId,
+        createdAt: new Date()
+      });
+      
+      const docRef = doc(db, COLLECTION_NAME, customId);
+      batch.set(docRef, payload);
+    }
+    
+    await batch.commit();
+    console.log("Database seeded successfully with exactly 12 default tires!");
+  } catch (error) {
+    console.error("Failure while running cloud seeding:", error);
+  }
+}
+
+// ---------------------------------------------------------
+// 8. REAL-TIME LISTENERS
+// ---------------------------------------------------------
+
+/**
+ * Sets up a live listener on the main collections. Realizes reactive UI state
+ * updates on item modifications.
+ */
+export function onProductsSnapshot(callback: (products: ProductDocument[]) => void): () => void {
+  const q = query(collection(db, COLLECTION_NAME));
+  
+  return onSnapshot(q, (snapshot) => {
+    const results: ProductDocument[] = [];
+    snapshot.forEach((doc) => {
+      const data = doc.data();
+      results.push(fillCompatibilityFields({ ...data, id: doc.id }) as ProductDocument);
+    });
+    callback(results);
+  }, (error) => {
+    handleFirestoreError(error, OperationType.LIST, COLLECTION_NAME);
+  });
+}
+
+// ---------------------------------------------------------
+// 10. EXPORT / IMPORT FUNCTIONS
+// ---------------------------------------------------------
+
+/**
+ * Downloads the complete active database catalog as a structured JSON file instantly from the browser
+ */
+export async function exportToJSON(): Promise<void> {
+  try {
+    const allProducts = await getAllProducts();
+    const dataString = JSON.stringify(allProducts, null, 2);
+    
+    // Trigger localized file download in client runtime
+    const blob = new Blob([dataString], { type: "application/json" });
+    const fileAnchor = document.createElement("a");
+    fileAnchor.href = URL.createObjectURL(blob);
+    fileAnchor.download = `haider_brothers_products_backup_${Date.now()}.json`;
+    document.body.appendChild(fileAnchor);
+    fileAnchor.click();
+    document.body.removeChild(fileAnchor);
+  } catch (error) {
+    console.error("Export file creation error: ", error);
+    alert("Export operation encountered failures. Check network status.");
+  }
+}
+
+/**
+ * Uploads a user supplied JSON backup file, checks for duplicates, and uploads novel configurations
+ */
+export async function importFromJSON(jsonFile: File): Promise<{ imported: number; duplicates: number }> {
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to import product index while offline.");
+  }
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async (event) => {
+      try {
+        const fileContent = event.target?.result;
+        if (typeof fileContent !== "string") {
+          throw new Error("Invalid file readings.");
+        }
+        
+        const parsedData = JSON.parse(fileContent);
+        const productsToImport: any[] = Array.isArray(parsedData) ? parsedData : [parsedData];
+        
+        // Fetch existing configurations to handle duplicate prevention by names and size matching
+        const existingProducts = await getAllProducts();
+        
+        let importCount = 0;
+        let duplicateCount = 0;
+        
+        const batch = writeBatch(db);
+        
+        for (const item of productsToImport) {
+          // Normalize names & sizes check for solid uniqueness check
+          const isDuplicate = existingProducts.some(ep => 
+            ep.name.toLowerCase().trim() === item.name?.toLowerCase().trim() &&
+            ep.size.toLowerCase().trim() === item.size?.toLowerCase().trim()
+          );
+
+          if (isDuplicate) {
+            duplicateCount++;
+            continue;
+          }
+
+          const uniqueId = item.id || `imported-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+          const payload = fillCompatibilityFields({
+            ...item,
+            id: uniqueId,
+            createdAt: new Date()
+          });
+
+          const docRef = doc(db, COLLECTION_NAME, uniqueId);
+          batch.set(docRef, payload);
+          importCount++;
+        }
+
+        if (importCount > 0) {
+          await batch.commit();
+        }
+
+        resolve({ imported: importCount, duplicates: duplicateCount });
+      } catch (error: any) {
+        console.error("Failed to parse or save backup file:", error);
+        reject(new Error(error.message || "Invalid JSON or database security rules violation during upload."));
+      }
+    };
+    reader.onerror = () => reject(new Error("File read error."));
+    reader.readAsText(jsonFile);
+  });
+}
+
+// ---------------------------------------------------------
+// 11. VISITOR TRACKING & TRAFFIC METRICS
+// ---------------------------------------------------------
+
+function getOrCreateSessionId(): string {
+  if (typeof window === "undefined" || !window.sessionStorage) {
+    return "session-fallback";
+  }
+  let sid = window.sessionStorage.getItem("hb_visitor_sid");
+  if (!sid) {
+    sid = "sid-" + Math.random().toString(36).substring(2, 15) + "-" + Date.now();
+    window.sessionStorage.setItem("hb_visitor_sid", sid);
+  }
+  return sid;
+}
+
+/**
+ * Logs a standard visitor page view event into the Firestore visitors collection
+ */
+export async function logVisitorInfo(pagePath: string): Promise<void> {
+  if (typeof window === "undefined") return;
+  try {
+    const sessionId = getOrCreateSessionId();
+    const userAgent = window.navigator.userAgent || "Unknown UA";
+    const language = window.navigator.language || "en";
+    
+    // Quick OS signature parsing
+    let platform = "Other / Web";
+    const ua = userAgent.toLowerCase();
+    if (ua.includes("windows")) platform = "Windows";
+    else if (ua.includes("macintosh") || ua.includes("mac os")) platform = "macOS";
+    else if (ua.includes("android")) platform = "Android";
+    else if (ua.includes("iphone") || ua.includes("ipad")) platform = "iOS";
+    else if (ua.includes("linux")) platform = "Linux";
+
+    // Build unique document key
+    const customId = `vis-${sessionId.substring(4, 16)}-${Date.now()}`;
+    const docRef = doc(db, "visitors", customId);
+    
+    await setDoc(docRef, {
+      sessionId,
+      userAgent: userAgent.substring(0, 500),
+      platform,
+      language,
+      pagePath,
+      timestamp: serverTimestamp()
+    });
+  } catch (error) {
+    // Fail silently so analytics tracking never disrupts primary showroom client flow
+    console.warn("Analytics logging bypassed:", error);
+  }
+}
+
+export interface VisitorRecord {
+  id: string;
+  sessionId: string;
+  userAgent: string;
+  platform: string;
+  language: string;
+  pagePath: string;
+  timestamp: any;
+}
+
+/**
+ * Retrieves the sequential log of website visitation reports
+ */
+export async function getVisitorLogs(): Promise<VisitorRecord[]> {
+  try {
+    const q = query(collection(db, "visitors"));
+    const querySnapshot = await getDocs(q);
+    const results: VisitorRecord[] = [];
+    querySnapshot.forEach((doc) => {
+      const data = doc.data();
+      results.push({
+        id: doc.id,
+        sessionId: data.sessionId || "",
+        userAgent: data.userAgent || "",
+        platform: data.platform || "",
+        language: data.language || "",
+        pagePath: data.pagePath || "",
+        timestamp: data.timestamp
+      });
+    });
+    
+    // Order chronologically by descending timestamp order
+    results.sort((a, b) => {
+      const tA = a.timestamp?.seconds || 0;
+      const tB = b.timestamp?.seconds || 0;
+      return tB - tA;
+    });
+    
+    return results;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.GET, "visitors");
+    throw error;
+  }
+}
+
+/**
+ * Adds a new email address to the newsletter subscribers list in Firestore.
+ */
+export async function subscribeNewsletter(email: string): Promise<void> {
+  const collectionName = "subscribers";
+  if (!isBrowserOnline()) {
+    throw new Error("Unable to subscribe. You are currently offline.");
+  }
+  
+  const cleanEmail = email.trim().toLowerCase();
+  const emailRegex = /^[^@]+@[^@]+\.[^@]+$/;
+  if (!emailRegex.test(cleanEmail)) {
+    throw new Error("Please present a valid email format.");
+  }
+
+  try {
+    // Build a secure document ID based on the email (replaces special characters) matching the rules regex limit.
+    const customId = `sub-${cleanEmail.replace(/[^a-zA-Z0-9_-]/g, "_")}`.substring(0, 128);
+    const docRef = doc(db, collectionName, customId);
+    
+    await setDoc(docRef, {
+      email: cleanEmail,
+      createdAt: serverTimestamp()
+    });
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, collectionName);
+    throw error;
+  }
+}
+
+

src/lib/tireService.ts

@@ -0,0 +1,372 @@
+// Bridge file forwarding products data queries to our clean Firebase Service
+import { TireProduct } from "../data";
+import { 
+  getAllProducts, 
+  addProduct, 
+  updateProduct, 
+  deleteProduct, 
+  ProductDocument,
+  DEFAULT_TIR_PRODUCTS_SEED
+} from "./firebaseService";
+import { 
+  collection, 
+  getDocs, 
+  addDoc 
+} from "firebase/firestore";
+import { db, handleFirestoreError, OperationType } from "./firebase";
+
+export interface CustomReview {
+  id?: string;
+  name: string;
+  rating: number;
+  text: string;
+  date: string;
+  initials: string;
+}
+
+// Map compatibility fields from FirebaseService Product to TireProduct
+function mapToTireProduct(p: ProductDocument): TireProduct {
+  return {
+    id: p.id,
+    name: p.name,
+    brand: p.brand,
+    size: p.size,
+    feature: p.feature,
+    price: p.price,
+    badge: p.badge || (p.category === "hot-selling" ? "Hot Selling" : p.category === "new-brands" ? "New Arrival" : "Famous"),
+    segment: p.segment || (p.category === "hot-selling" ? "hot" : p.category === "new-brands" ? "new" : "famous"),
+    image: p.image || p.imageUrl,
+    description: p.description || `Premium quality tire from ${p.brand}.`
+  };
+}
+
+// 1. Fetch Tyres from Firestore (migrated to the new 'products' collection)
+export async function getTireProducts(): Promise<TireProduct[]> {
+  try {
+    const list = await getAllProducts();
+    return list.map(mapToTireProduct);
+  } catch (error) {
+    console.warn("Could not load from Firestore 'products', falling back.", error);
+    return SEED_TYRE_PRODUCTS;
+  }
+}
+
+// 2. Add or Edit Tyre in Firestore (migrated to the new 'products' collection)
+export async function saveTireProduct(tire: TireProduct): Promise<void> {
+  const categoryMapped = tire.segment === "hot" ? "hot-selling" : tire.segment === "new" ? "new-brands" : "famous";
+  
+  const payload: Partial<ProductDocument> = {
+    name: tire.name,
+    brand: tire.brand,
+    size: tire.size,
+    feature: tire.feature,
+    price: Number(tire.price),
+    category: categoryMapped as any,
+    segment: tire.segment,
+    badge: tire.badge,
+    imageUrl: tire.image,
+    image: tire.image,
+    stock: 10, // default stock allocation
+    description: tire.description
+  };
+
+  try {
+    // If tire ID starts with custom- or looks like a temp, we check if it is existing in firestore
+    const existing = await getTireProducts();
+    const match = existing.find(e => e.id === tire.id);
+    
+    if (match) {
+      await updateProduct(tire.id, payload);
+    } else {
+      await addProduct({
+        ...payload,
+        name: tire.name,
+        brand: tire.brand,
+        size: tire.size,
+        feature: tire.feature,
+        price: Number(tire.price),
+        category: categoryMapped as any,
+        stock: 10,
+        imageUrl: tire.image
+      } as ProductDocument);
+    }
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, `products/${tire.id}`);
+  }
+}
+
+// 3. Delete Tyre from Firestore 'products'
+export async function deleteTireProduct(tireId: string): Promise<void> {
+  try {
+    await deleteProduct(tireId);
+  } catch (error) {
+    handleFirestoreError(error, OperationType.DELETE, `products/${tireId}`);
+  }
+}
+
+// 4. Fetch Reviews from Firestore
+export async function getReviews(): Promise<CustomReview[]> {
+  const collectionName = "reviews";
+  try {
+    const list: CustomReview[] = [];
+    const querySnapshot = await getDocs(collection(db, collectionName));
+    querySnapshot.forEach((doc) => {
+      list.push({ id: doc.id, ...doc.data() } as CustomReview);
+    });
+    return list;
+  } catch (error) {
+    console.warn("Could not retrieve custom reviews from Firestore.", error);
+    return [];
+  }
+}
+
+// 5. Add Review to Firestore
+export async function addReview(review: Omit<CustomReview, "id">): Promise<string> {
+  const collectionName = "reviews";
+  try {
+    const docRef = await addDoc(collection(db, collectionName), {
+      name: review.name,
+      rating: Number(review.rating),
+      text: review.text,
+      date: review.date,
+      initials: review.initials,
+    });
+    return docRef.id;
+  } catch (error) {
+    handleFirestoreError(error, OperationType.WRITE, collectionName);
+    return "error";
+  }
+}
+
+// Fallback local seed data
+export const SEED_TYRE_PRODUCTS: TireProduct[] = DEFAULT_TIR_PRODUCTS_SEED.map((p, i) => ({
+  id: `seed-${p.brand.toLowerCase()}-${i + 1}`,
+  name: p.name,
+  brand: p.brand,
+  size: p.size,
+  feature: p.feature,
+  price: p.price,
+  badge: p.category === "hot-selling" ? "Hot Selling" : p.category === "new-brands" ? "New Arrival" : "Famous",
+  segment: p.category === "hot-selling" ? "hot" : p.category === "new-brands" ? "new" : "famous",
+  image: p.imageUrl,
+  description: p.description || ""
+}));
+
+// Pak-Specific Fitments specifications model structure
+export interface CarFitment {
+  make: string;
+  model: string;
+  variants: {
+    name: string;
+    recommendedSize: string;
+    engine: string;
+    pressure: string;
+  }[];
+}
+
+export const PAK_CAR_FITMENTS: CarFitment[] = [
+  {
+    make: "Toyota",
+    model: "Corolla",
+    variants: [
+      { name: "Altis Grande", recommendedSize: "195/65R15", engine: "1800cc", pressure: "32 PSI" },
+      { name: "GLI / XLI", recommendedSize: "185/65R15", engine: "1300cc", pressure: "30 PSI" },
+      { name: "Altis 1.6", recommendedSize: "195/65R15", engine: "1600cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Toyota",
+    model: "Yaris",
+    variants: [
+      { name: "ATIV X CVT", recommendedSize: "185/60R15", engine: "1500cc", pressure: "32 PSI" },
+      { name: "GLI MT / CVT", recommendedSize: "185/60R15", engine: "1300cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Toyota",
+    model: "Fortuner",
+    variants: [
+      { name: "Sigma 4 Diesel", recommendedSize: "265/60R18", engine: "2800cc", pressure: "32 PSI" },
+      { name: "2.7 G Petrol", recommendedSize: "265/65R17", engine: "2700cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Toyota",
+    model: "Hilux Revo",
+    variants: [
+      { name: "Revo V", recommendedSize: "265/60R18", engine: "2800cc", pressure: "32 PSI" },
+      { name: "Revo G / Single Cabin", recommendedSize: "265/65R17", engine: "2800cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Toyota",
+    model: "Vitz",
+    variants: [
+      { name: "Hybrid / F", recommendedSize: "165/70R14", engine: "1000cc / 1500cc", pressure: "30 PSI" },
+      { name: "Jewela / U", recommendedSize: "185/60R15", engine: "1300cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Honda",
+    model: "Civic",
+    variants: [
+      { name: "Oriel", recommendedSize: "215/55R16", engine: "1800cc", pressure: "32 PSI" },
+      { name: "RS Turbo", recommendedSize: "215/50R17", engine: "1500cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Honda",
+    model: "City",
+    variants: [
+      { name: "1.5L Aspire", recommendedSize: "185/55R16", engine: "1500cc", pressure: "32 PSI" },
+      { name: "1.2L i-VTEC", recommendedSize: "175/65R15", engine: "1200cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Honda",
+    model: "BR-V",
+    variants: [
+      { name: "i-VTEC S", recommendedSize: "195/60R16", engine: "1500cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Suzuki",
+    model: "Alto",
+    variants: [
+      { name: "VXL / AGS", recommendedSize: "145/80R13", engine: "660cc", pressure: "30 PSI" },
+      { name: "VXR / VX", recommendedSize: "145/80R13", engine: "660cc", pressure: "28 PSI" }
+    ]
+  },
+  {
+    make: "Suzuki",
+    model: "Cultus",
+    variants: [
+      { name: "VXL / AGS", recommendedSize: "165/70R14", engine: "1000cc", pressure: "30 PSI" },
+      { name: "VXR", recommendedSize: "165/70R14", engine: "1000cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Suzuki",
+    model: "Swift",
+    variants: [
+      { name: "GLX CVT", recommendedSize: "185/55R16", engine: "1200cc", pressure: "32 PSI" },
+      { name: "GL MT / CVT", recommendedSize: "185/60R15", engine: "1200cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Suzuki",
+    model: "Wagon R",
+    variants: [
+      { name: "VXL / AGS", recommendedSize: "145/80R13", engine: "1000cc", pressure: "30 PSI" },
+      { name: "VXR", recommendedSize: "145/80R13", engine: "1000cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Suzuki",
+    model: "Mehran",
+    variants: [
+      { name: "VXR / VX", recommendedSize: "145/70R12", engine: "800cc", pressure: "28 PSI" }
+    ]
+  },
+  {
+    make: "Kia",
+    model: "Sportage",
+    variants: [
+      { name: "Alpha", recommendedSize: "225/55R18", engine: "2000cc", pressure: "34 PSI" },
+      { name: "AWD / FWD", recommendedSize: "225/55R18", engine: "2000cc", pressure: "34 PSI" }
+    ]
+  },
+  {
+    make: "Kia",
+    model: "Picanto",
+    variants: [
+      { name: "Automatic 1.0", recommendedSize: "165/60R14", engine: "1000cc", pressure: "30 PSI" },
+      { name: "Manual 1.0", recommendedSize: "165/60R14", engine: "1000cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Kia",
+    model: "Stonic",
+    variants: [
+      { name: "EX Plus", recommendedSize: "195/55R16", engine: "1400cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Hyundai",
+    model: "Tucson",
+    variants: [
+      { name: "GLS Sport", recommendedSize: "225/55R18", engine: "2000cc", pressure: "33 PSI" },
+      { name: "Ultimate", recommendedSize: "225/55R18", engine: "2000cc", pressure: "33 PSI" }
+    ]
+  },
+  {
+    make: "Hyundai",
+    model: "Elantra",
+    variants: [
+      { name: "GLS 2.0", recommendedSize: "205/55R16", engine: "2000cc", pressure: "32 PSI" },
+      { name: "GL 1.6", recommendedSize: "205/55R16", engine: "1600cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Hyundai",
+    model: "Sonata",
+    variants: [
+      { name: "Sonata 2.5L", recommendedSize: "235/45R18", engine: "2500cc", pressure: "32 PSI" },
+      { name: "Sonata 2.0L", recommendedSize: "215/55R17", engine: "2000cc", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Changan",
+    model: "Alsvin",
+    variants: [
+      { name: "Lumiere 1.5", recommendedSize: "185/55R15", engine: "1500cc", pressure: "32 PSI" },
+      { name: "Comfort 1.3 / 1.5", recommendedSize: "185/55R15", engine: "1300cc / 1500cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "Changan",
+    model: "Oshan X7",
+    variants: [
+      { name: "FutureSense", recommendedSize: "225/55R19", engine: "1500cc Turbo", pressure: "34 PSI" },
+      { name: "Comfort", recommendedSize: "225/55R19", engine: "1500cc Turbo", pressure: "34 PSI" }
+    ]
+  },
+  {
+    make: "MG",
+    model: "HS",
+    variants: [
+      { name: "Essence / Trophy", recommendedSize: "235/50R18", engine: "1500cc Turbo", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Haval",
+    model: "H6",
+    variants: [
+      { name: "HEV (Hybrid)", recommendedSize: "225/55R19", engine: "1500cc HEV", pressure: "33 PSI" },
+      { name: "1.5T / 2.0T AWD", recommendedSize: "225/55R19", engine: "1500cc / 2000cc", pressure: "33 PSI" }
+    ]
+  },
+  {
+    make: "Haval",
+    model: "Jolion",
+    variants: [
+      { name: "High Grade", recommendedSize: "225/55R18", engine: "1500cc Turbo", pressure: "32 PSI" }
+    ]
+  },
+  {
+    make: "Proton",
+    model: "Saga",
+    variants: [
+      { name: "Ace A/T", recommendedSize: "185/55R15", engine: "1300cc", pressure: "32 PSI" },
+      { name: "Standard M/T / A/T", recommendedSize: "185/60R14", engine: "1300cc", pressure: "30 PSI" }
+    ]
+  },
+  {
+    make: "DFSK",
+    model: "Glory 580",
+    variants: [
+      { name: "Glory 580 Pro", recommendedSize: "225/60R17", engine: "1500cc Turbo", pressure: "32 PSI" }
+    ]
+  }
+];
+

src/main.tsx

@@ -0,0 +1,10 @@
+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

storage.rules

@@ -0,0 +1,19 @@
+rules_version = '2';
+service firebase.storage {
+  match /b/{bucket}/o {
+    
+    // Default-deny policy for entire storage registry
+    match /{allPaths=**} {
+      allow read, write: if false;
+    }
+
+    // Rules for the product-images folder: public read allowed, authenticated writes only
+    match /product-images/{imageId} {
+      allow read: if true;
+      allow write: if request.auth != null 
+                   && request.resource.size < 5 * 1024 * 1024 // limit size to 5MB
+                   && request.resource.contentType.matches('image/.*'); // strictly image MIME types
+      allow delete: if request.auth != null;
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,22 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig} from 'vite';
+
+export default defineConfig(() => {
+  return {
+    plugins: [react(), tailwindcss()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+      // Disable file watching when DISABLE_HMR is true to save CPU during agent edits.
+      watch: process.env.DISABLE_HMR === 'true' ? null : {},
+    },
+  };
+});