<div class=”mb-8″>
<div class=”flex justify-between text-sm mb-2″>
<span>Model</span>
<span>Wyposażenie standardowe</span>
<span>Pakiety</span>
<span>Wyposażenie dodatkowe</span>
<span>Silnik</span>
<span>Dane kontaktowe</span>
</div>
<div class=”progress-bar”>
<div class=”progress” id=”progress-bar” style=”width: 16.66%;”></div>
</div>
</div>

<!– Step 1: Model –>
<div class=”step-container active” id=”step-1″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Silver Viper DC</h2>

<div class=”flex flex-col md:flex-row”>
<div class=”md:w-1/2 p-4″>
<svg class=”boat-image w-full” viewBox=”0 0 800 400″ xmlns=”http://www.w3.org/2000/svg”>
<!– Simplified boat illustration –>
<path d=”M100,300 C150,280 250,260 400,260 C550,260 650,280 700,300 L750,300 C750,300 700,320 400,320 C100,320 50,300 50,300 Z” fill=”#e2e8f0″ stroke=”#2d3748″ stroke-width=”2″/>
<path d=”M150,260 L150,200 L650,200 L650,260″ fill=”#0066cc” stroke=”#2d3748″ stroke-width=”2″/>
<path d=”M250,200 L250,150 L550,150 L550,200″ fill=”#0066cc” stroke=”#2d3748″ stroke-width=”2″/>
<path d=”M300,150 L300,120 L500,120 L500,150″ fill=”#ffffff” stroke=”#2d3748″ stroke-width=”2″/>
<rect x=”350″ y=”170″ width=”100″ height=”30″ fill=”#ffffff” stroke=”#2d3748″ stroke-width=”2″/>
<circle cx=”400″ cy=”280″ r=”5″ fill=”#2d3748″/>
<circle cx=”450″ cy=”280″ r=”5″ fill=”#2d3748″/>
<circle cx=”350″ cy=”280″ r=”5″ fill=”#2d3748″/>
</svg>
</div>
<div class=”md:w-1/2 p-4″>
<h3 class=”text-xl font-semibold mb-4″>Parametry techniczne:</h3>
<ul class=”space-y-2″>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Długość: 6,72m</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Szerokość: 2,42m</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Waga bez silnika: 1 350kg</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Zalecana moc silnika: 200-300HP</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Kategoria projektowa: C</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Maksymalna załoga: 8 osób</span>
</li>
<li class=”flex items-center”>
<svg class=”w-5 h-5 mr-2 text-blue-600″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Zbiornik paliwa: 143L</span>
</li>
</ul>
</div>
</div>
</div>

<div class=”flex justify-end”>
<button class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”nextStep()”>
Dalej
</button>
</div>
</div>

<!– Step 2: Standard Equipment –>
<div class=”step-container” id=”step-2″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Wyposażenie standardowe</h2>

<div class=”grid grid-cols-1 md:grid-cols-2 gap-4″>
<div class=”p-4″>
<ul class=”space-y-2″>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Ploter nawigacyjny Raymarine Axiom 9 RV + przetwornik sonaru CPTS</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Kadłub Petestep</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Gniazdo zasilania 12 V, USB</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Dwustronne oparcie dla pasażera</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Daszek bimini ze stelażem chowany pod kanapą</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Zamki Abloy do bakisty rufowej</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Drabinka wejściowa na dziobie</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Wbudowany odbijacz dziobowy</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Bakisty na liny kotwiczne i cumownicze na dziobie i rufie</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Oświetlenie kabiny</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Instalacja drugiego akumulatora</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Kompozytowy pokład z drewna tekowego (pokład dziobowy, kokpit, platformy rufowe)</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Uchwyty na kubki (2 szt.)</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Zamykane schowki na odbijacze (2 szt.)</span>
</li>
</ul>
</div>
<div class=”p-4″>
<ul class=”space-y-2″>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Elektryczna pompa zęzowa</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Elektryczna morska toaleta ze zbiornikiem fekaliów</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Gaśnica 2 kg</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Filtr paliwa z separatorem</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Sterowanie hydrauliczne</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Maszt ze światłem topowym</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Zamykane drzwi kabiny</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Sieć NMEA</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Światła nawigacyjne</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Relingi, zatrzaski i drabinka kąpielowa ze stali nierdzewnej</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Schowek obok kierowcy</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Półki w kabinie</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Schowek pod siedzeniem pasażera</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Miejsce na kuchenkę w konsoli pasażera</span>
</li>
</ul>
</div>
</div>
</div>

