<!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 - Pozamiatane.pl</title>
    <style>
        /* Stylowanie kalkulatora */
        .calc-container {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 2px solid #4CAF50;
            border-radius: 10px;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
            position: relative;
            z-index: 1; /* Upewnienie się, że kalkulator jest nad tłem DEMO */
        }

        .calc-container h2 {
            text-align: center;
            color: #4CAF50;
        }

        .calc-group {
            margin-bottom: 15px;
        }

        .calc-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .calc-group select,
        .calc-group input[type="range"],
        .calc-group input[type="checkbox"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }

        .calc-group .range-value {
            text-align: center;
            margin-top: 5px;
            font-size: 1.1em;
            color: #333;
        }

        .calc-result {
            text-align: center;
            font-size: 1.5em;
            margin-top: 20px;
            color: #333;
        }

        .contact-button {
            display: none;
            margin: 20px auto 0;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }

        .contact-button:hover {
            background-color: #45a049;
        }

        .preliminary-message {
            display: none;
            text-align: center;
            margin-top: 10px;
            color: #555;
            font-size: 0.9em;
        }

        /* Stylowanie DEMO */
        .demo-text {
            position: absolute;
            color: rgba(0, 0, 0, 0.1);
            font-size: 3em;
            font-weight: bold;
            pointer-events: none; /* Zapobiega interakcji z tekstem DEMO */
            user-select: none;
            z-index: 0; /* Upewnienie się, że tekst DEMO jest za kalkulatorem */
            animation: fadeInOut 10s infinite;
        }

        @keyframes fadeInOut {
            0% { opacity: 0; }
            10% { opacity: 0.3; }
            50% { opacity: 0.3; }
            60% { opacity: 0; }
            100% { opacity: 0; }
        }

        /* Responsywność */
        @media (max-width: 600px) {
            .calc-container {
                padding: 15px;
            }

            .contact-button {
                width: 100%;
            }
        }
    </style>
</head>
<body>

    <!-- Kalkulator Sprzątania -->
    <div class="calc-container">
        <h2>Kalkulator Sprzątania</h2>

        <div class="calc-group">
            <label for="service-type">Rodzaj usługi:</label>
            <select id="service-type">
                <option value="jednorazowe">Sprzątanie jednorazowe</option>
                <option value="cykliczne">Sprzątanie cykliczne</option>
            </select>
        </div>

        <div class="calc-group">
            <label for="hours">Liczba godzin:</label>
            <input type="range" id="hours" min="1" max="10" value="3">
            <div class="range-value" id="hours-value">3 godziny</div>
        </div>

        <div class="calc-group">
            <input type="checkbox" id="cleaning-supplies">
            <label for="cleaning-supplies">Środki czystości</label>
        </div>

        <div class="calc-group">
            <input type="checkbox" id="disinfection">
            <label for="disinfection">Dezynfekcja</label>
        </div>

        <div class="calc-result" id="total-price">Całkowita cena: 0 zł</div>

        <div class="preliminary-message" id="preliminary-message">
            To jest wstępny orientacyjny koszt. Dokładną wycenę uzyskasz, kontaktując się z naszym przedstawicielem.
        </div>

        <button class="contact-button" id="contact-button">Skontaktuj się z nami</button>
    </div>

    <!-- Kontener dla DEMO tekstów -->
    <div id="demo-container"></div>

    <script>
        // Funkcja obliczająca koszt sprzątania
        function calculatePrice() {
            const serviceType = document.getElementById('service-type').value;
            const hours = parseInt(document.getElementById('hours').value);
            const cleaningSupplies = document.getElementById('cleaning-supplies').checked;
            const disinfection = document.getElementById('disinfection').checked;

            let pricePerHour = serviceType === 'jednorazowe' ? 75 : 70;
            let total = pricePerHour * hours;

            // Koszt środków czystości
            if (cleaningSupplies) {
                if (hours <= 3) {
                    total += 12;
                } else {
                    total += 24;
                }
            }

            // Koszt dezynfekcji
            if (disinfection) {
                if (hours <= 3) {
                    total += 12;
                } else if (hours > 3 && hours <=5) {
                    total += 24;
                } else {
                    total += 36;
                }
            }

            // Aktualizacja wyświetlanej ceny
            document.getElementById('total-price').innerText = `Całkowita cena: ${total} zł`;

            // Pokazanie wiadomości i przycisku kontaktowego
            document.getElementById('preliminary-message').style.display = 'block';
            document.getElementById('contact-button').style.display = 'block';
        }

        // Aktualizacja wartości suwaka
        function updateRangeValue() {
            const hours = document.getElementById('hours').value;
            const hoursValue = document.getElementById('hours-value');
            hoursValue.innerText = `${hours} godziny`;
        }

        // Inicjalizacja kalkulatora
        document.addEventListener('DOMContentLoaded', function() {
            // Dodanie nasłuchiwaczy zdarzeń
            document.getElementById('service-type').addEventListener('change', calculatePrice);
            document.getElementById('hours').addEventListener('input', function() {
                updateRangeValue();
                calculatePrice();
            });
            document.getElementById('cleaning-supplies').addEventListener('change', calculatePrice);
            document.getElementById('disinfection').addEventListener('change', calculatePrice);

            // Inicjalne obliczenie ceny
            updateRangeValue();
            calculatePrice();

            // Obsługa przycisku kontaktowego
            document.getElementById('contact-button').addEventListener('click', function() {
                // Możesz tutaj dodać link do formularza kontaktowego lub otworzyć okno mailowe
                window.location.href = 'mailto:kontakt@pozamiatane.pl?subject=Zapytanie%20kalkulatora';
            });

            // Inicjalizacja DEMO tekstów
            initDemoTexts();
        });

        // Funkcja inicjalizująca DEMO teksty
        function initDemoTexts() {
            const demoContainer = document.getElementById('demo-container');
            const numberOfTexts = 20; // Liczba wyświetlanych DEMO tekstów

            for (let i = 0; i < numberOfTexts; i++) {
                createDemoText();
            }

            // Tworzenie nowych DEMO tekstów co 5 sekund
            setInterval(createDemoText, 5000);
        }

        // Funkcja tworząca pojedynczy DEMO tekst
        function createDemoText() {
            const demoContainer = document.getElementById('demo-container');
            const demoText = document.createElement('div');
            demoText.classList.add('demo-text');
            demoText.innerText = 'DEMO';

            // Losowanie pozycji na ekranie
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;

            // Pobranie wymiarów kalkulatora
            const calcContainer = document.querySelector('.calc-container');
            const calcRect = calcContainer.getBoundingClientRect();

            // Generowanie pozycji, które nie kolidują z kalkulatorem
            let posX, posY;
            let attempts = 0;
            do {
                posX = Math.random() * (viewportWidth - 100); // 100 to szerokość DEMO tekstu
                posY = Math.random() * (viewportHeight - 100); // 100 to wysokość DEMO tekstu
                attempts++;
                // Sprawdzenie, czy pozycja nie nakłada się na kalkulator
            } while (
                posX + 100 > calcRect.left && posX < calcRect.right &&
                posY + 100 > calcRect.top && posY < calcRect.bottom &&
                attempts < 100
            );

            demoText.style.left = `${posX}px`;
            demoText.style.top = `${posY}px`;

            demoContainer.appendChild(demoText);

            // Usunięcie tekstu po zakończeniu animacji
            setTimeout(() => {
                demoContainer.removeChild(demoText);
            }, 10000); // Czas trwania animacji
        }
    </script>
</body>
</html>
