<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Konfigurator Aqua Dream SPA</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
        :root { --anthracite: #1e272e; --wood: #a67c52; --bg: #f8f9fa; --white: #ffffff; --green: #27ae60; }
        body { font-family: 'Helvetica Neue', Arial, sans-serif; margin: 0; background: var(--bg); color: #333; padding-bottom: 150px; scroll-behavior: smooth; }
        
        nav { background: var(--anthracite); padding: 15px 0; text-align: center; border-bottom: 3px solid var(--wood); position: sticky; top: 0; z-index: 1000; }
        nav a { color: white; text-decoration: none; margin: 0 20px; font-size: 0.9rem; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; transition: 0.3s; }
        nav a:hover { color: var(--wood); }

        .header-text { 
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                        url('https://i.postimg.cc/FFdVyTcv/Gemini-Generated-Image-1t511z1t511z1t51.png') center/cover no-repeat;
            color: white; text-align: center; padding: 100px 20px; border-bottom: 3px solid var(--wood); text-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

        section { max-width: 1100px; margin: auto; padding: 60px 20px; }
        .section-title { text-align: center; text-transform: uppercase; font-size: 2rem; margin-bottom: 40px; color: var(--anthracite); letter-spacing: 2px; }

        .model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 40px; justify-content: center; }
        .model-card { background: white; border: 2px solid #eee; border-radius: 15px; overflow: hidden; cursor: pointer; transition: 0.3s; max-width: 500px; }
        .model-card.active { border-color: var(--wood); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
        .model-img { height: 220px; }
        .model-img img { width: 100%; height: 100%; object-fit: cover; }
        .model-info { padding: 15px; text-align: center; }

        .card { background: white; border-radius: 8px; padding: 25px; margin-bottom: 20px; border: 1px solid #eee; }
        h3 { color: var(--anthracite); font-size: 1.2rem; border-left: 5px solid var(--wood); padding-left: 15px; text-transform: uppercase; margin-bottom: 20px; }
        
        label { display: block; padding: 14px; border: 1px solid #f2f2f2; margin: 8px 0; border-radius: 8px; cursor: pointer; transition: 0.2s; font-size: 0.95rem; }
        label:hover { background: #fdfaf7; border-color: var(--wood); }
        input[type="radio"], input[type="checkbox"] { margin-right: 12px; transform: scale(1.2); accent-color: var(--wood); }

        .flex-container { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
        .selection-column { flex: 1; min-width: 320px; }
        .preview-column { flex: 0 0 350px; display: flex; flex-direction: column; gap: 15px; align-items: center; }
        
        .preview-box { background: #fff; border: 2px solid var(--wood); padding: 10px; border-radius: 12px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.08); animation: fadeIn 0.4s; width: 100%; max-width: 350px; margin: 0 auto; }
        .preview-box img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; }
        .preview-box p { margin: 10px 0 0; font-size: 0.8rem; font-weight: bold; color: var(--anthracite); text-transform: uppercase; }

        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; justify-content: center; }
        .gallery-item { height: 250px; border-radius: 10px; overflow: hidden; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .gallery-item img { width: 100%; height: 100%; object-fit: cover; }

        .hidden { display: none !important; }

        .price-footer { position: fixed; bottom: 0; width: 100%; background: white; border-top: 4px solid var(--wood); padding: 20px; text-align: center; box-shadow: 0 -10px 30px rgba(0,0,0,0.1); z-index: 2001; left: 0; }
        #wynik { font-size: 2.8rem; color: var(--wood); font-weight: bold; }
        .btn-summary { display: block; width: 100%; max-width: 450px; margin: 40px auto; padding: 20px; background: var(--wood); color: white; border: none; border-radius: 50px; font-size: 1.2rem; font-weight: bold; cursor: pointer; text-align: center; }

        #modal-summary { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 3000; justify-content: center; align-items: center; }
        .modal-content { background: white; padding: 40px; border-radius: 20px; max-width: 700px; width: 95%; max-height: 90vh; overflow-y: auto; }
        .summary-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed #ddd; }

        .contact-btn { text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; background: #f2f2f2; color: var(--anthracite); padding: 15px; border-radius: 8px; font-weight: bold; border: 1px solid #ddd; transition: 0.3s; }
        .contact-btn:hover { background: var(--wood); color: white; }

        @media (max-width: 768px) {
            section { padding: 30px 15px; }
            .section-title { font-size: 1.5rem; }
            
            .model-grid { grid-template-columns: 1fr; justify-items: center; }
            .model-card { width: 100%; }

            .flex-container { flex-direction: column; align-items: center; }
            .selection-column { width: 100%; min-width: unset; }
            .preview-column { width: 100%; flex: unset; }
            
            h3 { text-align: center; border-left: none; border-bottom: 2px solid var(--wood); padding-left: 0; }

            #wynik { font-size: 2rem; }
            .price-footer { padding: 15px 5px; }

            .card div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
            }
        }

        @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    </style>
</head>
<body>

<nav>
    <a href="#galeria">Nasze Realizacje</a>
    <a href="#konfigurator">Konfigurator</a>
    <a href="#">Kontakt</a>
</nav>

<div class="header-text">
    <h1>Aqua Dream SPA</h1>
    <p>Twoje własne spa w domu.</p>
</div>

<section id="konfigurator" style="overflow: hidden;">
    <h2 class="section-title"> SKONFIGURUJ SWOJE JACUZZI</h2>

    <div class="model-grid">
        <div class="model-card active" id="card-okragle" onclick="selectModel('okragle')">
            <div class="model-img"><img src="https://i.postimg.cc/vBWjthMJ/44.jpg" alt="Model Classic"></div>
            <div class="model-info"><h4>MODEL CLASSIC (OKRĄGŁY)</h4></div>
        </div>
        <div class="model-card" id="card-kwadratowe" onclick="selectModel('kwadratowe')">
            <div class="model-img"><img src="https://i.postimg.cc/q7BdR9Tp/Untitled_3.jpg" alt="Model Modern"></div>
            <div class="model-info"><h4>MODEL MODERN (KWADRATOWY)</h4></div>
        </div>
    </div>

    <input type="radio" name="ksztalt" id="radio-okragle" value="okragle" checked style="display:none">
    <input type="radio" name="ksztalt" id="radio-kwadratowe" value="kwadratowe" style="display:none">

    <div class="card">
        <h3>1) Rozmiar – <span id="model-name-text">okrągłe</span></h3>
        <div id="rozmiar-okragle-box">
            <label>
                <input type="radio" name="baza" id="baza-okragle" value="7500" data-name="Balia Okrągła (Średnica 200 cm)" data-size="maly" checked onchange="licz()"> 
                Rozmiar Standard – <strong>Średnica 200 cm</strong> (7 500 zł)
            </label>
        </div>
        <div id="rozmiar-kwadratowe-box" class="hidden">
            <label><input type="radio" name="baza" id="baza-kwadratowe-1" value="8600" data-name="Balia Modern 200x193" data-size="maly" onchange="licz()"> 200x193 cm (8 600 zł)</label>
            <label><input type="radio" name="baza" id="baza-kwadratowe-2" value="10400" data-name="Balia Modern 215x215" data-size="duzy" onchange="licz()"> 215x215 cm (10 400 zł)</label>
        </div>
    </div>

    <div class="card">
        <h3>2) Ogrzewanie</h3>
        <div class="flex-container">
            <div class="selection-column">
                <label><input type="radio" name="ogrzewanie" value="2300" data-name="Piec zewnętrzny drewno" data-img="https://i.postimg.cc/VL920kgy/Gemini_Generated_Image_67z38k67z38k67z3.png" checked onchange="toggleCombo(true); updateHeatingUI(); licz()"> Piec zewnętrzny drewno (+2 300 zł)</label>
                <label><input type="radio" name="ogrzewanie" value="3500" id="piec-wewn" data-name="Piec wewnętrzny drewno" data-img="https://i.postimg.cc/9MV7M1QD/Gemini-Generated-Image-dv8riedv8riedv8r.png" onchange="toggleCombo(true); updateHeatingUI(); licz()"> Piec wewnętrzny drewno (+<span id="piec-wewn-txt">3 500</span> zł)</label>
                <label><input type="radio" name="ogrzewanie" value="5300" data-name="Pahlen – system elektryczny" data-img="https://i.postimg.cc/Y2hydtRM/41f41cd5_e319_4dfe_82c7_0c787a60d239.jpg" onchange="toggleCombo(false); updateHeatingUI(); licz()"> Grzałka - system elektryczny
              Wi-Fi (+5 300 zł)</label>
            </div>
            <div class="preview-column" id="heating-visuals"></div>
        </div>
    </div>

    <div id="combo-box" class="card">
        <h3>2a) Dodatki COMBO (Do pieca na drewno)</h3>
        <label><input type="checkbox" class="dodatek" value="700" data-name="Grzałka 3,5 kW" onchange="licz()"> Grzałka 3,5 kW (+700 zł)</label>
        <label><input type="checkbox" class="dodatek" value="700" data-name="Sterowanie Wi-Fi do grzałki" onchange="licz()"> Sterowanie Wi-Fi do grzałki (+700 zł)</label>
    </div>

    <div class="card">
        <h3>3) Pakiet termiczny</h3>
        <label><input type="checkbox" id="pur" data-name="Ocieplenie pianą PUR" onchange="licz()"> Ocieplenie pianą PUR (+<span id="pur-txt">400</span> zł)</label>
        <label><input type="checkbox" id="pok-std" data-name="Pokrywa Styropian" onchange="togglePokrywa('std')"> Pokrywa Styropian (+<span id="pok-std-txt">1150</span> zł)</label>
        <label><input type="checkbox" id="pok-prem" data-name="Pokrywa Premium" onchange="togglePokrywa('prem')"> Pokrywa Premium (+<span id="pok-prem-txt">1550</span> zł)</label>
    </div>

    <div class="card">
        <h3>4) Wykończenie i elewacja</h3>
        <div class="flex-container">
            <div class="selection-column">
                <label><input type="checkbox" class="dodatek" value="400" data-name="Malowanie Renner" onchange="licz()"> Malowanie na wybrany kolor (+400 zł)</label>
                <hr style="margin: 15px 0; border: 0; border-top: 1px solid #eee;">
                <label><input type="radio" name="typ_elewacji" value="0" data-name="Deska świerk pionowa" data-img="https://i.postimg.cc/vBWjthMJ/44.jpg" checked onchange="updateElevationUI(); licz()"> Deska świerk pionowa (Standard)</label>
              
                              <label><input type="radio" name="typ_elewacji" value="1500" data-name="Kompozyt" data-img="https://i.postimg.cc/wjs8DqZH/att-o-Q4j-GYaz-Je-APPMMMLq-ZNbc8EB7lzzt-Ggg-Hz-PJG1Zt-IQ.jpg" checked onchange="updateElevationUI(); licz()"> Kompozyt (Tworzywo sztuczne) (+1500zł) </label>
              
                <label id="deska-pozioma-label" class="hidden">
                    <input type="radio" name="typ_elewacji" id="radio-pozioma" value="700" data-name="Deska elewacyjna pozioma" data-img="https://i.postimg.cc/q7BdR9Tp/Untitled_3.jpg" onchange="updateElevationUI(); licz()"> 
                    Deska elewacyjna pozioma (+700 zł)
                </label>
            </div>
            <div class="preview-column" id="elevation-visuals"></div>
        </div>
    </div>

    <div class="card">
        <h3>5) Systemy masażu</h3>
        <div class="flex-container">
            <div class="selection-column">
                
                <div id="masaz-okragle-box">
                    <p style="font-weight: bold; color: var(--wood);">HYDRO (Wodny) - Okrągła:</p>
                    <label><input type="radio" name="hydro_okragle" value="0" data-name="Masaż wodny: Brak" checked onchange="updateMassageUI(); licz()"> Brak</label>
                    <label><input type="radio" name="hydro_okragle" value="1400" data-name="Hydromasaż 10 dysz" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 8 dysz (+1 400 zł)</label>
                    <label><input type="radio" name="hydro_okragle" value="1600" data-name="Hydromasaż 16 dysz" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 10 dysz (+1 600 zł)</label>
                    <label><input type="radio" name="hydro_okragle" value="2100" data-name="Hydromasaż 20 dysz" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 16 dysz (+2 100 zł)</label>
                    
                    <hr style="margin: 20px 0; border:0; border-top: 1px solid #eee;">
                    <p style="font-weight: bold; color: var(--wood);">AERO (Powietrzny) - Okrągła:</p>
                    <label><input type="radio" name="aero_okragle" value="0" data-name="Masaż powietrzny: Brak" checked onchange="updateMassageUI(); licz()"> Brak</label>
                    <label><input type="radio" name="aero_okragle" value="1300" data-name="Aeromasaż 12 dysz" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 16 dysz (+1 300 zł)</label>
                    <label><input type="radio" name="aero_okragle" value="1600" data-name="Aeromasaż 20 dysz" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 20 dysz (+1 600 zł)</label>
                   <label><input type="radio" name="aero_okragle" value="2500" data-name="Aeromasaż 20 dysz" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 32 dysz (+2 500 zł)</label>
                </div>

                <div id="masaz-kwadratowe-box" class="hidden">
                    <p style="font-weight: bold; color: var(--wood);">HYDRO (Wodny) - Kwadratowa:</p>
                    <label><input type="radio" name="hydro_kwadratowe" value="0" data-name="Masaż wodny: Brak" checked onchange="updateMassageUI(); licz()"> Brak</label>
                    <label><input type="radio" name="hydro_kwadratowe" value="1600" data-name="Hydromasaż 10 dysz" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 8 dysz (+1 600 zł)</label>
                    <label><input type="radio" name="hydro_kwadratowe" value="2000" data-name="Hydromasaż 18 dysz" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 10 dysz (+2 000 zł)</label>
                    <label><input type="radio" name="hydro_kwadratowe" value="2900" data-name="Hydromasaż 24 dysze" data-img="https://i.postimg.cc/4NQwMrcs/hdyro.jpg" onchange="updateMassageUI(); licz()"> 16 dysze (+2 900 zł)</label>
                    
                    <hr style="margin: 20px 0; border:0; border-top: 1px solid #eee;">
                    <p style="font-weight: bold; color: var(--wood);">AERO (Powietrzny) - Kwadratowa:</p>
                    <label><input type="radio" name="aero_kwadratowe" value="0" data-name="Masaż powietrzny: Brak" checked onchange="updateMassageUI(); licz()"> Brak</label>
                    <label><input type="radio" name="aero_kwadratowe" value="1500" data-name="Aeromasaż 16 dysz" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 16 dysz (+1 500 zł)</label>
                    <label><input type="radio" name="aero_kwadratowe" value="1800" data-name="Aeromasaż 20 dysze" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 20 dysze (+1 800 zł)</label>
                  <label><input type="radio" name="aero_kwadratowe" value="2500" data-name="Aeromasaż 24 dysze" data-img="https://i.postimg.cc/dtjnXzCP/aero.jpg" onchange="updateMassageUI(); licz()"> 32 dysze (+2 500 zł)</label>
                </div>

                <div id="promo-info" style="display:none; color: var(--green); font-weight: bold; margin-top: 15px;"> Rabat Combo -300 zł aktywny!</div>
            </div>
            <div class="preview-column" id="massage-visuals"></div>
        </div>
    </div>

    <div class="card">
        <h3>6) Filtracja i Dezynfekcja</h3>
        <label><input type="checkbox" class="dodatek" value="600" data-name="Filtr kartuszowy" onchange="licz()"> Filtr kartuszowy (+600 zł)</label>
        <label><input type="checkbox" class="dodatek" id="filtr-kul" value="1000" data-name="Filtr kulkowy" onchange="licz()"> Filtr kulkowy (+1 000 zł)</label>
        <label><input type="checkbox" class="dodatek" value="600" data-name="Ozonator (Dezynfekcja)" onchange="licz()"> Generator ozonu (+600 zł)</label>
    </div>

    <div class="card">
        <h3>7) Oświetlenie</h3>
        <label><input type="checkbox" class="dodatek" value="400" data-name="Lampka RGB 51mm" onchange="licz()"> Lampka RGB 51mm (+400 zł)</label>
        <label><input type="checkbox" class="dodatek" value="900" data-name="Gwiezdne niebo (LEDy)" onchange="licz()"> Gwiezdne niebo (LEDy w oparciach) (+900 zł)</label>
    </div>

    <div class="card">
        <h3>8) Schodki wejściowe</h3>
        <div class="flex-container">
            <div class="selection-column">
                <div id="schody-okragle">
                    <label><input type="checkbox" class="dodatek" value="500" data-name="Schodki okrągłe STANDARD" onchange="licz()"> Schodki okrągłe STANDARD (+500 zł)</label>
                    <label><input type="checkbox" class="dodatek" value="1100" data-name="Schodki okrągłe PREMIUM" onchange="licz()"> Schodki okrągłe PREMIUM (+1 100 zł)</label>
                </div>
                <div id="schody-kwadratowe" class="hidden">
                    <label><input type="checkbox" class="dodatek" value="300" data-name="Schodki małe kwadrat" onchange="licz()"> Schodki małe STANDARD (+300 zł)</label>
                    <label><input type="checkbox" class="dodatek" value="1000" data-name="Schodki duże kwadrat" onchange="licz()"> Schodki duże PREMIUM (+1 000 zł)</label>
                </div>
            </div>
            <div class="preview-column">
                <div class="preview-box">
                    <img src="https://i.postimg.cc/vBWjthMJ/44.jpg" id="stairs-img" alt="Podgląd schodków">
                    <p>Podgląd schodków</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <h3>9) Dane do oferty</h3>
        <input type="text" id="cust-name" placeholder="Imię i Nazwisko" style="width:100%; padding:14px; margin-bottom:10px; border:1px solid #ddd; border-radius:8px; box-sizing: border-box;" oninput="updateMailLink()">
        <input type="tel" id="cust-phone" placeholder="Numer telefonu" style="width:100%; padding:14px; border:1px solid #ddd; border-radius:8px; box-sizing: border-box;" oninput="updateMailLink()">
    </div>

    <div class="card">
        <h3>10) Kontakt i Zamówienie</h3>
        <p style="font-size: 0.9rem; color: #666; margin-bottom: 15px; text-align: center;">Zadzwoń do nas lub wyślij gotową konfigurację mailowo.</p>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
            <a href="tel:+48 883 934 703" class="contact-btn">📞 Zadzwoń</a>
            <a href="mailto:aquadreamspa.kontakt@gmail.com" id="mail-link" class="contact-btn">📧 Wyślij zapytanie</a>
        </div>
    </div>

    <button class="btn-summary" onclick="showSummary()">GENERUJ PODSUMOWANIE PDF</button>