<div class=”flex justify-between”>
<button class=”btn bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”prevStep()”>
Wstecz
</button>
<button class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”nextStep()”>
Dalej
</button>
</div>
</div>

<!– Step 3: Packages –>
<div class=”step-container” id=”step-3″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Wybierz pakiet</h2>

<div class=”grid grid-cols-1 md:grid-cols-2 gap-6″>
<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectPackage(’comfort’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Pakiet Komfort</h3>
<div class=”custom-checkbox” id=”comfort-checkbox”></div>
</div>
<ul class=”space-y-2″>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Pakiet portowy (4 odbijacze, 3 cumy, kotwica 8kg z liną 35m)</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Podłokietnik</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Lodówka szufladowa Dometic CD30</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Głośniki Bluetooth (para)</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Stolik teakowy + materac wypełniający pokład słoneczny</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Trym klapy Bennett</span>
</li>
</ul>
</div>

<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectPackage(’premium’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Pakiet Premium</h3>
<div class=”custom-checkbox” id=”premium-checkbox”></div>
</div>
<div class=”mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200″>
<p class=”text-sm text-blue-800 font-medium”>Zawiera wszystkie elementy z pakietu Komfort oraz:</p>
</div>
<ul class=”space-y-2″>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Ster strumieniowy</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Flagsztok</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Instalacja wodna (umywalka)</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Plandeka portowa</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Raymarine Axiom 12RV ploter upgrade</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Przyłącze portowe z ładowarką 25A</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Ogrzewanie Webasto Air Top 2000ST</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Wycieraczka na szybie pasażera</span>
</li>
<li class=”flex items-start”>
<svg class=”w-5 h-5 mr-2 text-blue-600 mt-0.5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<span>Światło dokowe Zaurac</span>
</li>
</ul>
</div>
</div>
</div>

<div class=”flex justify-between”>
<button class=”btn bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”prevStep()”>
Wstecz
</button>
<button class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”nextStep()”>
Dalej
</button>
</div>
</div>

<!– Step 4: Additional Equipment –>
<div class=”step-container” id=”step-4″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Wyposażenie dodatkowe</h2>

<div class=”grid grid-cols-1 md:grid-cols-2 gap-4″>
<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’stereo’)”>
<div class=”flex justify-between items-center”>
<span>Stereo Fusion MS-RA60 z dwoma głośnikami</span>
<div class=”custom-checkbox” id=”stereo-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’premium-audio’)”>
<div class=”flex justify-between items-center”>
<span>System audio premium JL Audio (jednostka, 4 podświetlane głośniki i subwoofer, wzmacniacz)</span>
<div class=”custom-checkbox” id=”premium-audio-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’rear-anchor’)”>
<div class=”flex justify-between items-center”>
<span>Winda kotwiczna rufowa (Enqbo Midi, kotwica 7,5kg, 30 m liny)</span>
<div class=”custom-checkbox” id=”rear-anchor-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’front-anchor’)”>
<div class=”flex justify-between items-center”>
<span>Winda kotwiczna dziobowa (Lewmar V700, j.w.+ łańcuch)</span>
<div class=”custom-checkbox” id=”front-anchor-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’trim-auto’)”>
<div class=”flex justify-between items-center”>
<span>Automatyka trymklap Mente Marine</span>
<div class=”custom-checkbox” id=”trim-auto-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’zipwake’)”>
<div class=”flex justify-between items-center”>
<span>Zipwake system trymowania i przechyłu</span>
<div class=”custom-checkbox” id=”zipwake-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’underwater-lights’)”>
<div class=”flex justify-between items-center”>
<span>Oświetlenie podwodne</span>
<div class=”custom-checkbox” id=”underwater-lights-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’hull-color’)”>
<div class=”flex justify-between items-center”>
<span>Kolor burt – folia KPMF Marine</span>
<div class=”custom-checkbox” id=”hull-color-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’usb’)”>
<div class=”flex justify-between items-center”>
<span>Dodatkowe gniazdo USB</span>
<div class=”custom-checkbox” id=”usb-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’antifouling’)”>
<div class=”flex justify-between items-center”>
<span>Antifouling z warstwą antyosmozową</span>
<div class=”custom-checkbox” id=”antifouling-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’gas-stove’)”>
<div class=”flex justify-between items-center”>
<span>Kuchenka gazowa z akrylową pokrywą</span>
<div class=”custom-checkbox” id=”gas-stove-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’horn’)”>
<div class=”flex justify-between items-center”>
<span>Klakson</span>
<div class=”custom-checkbox” id=”horn-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’led-cockpit’)”>
<div class=”flex justify-between items-center”>
<span>Oświetlenie LED w kokpicie</span>
<div class=”custom-checkbox” id=”led-cockpit-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’power-steering’)”>
<div class=”flex justify-between items-center”>
<span>Elektryczne wspomaganie sterowania</span>
<div class=”custom-checkbox” id=”power-steering-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’seat-suspension’)”>
<div class=”flex justify-between items-center”>
<span>System amortyzacji foteli</span>
<div class=”custom-checkbox” id=”seat-suspension-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’echo-sensor’)”>
<div class=”flex justify-between items-center”>
<span>Raymarine sensor echosondy RV-100</span>
<div class=”custom-checkbox” id=”echo-sensor-checkbox”></div>
</div>
</div>

