<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>iCare Mukkam | Mobile & Laptop Repair</title>

    <meta name="description"
          content="iCare Mukkam - Mobile and laptop repair services in Mukkam, Kozhikode. Screen replacement, battery replacement, software service and more.">

    <meta name="keywords"
          content="iCare Mukkam, mobile repair Mukkam, laptop repair Mukkam, mobile service Kozhikode">

    <meta name="author"
          content="iCare Mukkam">

    <link rel="stylesheet"
          href="style.css">
</head>

<body>

<!-- =========================================
     HEADER
     ========================================= -->

<header>

    <div class="logo">

        <img src="logo.png"
             alt="iCare Mukkam Logo">

        <span>iCare Mukkam</span>

    </div>

    <nav>

        <a href="#home">Home</a>

        <a href="#services">Services</a>

        <a href="#about">About</a>

        <a href="#booking">Booking</a>

        <a href="#contact">Contact</a>

    </nav>

</header>


<!-- =========================================
     HOME
     ========================================= -->

<section id="home">

    <h2>
        iCare Mukkam
    </h2>

    <p>
        Professional Mobile & Laptop Repair Services
    </p>

    <p>
        Fast • Reliable • Quality Service
    </p>

    <div>

        <a class="btn-primary"
           href="https://wa.me/919447150744"
           target="_blank">

            💬 WhatsApp

        </a>

        <a class="btn"
           href="tel:+919447667744">

            📞 Call Now

        </a>

    </div>

</section>
<section id="shop">

    <h2 class="section-title">
        Our Products
    </h2>

    <div id="products" class="products-grid">
        Loading products...
    </div>

</section>

<!-- =========================================
     SERVICES
     ========================================= -->

<section id="services">

    <h2 class="section-title">
        Our Services
    </h2>

    <div class="services">


        <!-- Mobile Repair -->

        <div class="service-card">

            <div class="service-icon">
                📱
            </div>

            <h3>
                Mobile Repair
            </h3>

            <p>
                Professional repair service for
                smartphones and mobile devices.
            </p>

        </div>


        <!-- Laptop Repair -->

        <div class="service-card">

            <div class="service-icon">
                💻
            </div>

            <h3>
                Laptop Repair
            </h3>

            <p>
                Laptop hardware and software
                repair with reliable service.
            </p>

        </div>


        <!-- Screen Replacement -->

        <div class="service-card">

            <div class="service-icon">
                📲
            </div>

            <h3>
                Screen Replacement
            </h3>

            <p>
                Quality display and touch screen
                replacement service.
            </p>

        </div>


        <!-- Battery -->

        <div class="service-card">

            <div class="service-icon">
                🔋
            </div>

            <h3>
                Battery Replacement
            </h3>

            <p>
                Battery replacement service for
                mobiles and laptops.
            </p>

        </div>


        <!-- Software -->

        <div class="service-card">

            <div class="service-icon">
                ⚙️
            </div>

            <h3>
                Software Service
            </h3>

            <p>
                Software installation, updates,
                troubleshooting and more.
            </p>

        </div>


        <!-- Accessories -->

        <div class="service-card">

            <div class="service-icon">
                🎧
            </div>

            <h3>
                Accessories
            </h3>

            <p>
                Mobile and laptop accessories
                available at our shop.
            </p>

        </div>

    </div>

</section>


<!-- =========================================
     ABOUT
     ========================================= -->

<section id="about">

    <h2 class="section-title">
        About iCare Mukkam
    </h2>

    <div class="service-card">

        <p>

            Welcome to <strong>iCare Mukkam</strong>.

            We provide professional mobile and
            laptop repair services with a focus
            on quality, reliability and customer
            satisfaction.

        </p>

        <br>

        <p>

            Our services include mobile repair,
            laptop repair, screen replacement,
            battery replacement, software service
            and accessories.

        </p>

        <br>

        <p>

            📍 Mukkam, Kozhikode, Kerala

        </p>

    </div>

</section>


<!-- =========================================
     WHY CHOOSE US
     ========================================= -->

<section>

    <h2 class="section-title">
        Why Choose iCare?
    </h2>

    <div class="services">


        <div class="service-card">

            <div class="service-icon">
                ✅
            </div>

            <h3>
                Quality Service
            </h3>

            <p>
                We focus on reliable and
                professional repair service.
            </p>

        </div>


        <div class="service-card">

            <div class="service-icon">
                ⚡
            </div>

            <h3>
                Fast Service
            </h3>

            <p>
                We try to complete repairs
                as quickly as possible.
            </p>

        </div>


        <div class="service-card">

            <div class="service-icon">
                🤝
            </div>

            <h3>
                Customer Support
            </h3>

            <p>
                Friendly support and assistance
                for our customers.
            </p>

        </div>

    </div>

</section>