</section>

<section id="galeria">
    <h2 class="section-title">NASZE REALIZACJE</h2>
    <div class="gallery-grid">
        <div class="gallery-item"><img src="https://i.postimg.cc/vBWjthMJ/44.jpg" alt="Realizacja 1"></div>
        <div class="gallery-item"><img src="https://i.postimg.cc/kMBhT7s7/ca4e300c_9754_48e2_853f_60ab5f1945de.jpg" alt="Realizacja 2"></div>
        <div class="gallery-item"><img src="https://i.postimg.cc/q7BdR9Tp/Untitled_3.jpg" alt="Realizacja 3"></div>
        <div class="gallery-item"><img src="https://i.postimg.cc/ZqYhR1S5/Untitled_24.jpg" alt="Realizacja 4"></div>
        <div class="gallery-item"><img src="https://i.postimg.cc/nLVtz6JZ/Untitled_2.jpg" alt="Realizacja 5"></div>
        <div class="gallery-item"><img src="https://i.postimg.cc/wjs8DqZH/att-o-Q4j-GYaz-Je-APPMMMLq-ZNbc8EB7lzzt-Ggg-Hz-PJG1Zt-IQ.jpg" alt="Realizacja 6"></div>
    </div>
</section>

<div class="price-footer">Cena Twojej konfiguracji: <span id="wynik">0</span> zł</div>