<div class=”option-card rounded-lg border p-4 shadow-md” onclick=”toggleAdditionalEquipment(’towing-mast’)”>
<div class=”flex justify-between items-center”>
<span>Maszt do holowania</span>
<div class=”custom-checkbox” id=”towing-mast-checkbox”></div>
</div>
</div>
</div>
</div>

<div class=”flex justify-between”>
<button class=”btn bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”prevStep()”>
Wstecz
</button>
<button class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”nextStep()”>
Dalej
</button>
</div>
</div>

<!– Step 5: Engine –>
<div class=”step-container” id=”step-5″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Wybierz silnik</h2>

<div class=”grid grid-cols-1 md:grid-cols-2 gap-6″>
<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectEngine(’suzuki-300-black’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Suzuki DF300AP czarny</h3>
<div class=”custom-checkbox” id=”suzuki-300-black-checkbox”></div>
</div>
<div class=”flex justify-center”>
<svg class=”w-48 h-48″ viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>
<path d=”M50,10 L60,20 L60,80 L50,90 L40,80 L40,20 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<path d=”M60,30 L70,35 L70,65 L60,70 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<path d=”M40,30 L30,35 L30,65 L40,70 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<text x=”50″ y=”50″ font-size=”8″ text-anchor=”middle” fill=”white”>300HP</text>
</svg>
</div>
</div>

<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectEngine(’suzuki-300-white’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Suzuki DF300AP biały</h3>
<div class=”custom-checkbox” id=”suzuki-300-white-checkbox”></div>
</div>
<div class=”flex justify-center”>
<svg class=”w-48 h-48″ viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>
<path d=”M50,10 L60,20 L60,80 L50,90 L40,80 L40,20 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<path d=”M60,30 L70,35 L70,65 L60,70 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<path d=”M40,30 L30,35 L30,65 L40,70 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<text x=”50″ y=”50″ font-size=”8″ text-anchor=”middle” fill=”#333″>300HP</text>
</svg>
</div>
</div>

<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectEngine(’suzuki-250-black’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Suzuki DF250AP czarny</h3>
<div class=”custom-checkbox” id=”suzuki-250-black-checkbox”></div>
</div>
<div class=”flex justify-center”>
<svg class=”w-48 h-48″ viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>
<path d=”M50,10 L60,20 L60,80 L50,90 L40,80 L40,20 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<path d=”M60,30 L70,35 L70,65 L60,70 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<path d=”M40,30 L30,35 L30,65 L40,70 Z” fill=”#1a1a1a” stroke=”#333″ stroke-width=”1″/>
<text x=”50″ y=”50″ font-size=”8″ text-anchor=”middle” fill=”white”>250HP</text>
</svg>
</div>
</div>

<div class=”option-card rounded-lg border p-6 shadow-md” onclick=”selectEngine(’suzuki-250-white’)”>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold”>Suzuki DF250AP biały</h3>
<div class=”custom-checkbox” id=”suzuki-250-white-checkbox”></div>
</div>
<div class=”flex justify-center”>
<svg class=”w-48 h-48″ viewBox=”0 0 100 100″ xmlns=”http://www.w3.org/2000/svg”>
<path d=”M50,10 L60,20 L60,80 L50,90 L40,80 L40,20 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<path d=”M60,30 L70,35 L70,65 L60,70 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<path d=”M40,30 L30,35 L30,65 L40,70 Z” fill=”#f5f5f5″ stroke=”#ddd” stroke-width=”1″/>
<text x=”50″ y=”50″ font-size=”8″ text-anchor=”middle” fill=”#333″>250HP</text>
</svg>
</div>
</div>
</div>
</div>

<div class=”flex justify-between”>
<button class=”btn bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”prevStep()”>
Wstecz
</button>
<button class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”nextStep()”>
Dalej
</button>
</div>
</div>

<!– Step 6: Contact Information –>
<div class=”step-container” id=”step-6″>
<div class=”bg-white rounded-lg shadow-lg p-6 mb-8″>
<h2 class=”text-2xl font-bold mb-6 text-center”>Twoje dane kontaktowe</h2>

<div class=”space-y-4″>
<div>
<label for=”first-name” class=”block text-sm font-medium text-gray-700 mb-1″>Imię</label>
<input type=”text” id=”first-name” class=”w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500″ required>
</div>

<div>
<label for=”last-name” class=”block text-sm font-medium text-gray-700 mb-1″>Nazwisko</label>
<input type=”text” id=”last-name” class=”w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500″ required>
</div>

<div>
<label for=”email” class=”block text-sm font-medium text-gray-700 mb-1″>Email</label>
<input type=”email” id=”email” class=”w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500″ required>
</div>

<div>
<label for=”phone” class=”block text-sm font-medium text-gray-700 mb-1″>Telefon</label>
<input type=”tel” id=”phone” class=”w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500″ required>
</div>

<div class=”flex items-start mt-4″>
<div class=”flex items-center h-5″>
<input id=”terms” type=”checkbox” class=”focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded” required>
</div>
<div class=”ml-3 text-sm”>
<label for=”terms” class=”font-medium text-gray-700″>Wyrażam zgodę na przetwarzanie moich danych osobowych w celu przygotowania oferty.</label>
</div>
</div>
</div>
</div>

<div class=”flex justify-between”>
<button class=”btn bg-gray-500 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”prevStep()”>
Wstecz
</button>
<button id=”submit-button” class=”btn bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg shadow-md” onclick=”submitForm()”>
Wyślij prośbę o ofertę
</button>
</div>
</div>

<!– Summary Sidebar –>
<div class=”fixed top-0 right-0 h-full w-80 bg-white shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out” id=”summary-sidebar”>
<div class=”p-6 h-full overflow-y-auto”>
<div class=”flex justify-between items-center mb-6″>
<h3 class=”text-xl font-bold”>Twoja konfiguracja</h3>
<button class=”text-gray-500 hover:text-gray-700″ onclick=”toggleSummary()”>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M6 18L18 6M6 6l12 12″></path>
</svg>
</button>
</div>

<div class=”space-y-4″>
<div>
<h4 class=”font-semibold text-gray-700″>Model</h4>
<p>Silver Viper DC</p>
</div>

<div id=”package-summary”>
<h4 class=”font-semibold text-gray-700″>Pakiet</h4>
<p id=”selected-package”>Nie wybrano</p>
</div>

<div id=”equipment-summary”>
<h4 class=”font-semibold text-gray-700″>Wyposażenie dodatkowe</h4>
<ul id=”selected-equipment” class=”list-disc pl-5 text-sm”>
<li class=”text-gray-500″>Nie wybrano</li>
</ul>
</div>

<div id=”engine-summary”>
<h4 class=”font-semibold text-gray-700″>Silnik</h4>
<p id=”selected-engine”>Nie wybrano</p>
</div>
</div>
</div>
</div>

<!– Toggle Summary Button –>
<button class=”fixed bottom-6 right-6 bg-blue-600 text-white rounded-full p-3 shadow-lg z-10″ onclick=”toggleSummary()”>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z”></path>
</svg>
</button>

<!– Thank You Modal –>
<div class=”modal” id=”thank-you-modal”>
<div class=”bg-white rounded-lg shadow-xl p-8 max-w-md mx-auto”>
<div class=”text-center”>
<svg class=”mx-auto h-16 w-16 text-green-500″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M5 13l4 4L19 7″></path>
</svg>
<h3 class=”text-2xl font-bold text-gray-900 mt-4″>Dziękujemy!</h3>
<p class=”text-gray-600 mt-2″>Twoja konfiguracja została wysłana. Skontaktujemy się z Tobą wkrótce.</p>
<button class=”mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md” onclick=”closeModal()”>
Zamknij
</button>
</div>
</div>
</div>
</div>

<script>
// Global variables
let currentStep = 1;
const totalSteps = 6;
let selectedPackage = null;
let selectedEquipment = [];
let selectedEngine = null;

// Initialize
document.addEventListener(’DOMContentLoaded’, function() {
updateProgressBar();
});

// Navigation functions
function nextStep() {
if (currentStep < totalSteps) {
document.getElementById(`step-${currentStep}`).classList.remove(’active’);
currentStep++;
document.getElementById(`step-${currentStep}`).classList.add(’active’);
updateProgressBar();
}
}

function prevStep() {
if (currentStep > 1) {
document.getElementById(`step-${currentStep}`).classList.remove(’active’);
currentStep–;
document.getElementById(`step-${currentStep}`).classList.add(’active’);
updateProgressBar();
}
}

function updateProgressBar() {
const progressPercentage = (currentStep / totalSteps) * 100;
document.getElementById(’progress-bar’).style.width = `${progressPercentage}%`;
}

// Selection functions
function selectPackage(package) {
// Clear previous selection
document.querySelectorAll(’#step-3 .option-card’).forEach(card => {
card.classList.remove(’selected’);
});
document.querySelectorAll(’#step-3 .custom-checkbox’).forEach(checkbox => {
checkbox.classList.remove(’checked’);
});

// Set new selection
if (package === 'premium’) {
// If premium is selected, also select comfort
document.querySelectorAll(’#step-3 .option-card’).forEach(card => {
card.classList.add(’selected’);
});
document.getElementById(’comfort-checkbox’).classList.add(’checked’);
document.getElementById(’premium-checkbox’).classList.add(’checked’);
selectedPackage = 'premium’;
} else {
// Only select comfort
const card = document.querySelector(’#step-3 .option-card:first-child’);
card.classList.add(’selected’);
document.getElementById(’comfort-checkbox’).classList.add(’checked’);
selectedPackage = 'comfort’;
}

updateSummary();
}

function toggleAdditionalEquipment(equipment) {
const checkbox = document.getElementById(`${equipment}-checkbox`);
const card = checkbox.closest(’.option-card’);

if (checkbox.classList.contains(’checked’)) {
checkbox.classList.remove(’checked’);
card.classList.remove(’selected’);
selectedEquipment = selectedEquipment.filter(item => item !== equipment);
} else {
checkbox.classList.add(’checked’);
card.classList.add(’selected’);
selectedEquipment.push(equipment);
}

updateSummary();
}

function selectEngine(engine) {
// Clear previous selection
document.querySelectorAll(’#step-5 .option-card’).forEach(card => {
card.classList.remove(’selected’);
});
document.querySelectorAll(’#step-5 .custom-checkbox’).forEach(checkbox => {
checkbox.classList.remove(’checked’);
});

