<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Sprzątania - Lusi.Pomagier</title>
    <style>
        /* Stylizacja kalkulatora Lusi.Pomagier */

        /* Kontener główny */
        .lusi-calculator-container {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
        }

        /* Nagłówek */
        .lusi-calculator-container h2 {
            text-align: center;
            color: #4CAF50;
        }

        /* Grupa formularza */
        .form-group {
            margin-bottom: 15px;
        }

        /* Etykiety */
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        /* Suwak */
        input[type=range] {
            width: 100%;
        }

        /* Pole wyboru pakietu */
        select, input[type=number] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        /* Przycisk obliczania */
        #calculateBtn {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #calculateBtn:hover {
            background-color: #45a049;
        }

        /* Sekcja wyniku */
        .result-section {
            margin-top: 20px;
            padding: 15px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #e8f5e9;
            text-align: center;
        }

        /* Przycisk kontaktu */
        #contactBtn {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #contactBtn:hover {
            background-color: #0b7dda;
        }

        /* Responsywność dla urządzeń mobilnych */
        @media (max-width: 600px) {
            .lusi-calculator-container {
                padding: 15px;
            }

            #contactBtn, #calculateBtn {
                padding: 8px;
            }
        }
    </style>
</head>
<body>
    <div class="lusi-calculator-container">
        <h2>Kalkulator Usług Sprzątania</h2>
        <form id="cleaningCalculator">
            <!-- Wybór Pakietu -->
            <div class="form-group">
                <label for="package">Wybierz Pakiet:</label>
                <select id="package" name="package">
                    <option value="standard">STANDARD</option>
                    <option value="standard_plus">STANDARD PLUS</option>
                </select>
            </div>

            <!-- Suwak powierzchni -->
            <div class="form-group">
                <label for="area">Powierzchnia (m²): <span id="areaValue">60</span> m²</label>
                <input type="range" id="area" name="area" min="20" max="300" step="1" value="60">
            </div>

            <!-- Dodatkowe Czynności (widoczne tylko dla STANDARD PLUS) -->
            <div class="form-group" id="additionalServicesGroup" style="display: none;">
                <label for="additionalHours">Dodatkowe godziny:</label>
                <input type="number" id="additionalHours" name="additionalHours" min="0" max="10" value="0">
            </div>

            <!-- Inne Dodatkowe Usługi -->
            <div class="form-group">
                <label for="carpetCleaning">Pranie dywanów (m²):</label>
                <input type="number" id="carpetCleaning" name="carpetCleaning" min="0" max="500" value="0">
            </div>

            <!-- Przycisk obliczania -->
            <button type="button" id="calculateBtn">Oblicz Koszt</button>
        </form>

        <!-- Wynik i CTA -->
        <div id="result" class="result-section" style="display: none;">
            <p>Przybliżony koszt: <strong id="totalPrice"></strong> zł</p>
            <p>To jest orientacyjny koszt. Aby uzyskać dokładną wycenę, prosimy o kontakt z naszym przedstawicielem.</p>
            <button id="contactBtn">Skontaktuj się z nami</button>
        </div>
    </div>

    <script>
        // Skrypt kalkulatora usług sprzątania Lusi.Pomagier

        document.addEventListener('DOMContentLoaded', function() {
            const packageSelect = document.getElementById('package');
            const areaSlider = document.getElementById('area');
            const areaValue = document.getElementById('areaValue');
            const additionalServicesGroup = document.getElementById('additionalServicesGroup');
            const calculateBtn = document.getElementById('calculateBtn');
            const resultSection = document.getElementById('result');
            const totalPriceElem = document.getElementById('totalPrice');
            const contactBtn = document.getElementById('contactBtn');

            // Aktualizacja wyświetlanej wartości powierzchni
            areaSlider.addEventListener('input', function() {
                areaValue.textContent = areaSlider.value;
            });

            // Pokazywanie lub ukrywanie dodatkowych usług
            packageSelect.addEventListener('change', function() {
                if (packageSelect.value === 'standard_plus') {
                    additionalServicesGroup.style.display = 'block';
                } else {
                    additionalServicesGroup.style.display = 'none';
                }
            });

            // Funkcja obliczająca koszt
            calculateBtn.addEventListener('click', function() {
                const selectedPackage = packageSelect.value;
                const area = parseInt(areaSlider.value);
                let basePrice = 0;

                // Obliczanie ceny podstawowej na podstawie powierzchni
                if (selectedPackage === 'standard') {
                    if (area <= 60) {
                        basePrice = getRandomPrice(300, 320);
                    } else if (area <= 90) {
                        basePrice = getRandomPrice(340, 360);
                    } else if (area <= 120) {
                        basePrice = getRandomPrice(380, 400);
                    } else if (area <= 200) {
                        basePrice = getRandomPrice(420, 460);
                    } else {
                        alert('Proszę skontaktować się z nami w celu uzgodnienia ceny dla powierzchni powyżej 200 m².');
                        return;
                    }
                } else if (selectedPackage === 'standard_plus') {
                    if (area <= 60) {
                        basePrice = getRandomPrice(300, 320);
                    } else if (area <= 90) {
                        basePrice = getRandomPrice(340, 360);
                    } else if (area <= 120) {
                        basePrice = getRandomPrice(380, 400);
                    } else if (area <= 200) {
                        basePrice = getRandomPrice(420, 460);
                    } else {
                        alert('Proszę skontaktować się z nami w celu uzgodnienia ceny dla powierzchni powyżej 200 m².');
                        return;
                    }

                    // Dodanie kosztu dodatkowych godzin
                    const additionalHours = parseInt(document.getElementById('additionalHours').value) || 0;
                    const additionalCost = additionalHours * getRandomPrice(55, 70);
                    basePrice += additionalCost;
                }

                // Dodanie kosztu prania dywanów
                const carpetArea = parseInt(document.getElementById('carpetCleaning').value) || 0;
                const carpetCost = carpetArea * getRandomPrice(14, 16);
                basePrice += carpetCost;

                // Dodanie kosztu dojazdu, jeśli poniżej 200 zł
                let totalPrice = basePrice;
                if (totalPrice < 200) {
                    const deliveryCost = 50; // Przykładowa stała opłata za dojazd
                    totalPrice += deliveryCost;
                }

                // Wyświetlenie wyniku
                totalPriceElem.textContent = totalPrice.toFixed(2);
                resultSection.style.display = 'block';
                // Przewinięcie do wyniku
                resultSection.scrollIntoView({ behavior: 'smooth' });
            });

            // Funkcja pomocnicza do losowania ceny w zakresie
            function getRandomPrice(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            // Przycisk kontaktu
            contactBtn.addEventListener('click', function() {
                // Możesz tutaj dodać link do formularza kontaktowego lub numer telefonu
                window.location.href = 'mailto:hello@qithub.click?subject=Zapytanie%20kalkulatora%20sprzątania';
            });
        });
    </script>
</body>
</html>