<div id="modal-summary">
    <div class="modal-content">
        <div id="pdf-area" style="padding: 10px;">
            <h2 style="color: var(--wood); border-bottom: 2px solid var(--wood); padding-bottom: 10px; margin-top: 0;">Konfiguracja SPA - Aqua Dream</h2>
            <div id="summary-contact" style="margin: 20px 0;"></div>
            <div id="summary-list"></div>
            <h3 style="text-align:right; margin-top: 25px; border-top: 2px solid #333; padding-top: 15px;">Suma: <span id="summary-total">0</span> zł</h3>
        </div>
        <div style="display:flex; gap:10px; margin-top:25px;">
            <button onclick="downloadPDF()" style="flex:2; padding:15px; background:var(--green); color:white; border:none; border-radius:8px; cursor:pointer; font-weight:bold;">POBIERZ PDF</button>
            <button onclick="closeSummary()" style="flex:1; padding:15px; background:#999; color:white; border:none; border-radius:8px; cursor:pointer;">ZAMKNIJ</button>
        </div>
    </div>
</div>

<script>
    function selectModel(m) {
        document.getElementById('card-okragle').classList.toggle('active', m === 'okragle');
        document.getElementById('card-kwadratowe').classList.toggle('active', m === 'kwadratowe');
        document.getElementById('radio-okragle').checked = (m === 'okragle');
        document.getElementById('radio-kwadratowe').checked = (m === 'kwadratowe');
        
        document.getElementById('model-name-text').innerText = (m === 'okragle' ? 'okrągłe' : 'kwadratowe');
        document.getElementById('deska-pozioma-label').classList.toggle('hidden', m !== 'kwadratowe');
        document.getElementById('rozmiar-okragle-box').classList.toggle('hidden', m !== 'okragle');
        document.getElementById('rozmiar-kwadratowe-box').classList.toggle('hidden', m !== 'kwadratowe');
        document.getElementById('schody-okragle').classList.toggle('hidden', m !== 'okragle');
        document.getElementById('schody-kwadratowe').classList.toggle('hidden', m !== 'kwadratowe');

        // NOWOŚĆ: Przełączanie widoczności paneli masażu
        document.getElementById('masaz-okragle-box').classList.toggle('hidden', m !== 'okragle');
        document.getElementById('masaz-kwadratowe-box').classList.toggle('hidden', m !== 'kwadratowe');

        // Czyszczenie zaznaczeń z nieaktywnego modelu (zapobiega doliczaniu ukrytych opcji)
        if(m === 'okragle') {
            document.querySelectorAll('#schody-kwadratowe input').forEach(i => i.checked = false);
            // reset masaży kwadratowych do "Brak"
            document.querySelector('input[name="hydro_kwadratowe"][value="0"]').checked = true;
            document.querySelector('input[name="aero_kwadratowe"][value="0"]').checked = true;

            const pozioma = document.getElementById('radio-pozioma');
            if(pozioma && pozioma.checked) {
                document.querySelector('input[name="typ_elewacji"][value="0"]').checked = true;
            }
        } else {
            document.querySelectorAll('#schody-okragle input').forEach(i => i.checked = false);
            // reset masaży okrągłych do "Brak"
            document.querySelector('input[name="hydro_okragle"][value="0"]').checked = true;
            document.querySelector('input[name="aero_okragle"][value="0"]').checked = true;
        }

        const piecWewnVal = (m === 'okragle' ? 3500 : 3700);
        document.getElementById('piec-wewn-txt').innerText = piecWewnVal.toLocaleString();
        document.getElementById('piec-wewn').value = piecWewnVal;

        if(m === 'kwadratowe') { 
            document.getElementById('baza-kwadratowe-1').checked = true; 
        } else { 
            document.getElementById('baza-okragle').checked = true;
        }

        updateElevationUI();
        updateHeatingUI();
        updateMassageUI();
        licz();
    }

    function updateHeatingUI() {
        const visuals = document.getElementById('heating-visuals');
        const sel = document.querySelector('input[name="ogrzewanie"]:checked');
        visuals.innerHTML = '';
        if(sel && sel.dataset.img) {
            visuals.innerHTML = `<div class="preview-box"><img src="${sel.dataset.img}" alt="${sel.dataset.name}"><p>${sel.dataset.name}</p></div>`;
        }
    }

    function updateElevationUI() {
        const visuals = document.getElementById('elevation-visuals');
        const sel = document.querySelector('input[name="typ_elewacji"]:checked');
        visuals.innerHTML = '';
        if(sel && sel.dataset.img) {
            visuals.innerHTML = `<div class="preview-box"><img src="${sel.dataset.img}" alt="${sel.dataset.name}"><p>${sel.dataset.name}</p></div>`;
        }
    }

    // ZMODYFIKOWANA FUNKCJA: dynamicznie sprawdza aktywne pole masażu zależnie od wybranego kształtu
    function updateMassageUI() {
        const visuals = document.getElementById('massage-visuals');
        const ksztalt = document.querySelector('input[name="ksztalt"]:checked').value;
        
        const h = document.querySelector(`input[name="hydro_${ksztalt}"]:checked`);
        const a = document.querySelector(`input[name="aero_${ksztalt}"]:checked`);
        
        visuals.innerHTML = ''; 
        if(h && h.value !== "0" && h.dataset.img) visuals.innerHTML += `<div class="preview-box"><img src="${h.dataset.img}" alt="${h.dataset.name}"><p>${h.dataset.name}</p></div>`;
        if(a && a.value !== "0" && a.dataset.img) visuals.innerHTML += `<div class="preview-box"><img src="${a.dataset.img}" alt="${a.dataset.name}"><p>${a.dataset.name}</p></div>`;
    }

    function toggleCombo(show) {
        document.getElementById('combo-box').classList.toggle('hidden', !show);
        if(!show) document.querySelectorAll('#combo-box input').forEach(i => i.checked = false);
    }

    function togglePokrywa(type) {
        if(type === 'std') document.getElementById('pok-prem').checked = false;
        if(type === 'prem') document.getElementById('pok-std').checked = false;
        licz();
    }

    function updateMailLink() {
        const name = document.getElementById('cust-name').value || "Brak danych";
        const phone = document.getElementById('cust-phone').value || "Brak danych";
        const total = document.getElementById('wynik').innerText;
        const mail = "biuro@aquadream.pl";
        
        const subject = `Zapytanie o konfigurację SPA - ${name}`;
        const body = `Dzień dobry,\n\nInteresuje mnie balia Aqua Dream.\nCena z konfiguratora: ${total} zł.\n\nDane kontaktowe:\nImię: ${name}\nTelefon: ${phone}`;
        
        document.getElementById('mail-link').href = `mailto:${mail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    }

    // ZMODYFIKOWANA FUNKCJA: zliczanie uwzględnia podział na hydro/aero okrągłe i kwadratowe
    function licz() {
        let suma = 0;
        const b = document.querySelector('input[name="baza"]:checked');
        const o = document.querySelector('input[name="ogrzewanie"]:checked');
        if(!b || !o) return;
        
        suma += parseInt(b.value) + parseInt(o.value);

        // Pobieramy kształt i dynamicznie zliczamy odpowiednie radio buttony
        const ksztalt = document.querySelector('input[name="ksztalt"]:checked').value;
        const h = document.querySelector(`input[name="hydro_${ksztalt}"]:checked`);
        const a = document.querySelector(`input[name="aero_${ksztalt}"]:checked`);
        
        let vH = h ? parseInt(h.value) : 0;
        let vA = a ? parseInt(a.value) : 0;
        suma += (vH + vA);
        
        if(vH > 0 && vA > 0) { 
            suma -= 300; 
            document.getElementById('promo-info').style.display = 'block'; 
        } else { 
            document.getElementById('promo-info').style.display = 'none'; 
        }

        const size = b.dataset.size;
        let cP = (size === 'duzy') ? 500 : 400;
        let cS = (size === 'duzy') ? 1500 : 1150;
        let cPr = (size === 'duzy') ? 2000 : 1550;
        
        document.getElementById('pur-txt').innerText = cP;
        document.getElementById('pok-std-txt').innerText = cS;
        document.getElementById('pok-prem-txt').innerText = cPr;

        if(document.getElementById('pur').checked) suma += cP;
        if(document.getElementById('pok-std').checked) suma += cS;
        if(document.getElementById('pok-prem').checked) suma += cPr;

        document.querySelectorAll('.dodatek:checked').forEach(d => { suma += parseInt(d.value); });
        
        const ele = document.querySelector('input[name="typ_elewacji"]:checked');
        if(ele) suma += parseInt(ele.value);

        document.getElementById('wynik').innerText = suma.toLocaleString();
        updateMailLink();
    }

    function showSummary() {
        const list = document.getElementById('summary-list');
        list.innerHTML = '';
        const name = document.getElementById('cust-name').value || "Brak danych";
        const tel = document.getElementById('cust-phone').value || "Brak danych";
        document.getElementById('summary-contact').innerHTML = `<strong>Klient:</strong> ${name}<br><strong>Tel:</strong> ${tel}`;
        
        document.querySelectorAll('input:checked').forEach(i => {
            if(i.name === 'ksztalt') return;

            let label = i.dataset.name || (i.parentElement ? i.parentElement.innerText.split('(')[0].trim() : "");
            let val = i.value;
            
            if(i.id === 'pur') val = document.getElementById('pur-txt').innerText;
            if(i.id === 'pok-std') val = document.getElementById('pok-std-txt').innerText;
            if(i.id === 'pok-prem') val = document.getElementById('pok-prem-txt').innerText;
            
            // Warunek: ignoruj opcje darmowe oraz te, które znajdują się w ukrytych kontenerach (.hidden)
            if(val !== "0" && label !== "" && !i.parentElement.closest('.hidden')) {
                list.innerHTML += `<div class="summary-item"><span>${label}</span><b>${parseInt(val).toLocaleString()} zł</b></div>`;
            }
        });
        
        // Sprawdzenie rabatu combo do podsumowania PDF
        const ksztalt = document.querySelector('input[name="ksztalt"]:checked').value;
        const h = document.querySelector(`input[name="hydro_${ksztalt}"]:checked`);
        const a = document.querySelector(`input[name="aero_${ksztalt}"]:checked`);
        if(h && parseInt(h.value) > 0 && a && parseInt(a.value) > 0) {
            list.innerHTML += `<div class="summary-item" style="color:var(--green)"><span>Rabat Combo (Masaże)</span><b>-300 zł</b></div>`;
        }
        
        document.getElementById('summary-total').innerText = document.getElementById('wynik').innerText;
        document.getElementById('modal-summary').style.display = 'flex';
    }

    function closeSummary() { document.getElementById('modal-summary').style.display = 'none'; }
    
    function downloadPDF() {
        const area = document.getElementById('pdf-area');
        const opt = {
            margin: 15,
            filename: 'Oferta_AquaDream.pdf',
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2, useCORS: true },
            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
        };
        html2pdf().set(opt).from(area).save();
    }

    window.onload = () => { 
        selectModel('okragle'); 
        updateMassageUI(); 
    };
</script>
</body>
</html>