// Set new selection
const checkbox = document.getElementById(`${engine}-checkbox`);
const card = checkbox.closest(’.option-card’);
card.classList.add(’selected’);
checkbox.classList.add(’checked’);

selectedEngine = engine;
updateSummary();
}

// Summary functions
function toggleSummary() {
const sidebar = document.getElementById(’summary-sidebar’);
sidebar.classList.toggle(’translate-x-full’);
sidebar.classList.toggle(’translate-x-0′);
}

function updateSummary() {
// Update package
if (selectedPackage) {
document.getElementById(’selected-package’).textContent =
selectedPackage === 'comfort’ ? 'Pakiet Komfort’ : 'Pakiet Premium (zawiera Pakiet Komfort)’;
} else {
document.getElementById(’selected-package’).textContent = 'Nie wybrano’;
}

// Update equipment
const equipmentList = document.getElementById(’selected-equipment’);
equipmentList.innerHTML = ”;

if (selectedEquipment.length > 0) {
selectedEquipment.forEach(item => {
const equipmentNames = {
'stereo’: 'Stereo Fusion MS-RA60 z dwoma głośnikami’,
'premium-audio’: 'System audio premium JL Audio’,
'rear-anchor’: 'Winda kotwiczna rufowa’,
'front-anchor’: 'Winda kotwiczna dziobowa’,
'trim-auto’: 'Automatyka trymklap Mente Marine’,
'zipwake’: 'Zipwake system trymowania i przechyłu’,
'underwater-lights’: 'Oświetlenie podwodne’,
'hull-color’: 'Kolor burt – folia KPMF Marine’,
'usb’: 'Dodatkowe gniazdo USB’,
'antifouling’: 'Antifouling z warstwą antyosmozową’,
'gas-stove’: 'Kuchenka gazowa z akrylową pokrywą’,
'horn’: 'Klakson’,
'led-cockpit’: 'Oświetlenie LED w kokpicie’,
'power-steering’: 'Elektryczne wspomaganie sterowania’,
'seat-suspension’: 'System amortyzacji foteli’,
'echo-sensor’: 'Raymarine sensor echosondy RV-100′,
'towing-mast’: 'Maszt do holowania’
};

const li = document.createElement(’li’);
li.textContent = equipmentNames[item];
equipmentList.appendChild(li);
});
} else {
const li = document.createElement(’li’);
li.textContent = 'Nie wybrano’;
li.classList.add(’text-gray-500′);
equipmentList.appendChild(li);
}

// Update engine
if (selectedEngine) {
const engineNames = {
'suzuki-300-black’: 'Suzuki DF300AP czarny’,
'suzuki-300-white’: 'Suzuki DF300AP biały’,
'suzuki-250-black’: 'Suzuki DF250AP czarny’,
'suzuki-250-white’: 'Suzuki DF250AP biały’
};
document.getElementById(’selected-engine’).textContent = engineNames[selectedEngine];
} else {
document.getElementById(’selected-engine’).textContent = 'Nie wybrano’;
}
}

// Form submission
function submitForm() {
const firstName = document.getElementById(’first-name’).value;
const lastName = document.getElementById(’last-name’).value;
const email = document.getElementById(’email’).value;
const phone = document.getElementById(’phone’).value;
const termsAccepted = document.getElementById(’terms’).checked;

// Validate form
if (!firstName || !lastName || !email || !phone || !termsAccepted) {
alert(’Proszę wypełnić wszystkie pola formularza i zaakceptować warunki.’);
return;
}

// Prepare data for submission
const formData = {
firstName,
lastName,
email,
phone,
model: 'Silver Viper DC’,
package: selectedPackage,
additionalEquipment: selectedEquipment,
engine: selectedEngine
};

// In a real implementation, you would send this data to the server
console.log(’Form data:’, formData);

// Simulate sending email
// In a real WordPress implementation, this would be handled by a server-side script
// that would send the email to krzysztof@grupamarine.pl

// Show thank you modal
document.getElementById(’thank-you-modal’).classList.add(’active’);
}

function closeModal() {
document.getElementById(’thank-you-modal’).classList.remove(’active’);
}
</script>