<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kalkulator Usług Sprzątania</title>
  
  <!-- 
    Komentarz w języku polskim: 
    W tej sekcji umieszczamy style dedykowane kalkulatorowi. 
    Dzięki nadanym nazwom klas i identyfikatorów staramy się 
    uniknąć konfliktów z innymi stylami.
  -->
  <style>
    /* 
       ---------------------------------------------
       Style dedykowane wyłącznie kalkulatorowi.
       Nazwy klas i identyfikatorów poprzedzone są
       "calc-clean-", aby zminimalizować konflikty
       ze stylem istniejącej strony.
       ---------------------------------------------
    */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* Prosty styl nagłówka strony demo (opcjonalny) */
    h1, h2 {
      text-align: center;
      margin-top: 20px;
    }
    
    p {
      text-align: center;
      max-width: 600px;
      margin: 10px auto;
      line-height: 1.4;
    }

    .calc-clean-container {
      max-width: 400px;
      margin: 20px auto;
      padding: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #fafafa;
    }

    .calc-clean-field {
      margin-bottom: 15px;
    }

    .calc-clean-field label {
      display: block;
      margin-bottom: 5px;
      font-weight: 600;
    }

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

    #calc-result {
      margin-top: 20px;
      padding: 10px;
      border-top: 1px solid #ccc;
    }

    #calc-price {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .calc-clean-disclaimer {
      font-size: 0.9em;
      font-style: italic;
      margin: 10px 0;
    }

    .calc-clean-contact-btn {
      background-color: #008f48;
      color: #fff;
      font-size: 1em;
      padding: 10px;
      border: none;
      cursor: pointer;
      border-radius: 3px;
      width: 100%;
      max-width: 300px;
      display: block;
      margin: 0 auto;
      text-align: center;
    }

    .calc-clean-contact-btn:hover {
      background-color: #006f38;
    }
    
    /* Małe dostosowanie do urządzeń mobilnych */
    @media (max-width: 480px) {
      .calc-clean-container {
        width: 90%;
        margin: 20px auto;
      }
    }
  </style>
