magico.prototype/prototype/superpilot-web/footer.php

<!-- Reusable Modals -->
<?php include __DIR__ . '/booking-modal.php'; ?>
<?php include __DIR__ . '/sos-modal.php'; ?>

<!-- Modal Wideo-Wizytówki Pilota (Autoprezentacja) -->
<div class="modal fade" id="videoPitchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg" style="border-radius: var(--sp-radius-md); overflow: hidden; background: #0f172a; color: white;">
            
            <div class="modal-header border-0 pb-0">
                <div class="d-flex align-items-center gap-2">
                    <span class="badge bg-danger rounded-pill" style="font-size: 0.7rem;">WIDEO AUTOPREZENTACJA</span>
                    <h6 class="modal-title fw-bold text-white mb-0" id="videoModalPilotName">Oskar Kaczmarek</h6>
                    <span class="text-white-50 small" id="videoModalLength">(1:15 min)</span>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
            </div>

            <div class="modal-body p-4 text-center">
                
                <!-- Ekran symulowanego wideo playera -->
                <div class="position-relative rounded-3 overflow-hidden d-flex flex-column align-items-center justify-content-center p-5 mb-3" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); min-height: 320px; border: 1px solid rgba(255,255,255,0.1);">
                    
                    <!-- Próbka audio/video avatara -->
                    <div class="rounded-circle d-flex align-items-center justify-content-center mb-3 shadow-lg" style="width: 84px; height: 84px; background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-violet) 100%); font-size: 2.2rem; font-weight: 800;">
                        OK
                    </div>

                    <h5 class="fw-bold text-white mb-1">„Buongiorno! Nazywam się Oskar Kaczmarek...”</h5>
                    <p class="text-white-50 small mb-3" style="max-width: 520px;">
                        Posłuchaj próbki autoprezentacji: dykcja, prezencja, płynne przejście na język włoski i angielski, opanowanie i entuzjazm do pracy z grupami wycieczkowymi.
                    </p>

                    <!-- Pasek postępu odtwarzacza -->
                    <div class="w-100 progress bg-dark" style="height: 6px; max-width: 480px;">
                        <div id="videoMockProgress" class="progress-bar bg-primary" style="width: 45%;"></div>
                    </div>
                    <div class="d-flex justify-content-between text-white-50 small mt-1 w-100" style="max-width: 480px; font-size: 0.72rem;">
                        <span>0:34</span>
                        <span>1:15</span>
                    </div>

                    <!-- Fale dźwiękowe w tle -->
                    <div class="d-flex align-items-center gap-1 mt-3">
                        <span class="badge bg-label-primary px-3 py-1 rounded-pill"><i class='bx bx-volume-full'></i> Dźwięk HD</span>
                        <span class="badge bg-label-success px-3 py-1 rounded-pill"><i class='bx bx-check-shield'></i> Zweryfikowany przez Superpilot</span>
                    </div>

                </div>

                <!-- Podsumowanie kompetencji zweryfikowanych w wideo -->
                <div class="row g-2 text-start">
                    <div class="col-md-4">
                        <div class="p-2 rounded bg-white bg-opacity-10">
                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Język Włoski</div>
                            <small class="text-white-50" style="font-size: 0.74rem;">Płynna wymowa i słownictwo branżowe</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-2 rounded bg-white bg-opacity-10">
                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Dyplomacja & Grupa</div>
                            <small class="text-white-50" style="font-size: 0.74rem;">Naturalne podejście do trudnych sytuacji</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-2 rounded bg-white bg-opacity-10">
                            <div class="text-success small fw-bold"><i class='bx bx-check'></i> Prezencja Osobista</div>
                            <small class="text-white-50" style="font-size: 0.74rem;">Wysoka kultura osobista, schludność</small>
                        </div>
                    </div>
                </div>

            </div>

            <div class="modal-footer border-0 pt-0 pb-4 px-4 justify-content-between">
                <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">Zamknij</button>
                <button type="button" class="btn btn-superpilot" onclick="bootstrap.Modal.getInstance(document.getElementById('videoPitchModal')).hide(); openBookingModal('1', 'Oskar Kaczmarek', '16.09.2027 - 24.09.2027');">
                    <i class='bx bx-calendar-check'></i> Zarezerwuj pilota po obejrzeniu
                </button>
            </div>

        </div>
    </div>
</div>

<!-- Modal Podglądu Zdjęć ze Szlaków (Lightbox) -->
<div class="modal fade" id="photoLightboxModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg bg-dark text-white" style="border-radius: var(--sp-radius-md); overflow: hidden;">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold text-white mb-0" id="lightboxTitle">Zdjęcie z trasy</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
            </div>
            <div class="modal-body p-4 text-center">
                <div class="rounded-3 d-flex align-items-center justify-content-center p-5 mb-2" id="lightboxPlaceholder" style="min-height: 380px; background: linear-gradient(135deg, #1e293b, #334155); color: white;">
                    <div class="text-center">
                        <i class='bx bx-landscape' style="font-size: 4rem; opacity: 0.8;"></i>
                        <h5 class="fw-bold mt-2" id="lightboxSubtext">Florencja & Toskania — Grupa objazdowa Almatur</h5>
                        <p class="text-white-50 small">Fotografia wykonana podczas realizacji programu autokarowego • Wrzesień 2026</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stopka desktopowa -->
<footer class="content-footer footer bg-white border-top py-3 mt-5">
    <div class="container-xxl d-flex flex-wrap justify-content-between align-items-center py-2 flex-md-row flex-column">
        <div class="mb-2 mb-md-0 small text-muted">
            © <?= date('Y') ?> <strong>Superpilot</strong> — Ekosystem TravelManager & PrzezMorze dla Biur Podróży.
        </div>
        <div class="d-flex align-items-center gap-3 small">
            <span class="text-success fw-semibold"><i class='bx bx-shield-quarter'></i> Certyfikacja Superpilot Academy</span>
            <a href="courses.php" class="text-secondary text-decoration-none">Programy Szkoleń</a>
            <a href="../travelleader-mobile/profile.php" target="_blank" class="text-primary text-decoration-none">Aplikacja Mobilna Pilota</a>
        </div>
    </div>
</footer>

<div class="content-backdrop fade"></div>
</div><!-- /.content-wrapper -->
</div><!-- /.layout-page -->
</div><!-- /.layout-container -->
</div><!-- /.layout-wrapper -->

<!-- Sneat Core JS -->
<script src="<?= $basePath ?>/assets/vendor/libs/jquery/jquery.js"></script>
<script src="<?= $basePath ?>/assets/vendor/libs/popper/popper.js"></script>
<script src="<?= $basePath ?>/assets/vendor/js/bootstrap.js"></script>
<script src="<?= $basePath ?>/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="<?= $basePath ?>/assets/vendor/libs/hammer/hammer.js"></script>
<script src="<?= $basePath ?>/assets/vendor/js/menu.js"></script>
<script src="<?= $basePath ?>/assets/js/main.js"></script>

<!-- Superpilot Custom JS -->
<script src="assets/js/superpilot.js"></script>

<!-- Magico Prototype Comments -->
<?php if (!empty($enablePrototypeComments)): ?>
    <script>
        const MAGICO_BASE_URL = <?= json_encode($basePath); ?>;
    </script>
    <script src="<?= $basePath ?>/assets/js/comments.js"></script>
<?php endif; ?>

</body>
</html>