<!-- =========================================
     BOOKING
     ========================================= -->

<section id="booking">

    <h2 class="section-title">
        Book a Service
    </h2>

    <div class="service-card">

        <p>
            Need a repair?
            Contact us directly through WhatsApp
            to book your service.
        </p>

        <br>

        <a class="btn-primary"
           href="https://wa.me/919447150744?text=Hello%20iCare%20Mukkam,%20I%20would%20like%20to%20book%20a%20service."
           target="_blank">

            📋 Book Service on WhatsApp

        </a>

    </div>

</section>


<!-- =========================================
     CONTACT
     ========================================= -->

<section id="contact">

    <h2 class="section-title">
        Contact iCare Mukkam
    </h2>

    <p>
        📞 <strong>9447667744</strong>
    </p>

    <p>
        💬 WhatsApp:
        <strong>9447150744</strong>
    </p>

    <p>
        📍 Mukkam, Kozhikode, Kerala
    </p>

    <br>

    <a class="btn-primary"
       href="https://wa.me/919447150744"
       target="_blank">

        💬 Chat on WhatsApp

    </a>

    <a class="btn"
       href="tel:+9194476677744">

        📞 Call Us

    </a>

</section>


<!-- =========================================
     FOOTER
     ========================================= -->

<footer>

    <p>
        © 2026 iCare Mukkam.
        All Rights Reserved.
    </p>

    <p>
        Mobile & Laptop Repair Services
    </p>

</footer>


<!-- =========================================
     FLOATING WHATSAPP BUTTON
     ========================================= -->

<a class="whatsapp-button"
   href="https://wa.me/919447150744"
   target="_blank"
   aria-label="Chat on WhatsApp">

    💬

</a>


<!-- =========================================
     FLOATING CALL BUTTON
     ========================================= -->

<a class="call-button"
   href="tel:+919447667744"
   aria-label="Call iCare Mukkam">

    📞

</a>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.17.1/firebase-app.js";
import {
    getFirestore,
    collection,
    getDocs
} from "https://www.gstatic.com/firebasejs/12.17.1/firebase-firestore.js";

const firebaseConfig = {
    apiKey: "AIzaSyAuV6-pSmuSPiNcrVcokaW5YMxwQ4wEhGc",
    authDomain: "icare-mukkam.firebaseapp.com",
    projectId: "icare-mukkam",
    storageBucket: "icare-mukkam.firebasestorage.app",
    messagingSenderId: "121404685611",
    appId: "1:121404685611:web:177d545ffefc78f563996e"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const productsContainer = document.getElementById("products");

async function loadProducts() {

    if (!productsContainer) return;

    productsContainer.innerHTML = "<p>Loading products...</p>";

    try {

        const snapshot = await getDocs(
            collection(db, "products")
        );

        productsContainer.innerHTML = "";

        if (snapshot.empty) {
            productsContainer.innerHTML =
                "<p>No products available.</p>";
            return;
        }

        snapshot.forEach((doc) => {

            const product = doc.data();

            const card = document.createElement("div");

            card.className = "product-card";

            card.innerHTML = `
                <img src="${product.image || 'logo.png'}"
                     alt="${product.name || 'Product'}">

                <h3>${product.name || 'Product'}</h3>

                <p>${product.description || ''}</p>

                <div class="product-price">
                    ₹${Number(product.price || 0).toLocaleString("en-IN")}
                </div>

                <p>
                    Stock:
                    ${product.stock ?? 0}
                </p>

                <button
                    onclick="addToCart('${doc.id}')">
                    🛒 Add to Cart
                </button>
            `;

            productsContainer.appendChild(card);

        });

    } catch (error) {

        console.error(error);

        productsContainer.innerHTML =
            "<p>Unable to load products.</p>";
    }
}

window.addToCart = function(productId) {

    alert("Product added to cart!");

};

loadProducts();

</script>

</body>

</html>
/* =========================================
   PRODUCTS
   ========================================= */

.products-grid {
    max-width: 1150px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.product-card {
    background: white;
    padding: 20px;
    border-radius: 16px;
    text-align: center;

    box-shadow: 0 5px 20px rgba(0,0,0,0.08);

    transition: 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 15px;
}

.product-card h3 {
    color: #1e3a8a;
    margin-bottom: 8px;
}

.product-card p {
    color: #64748b;
    font-size: 14px;
}

.product-price {
    font-size: 22px;
    font-weight: bold;
    color: #16a34a;
    margin: 12px 0;
}

.product-card button {
    border: none;
    background: #2563eb;
    color: white;

    padding: 11px 20px;
    border-radius: 8px;

    cursor: pointer;
    font-weight: bold;
}

.product-card button:hover {
    background: #1d4ed8;
}

@media (max-width: 900px) {

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 500px) {

    .products-grid {
        grid-template-columns: 1fr;
    }

}