</head>
<body>

  <!-- 
    DEMONSTRACYJNA STRONA, w której osadzamy kalkulator.
    Poniżej widać nagłówek i krótki opis. Następnie 
    prezentujemy sam kalkulator.
  -->
  <h1>Kalkulator Usług Sprzątania</h1>
  

  <!-- 
    KALKULATOR 
    Aby przenieść ten kalkulator na istniejącą stronę, wystarczy skopiować
    kod od <div class="calc-clean-container">... do </div> w miejsce docelowe
    i odpowiednio dołączyć style oraz skrypt.
  -->
  <div class="calc-clean-container">
    <!-- Komentarz w języku polskim: Główne pole wyboru usługi -->
    <div class="calc-clean-field">
      <label for="calc-service-select">Wybierz rodzaj usługi:</label>
      <select id="calc-service-select">
        <option value="" selected disabled>-- Wybierz --</option>
        <option value="standard">Standardowe sprzątanie mieszkania</option>
        <option value="deep">Gruntowne sprzątanie mieszkania</option>
        <option value="tenants">Sprzątanie po najemcach</option>
        <option value="renovation">Sprzątanie po remoncie</option>
        <option value="one-time">Jednorazowe sprzątanie</option>
        <option value="additional">Usługi dodatkowe</option>
      </select>
    </div>

    <!-- 
      Suwak do wyboru metrażu (pokazywany tylko dla usług
      zależnych od metrażu: standard, deep, tenants, renovation, one-time) 
    -->
    <div class="calc-clean-field" id="calc-area-field" style="display: none;">
      <label for="calc-area-slider">
        Metraż (m²): <span id="calc-area-value">60</span>
      </label>
      <input 
        type="range" 
        id="calc-area-slider" 
        min="1" 
        max="110" 
        value="60" 
        step="1" 
      />
    </div>

    <!-- 
      Pole wyboru usługi dodatkowej (pokazywane tylko przy 
      "Usługi dodatkowe") 
    -->
    <div class="calc-clean-field" id="calc-additional-type-field" style="display: none;">
      <label for="calc-additional-type-select">Wybierz usługę dodatkową:</label>
      <select id="calc-additional-type-select">
        <option value="" selected disabled>-- Wybierz --</option>
        <option value="post-renovation">Kompleksowe sprzątanie po remoncie (1 osoba)</option>
        <option value="after-party">Sprzątanie po imprezach (1 osoba)</option>
      </select>
    </div>

    <!-- 
      Suwak do wyboru liczby godzin (pokazywany tylko dla usług
      dodatkowych - "post-renovation" lub "after-party") 
    -->
    <div class="calc-clean-field" id="calc-hours-field" style="display: none;">
      <label for="calc-hours-slider">
        Liczba godzin: <span id="calc-hours-value">5</span>
      </label>
      <input 
        type="range" 
        id="calc-hours-slider" 
        min="1" 
        max="10" 
        value="5" 
        step="1" 
      />
    </div>

    <!-- 
      Miejsce na wyświetlanie wyniku kalkulacji 
    -->
    <div id="calc-result" style="display: none;">
      <h3>Wynik kalkulacji orientacyjnej</h3>
      <p id="calc-price"></p>
      <p id="calc-time"></p>
      <p class="calc-clean-disclaimer">
        Jest to wstępna kalkulacja orientacyjna. Aby uzyskać dokładną wycenę,
        prosimy o kontakt z naszym przedstawicielem.
      </p>
      <!-- Przycisk do kontaktu (wyświetla się, gdy jest wynik) -->
      <button id="contact-button" class="calc-clean-contact-btn">
        Skontaktuj się z nami
      </button>
    </div>
  </div>

  <!-- 
    Skrypt JavaScript obsługujący kalkulator.
    Umieszczamy go na końcu body, aby mieć pewność,
    że elementy DOM zostały już załadowane.
  -->
  <script>
    /*
       ---------------------------------------------------
       Kod w języku polskim, aby wyjaśnić działanie logiki.
       ---------------------------------------------------
    */
    document.addEventListener("DOMContentLoaded", function() {
      // Znajdujemy elementy kalkulatora
      const serviceSelect = document.getElementById("calc-service-select");
      const areaField = document.getElementById("calc-area-field");
      const areaSlider = document.getElementById("calc-area-slider");
      const areaValue = document.getElementById("calc-area-value");
      const additionalTypeField = document.getElementById("calc-additional-type-field");
      const additionalTypeSelect = document.getElementById("calc-additional-type-select");
      const hoursField = document.getElementById("calc-hours-field");
      const hoursSlider = document.getElementById("calc-hours-slider");
      const hoursValue = document.getElementById("calc-hours-value");
      const resultSection = document.getElementById("calc-result");
      const priceParagraph = document.getElementById("calc-price");
      const timeParagraph = document.getElementById("calc-time");
      const contactButton = document.getElementById("contact-button");

      // Funkcja aktualizująca tekst obok suwaka metrażu
      function updateAreaValue() {
        areaValue.textContent = areaSlider.value;
      }

      // Funkcja aktualizująca tekst obok suwaka godzin
      function updateHoursValue() {
        hoursValue.textContent = hoursSlider.value;
      }

      // Funkcja do ukrywania / pokazywania odpowiednich pól
      function updateFieldsVisibility() {
        // Reset wyniku
        resultSection.style.display = "none";

        // Sprawdzamy, co wybrał użytkownik
        const selectedService = serviceSelect.value;

        if (
          selectedService === "standard" ||
          selectedService === "deep" ||
          selectedService === "tenants" ||
          selectedService === "renovation" ||
          selectedService === "one-time"
        ) {
          // Pokaż pole do wyboru metrażu
          areaField.style.display = "block";
          // Ukryj pola dla usług dodatkowych
          additionalTypeField.style.display = "none";
          hoursField.style.display = "none";
        } else if (selectedService === "additional") {
          // Ukryj metraż
          areaField.style.display = "none";
          // Pokaż pole usługi dodatkowej i suwak godzin (ale suwak dopiero, gdy wybierzemy pod-usługę)
          additionalTypeField.style.display = "block";
          hoursField.style.display = "none";
        } else {
          // Nic nie wybrano lub niepoprawna opcja
          areaField.style.display = "none";
          additionalTypeField.style.display = "none";
          hoursField.style.display = "none";
        }
      }

      // Funkcja obliczająca cenę w zależności od usługi i wartości suwaków
      function calculatePrice() {
        const selectedService = serviceSelect.value;
        let priceText = "";
        let timeText = "";

        // Ukrywamy wynik do momentu aż będziemy mieli prawidłowe dane
        resultSection.style.display = "none";

        // 1) Usługi wymagające metrażu
        if (
          selectedService === "standard" ||
          selectedService === "deep" ||
          selectedService === "tenants" ||
          selectedService === "renovation" ||
          selectedService === "one-time"
        ) {
          const area = parseInt(areaSlider.value);

          // Obliczamy w zależności od rodzaju usługi
          switch (selectedService) {
            case "standard":
              // Standardowe sprzątanie mieszkania
              // Do 30 m²: od 150 zł (2-3 h)
              // Do 60 m²: od 250 zł (~4 h)
              // Do 100 m²: od 400 zł (5-6 h)
              if (area <= 30) {
                priceText = "Od 150 zł";
                timeText = "Czas sprzątania: około 2-3 godziny";
              } else if (area <= 60) {
                priceText = "Od 250 zł";
                timeText = "Czas sprzątania: około 4 godziny";
              } else if (area <= 100) {
                priceText = "Od 400 zł";
                timeText = "Czas sprzątania: około 5-6 godzin";
              } else {
                priceText = "Powyżej 100 m² prosimy o kontakt";
                timeText = "";
              }
              break;

            case "deep":
              // Gruntowne sprzątanie mieszkania
              // Do 30 m²: od 250 zł (4-5 h)
              // Do 60 m²: od 400 zł (6 h)
              // Do 100 m²: od 600 zł (9 h)
              if (area <= 30) {
                priceText = "Od 250 zł";
                timeText = "Czas sprzątania: około 4-5 godzin";
              } else if (area <= 60) {
                priceText = "Od 400 zł";
                timeText = "Czas sprzątania: około 6 godzin";
              } else if (area <= 100) {
                priceText = "Od 600 zł";
                timeText = "Czas sprzątania: około 9 godzin";
              } else {
                priceText = "Powyżej 100 m² prosimy o kontakt";
                timeText = "";
              }
              break;

            case "tenants":
              // Sprzątanie po najemcach
              // Do 60 m²: 400 zł (6 h)
              // Do 85 m²: 600 zł (6 h, 2 osoby)
              // Do 110 m²: 550 zł (8 h)
              if (area <= 60) {
                priceText = "400 zł";
                timeText = "Czas sprzątania: około 6 godzin (1-2 osoby)";
              } else if (area <= 85) {
                priceText = "600 zł";
                timeText = "Czas sprzątania: około 6 godzin (2 osoby)";
              } else if (area <= 110) {
                priceText = "550 zł";
                timeText = "Czas sprzątania: około 8 godzin (2 osoby)";
              } else {
                priceText = "Powyżej 110 m² prosimy o kontakt";
                timeText = "";
              }
              break;

            case "renovation":
              // Sprzątanie po remoncie
              // Do 60 m²: 600 zł (6 h, 2 osoby)
              // Do 85 m²: 800 zł (8 h, 3 osoby)
              // Do 110 m²: 800 zł (8 h, 3 osoby)
              if (area <= 60) {
                priceText = "600 zł";
                timeText = "Czas sprzątania: około 6 godzin (2 osoby)";
              } else if (area <= 85) {
                priceText = "800 zł";
                timeText = "Czas sprzątania: około 8 godzin (3 osoby)";
              } else if (area <= 110) {
                priceText = "800 zł";
                timeText = "Czas sprzątania: około 8 godzin (3 osoby)";
              } else {
                priceText = "Powyżej 110 m² prosimy o kontakt";
                timeText = "";
              }
              break;

            case "one-time":
              // Jednorazowe sprzątanie
              // Do 85 m²: od 400 zł (ok. 6 h)
              // Do 110 m²: od 450 zł (ok. 7 h)
              if (area <= 85) {
                priceText = "Od 400 zł";
                timeText = "Czas sprzątania: około 6 godzin";
              } else if (area <= 110) {
                priceText = "Od 450 zł";
                timeText = "Czas sprzątania: około 7 godzin";
              } else {
                priceText = "Powyżej 110 m² prosimy o kontakt";
                timeText = "";
              }
              break;
          }
        }

        // 2) Usługi dodatkowe
        if (selectedService === "additional") {
          const selectedAdditional = additionalTypeSelect.value;
          // Jeżeli nie wybrano pod-usługi dodatkowej, nie liczymy
          if (!selectedAdditional) {
            return;
          }
          // Jeżeli wybrano pod-usługę, liczymy koszt na podstawie godzin
          const h = parseInt(hoursSlider.value);
          // Oba warianty mają zakres cenowy 45-60 zł/h
          const minCost = h * 45;
          const maxCost = h * 60;
          priceText = `Od ${minCost} zł do ${maxCost} zł (w zależności od stawki)`;

          // Tekst czasu sprzątania – tutaj użytkownik sam określa liczbę godzin
          timeText = `Przybliżony czas: ${h} godz. (1 osoba)`;
        }

        // Jeżeli wciąż brak priceText, oznacza to brak danych lub niewłaściwy wybór
        if (!priceText) {
          return;
        }

        // Wyświetlamy wynik
        priceParagraph.textContent = "Przewidywany koszt: " + priceText;
        timeParagraph.textContent = timeText;
        resultSection.style.display = "block";
      }

      // Obsługa wydarzeń (eventów)
      serviceSelect.addEventListener("change", () => {
        updateFieldsVisibility();
        calculatePrice();
      });

      areaSlider.addEventListener("input", () => {
        updateAreaValue();
        calculatePrice();
      });

      additionalTypeSelect.addEventListener("change", () => {
        // Jeżeli wybrano pod-usługę dodatkową, pokaż suwak godzin
        if (additionalTypeSelect.value) {
          hoursField.style.display = "block";
        } else {
          hoursField.style.display = "none";
        }
        calculatePrice();
      });

      hoursSlider.addEventListener("input", () => {
        updateHoursValue();
        calculatePrice();
      });

      // Na starcie ukrywamy wszystkie pola
      updateFieldsVisibility();
      updateAreaValue();
      updateHoursValue();

      // Przykładowa obsługa kliknięcia w przycisk kontaktowy
      contactButton.addEventListener("click", function() {
        // Możemy przekierować do formularza kontaktowego, otworzyć popup itp.
        alert("Dziękujemy za zainteresowanie! Prosimy o kontakt telefoniczny lub mailowy.");
      });
    });
  </script>
</body>
</html>
