Tul xxx Tul

Viewing: index.php

<!DOCTYPE html>
<html lang="es" class="scroll-smooth">
<head>
    <?php
    $appUrl = app_url();
    $manifestUrl = app_url('manifest.webmanifest');
    $logoUrl = app_url('assets/admin/images/logo.png') . '?v=' . (@filemtime(FCPATH . 'assets/admin/images/logo.png') ?: time());
    $appleIconUrl = app_url('pwa-icon/180');
    ?>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0a0a0a">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="<?= esc($company['name'] ?? 'NEXUSFIT') ?>">
    <title><?= esc($company['name'] ?? 'NEXUSFIT') ?> - El Futuro del Fitness</title>
    <link rel="icon" type="image/png" href="<?= $logoUrl ?>">
    <link rel="apple-touch-icon" href="<?= $appleIconUrl ?>">
    <link rel="manifest" href="<?= $manifestUrl ?>">
    <!-- Tailwind CSS Play CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Alpine.js CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- HTML2Canvas -->
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Tarjeta CSS -->
    <link rel="stylesheet" href="<?= base_url('assets/admin/css/tarjeta.css'); ?>">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                        display: ['Space Grotesk', 'ui-sans-serif', 'system-ui', 'sans-serif'],
                    },
                    colors: {
                        neon: '#ccff00',
                        dark: '#0a0a0a',
                        darker: '#050505',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer base {
            body {
                @apply bg-darker text-white font-sans antialiased selection:bg-neon selection:text-black;
            }
        }
        @layer utilities {
            .glass {
                @apply bg-white/5 backdrop-blur-md border border-white/10;
            }
            .text-glow {
                text-shadow: 0 0 20px rgba(204, 255, 0, 0.5);
            }
            .bg-grid {
                background-size: 40px 40px;
                background-image: radial-gradient(circle, rgba(204, 255, 0, 0.05) 1px, transparent 1px);
            }
        }
        
        /* Custom Animations */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.3s ease-out forwards;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .install-btn-hidden {
            display: none !important;
        }
        
        [x-cloak] { display: none !important; }
    </style>
</head>
<body x-data="{ 
        scrolled: false, 
        mobileMenuOpen: false, 
        loginModalOpen: false, 
        carnetModalOpen: false,
        carnetDni: '',
        carnetData: null,
        carnetError: '',
        isConsulting: false,
        isUpdatingPhoto: false,
        selectedCarnetPhoto: null,
        consultarCarnet() {
            this.isConsulting = true;
            this.carnetError = '';
            this.carnetData = null;
            
            fetch(`<?= base_url('consulta-carnet') ?>/${this.carnetDni}`)
                .then(res => res.json())
                .then(data => {
                    if (data.status === 'success') {
                        this.carnetData = data.user;
                    } else {
                        this.carnetError = data.msg;
                    }
                })
                .catch(err => {
                    this.carnetError = 'Error al conectar con el servidor';
                })
                .finally(() => {
                    this.isConsulting = false;
                });
        },
        onCarnetPhotoSelected(event) {
            this.selectedCarnetPhoto = event?.target?.files?.[0] || null;
        },
        async actualizarFotoCarnet() {
            if (!this.carnetDni) {
                this.carnetError = 'Primero consulta tu carnet con tu DNI.';
                return;
            }

            if (!this.selectedCarnetPhoto) {
                this.carnetError = 'Selecciona una foto antes de guardar.';
                return;
            }

            const confirm = await Swal.fire({
                title: '¿Guardar nueva foto?',
                text: 'Tu carnet se actualizará con esta imagen.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Sí, guardar',
                cancelButtonText: 'Cancelar',
                confirmButtonColor: '#84cc16',
                background: '#0a0a0a',
                color: '#fff'
            });

            if (!confirm.isConfirmed) {
                return;
            }

            this.isUpdatingPhoto = true;
            this.carnetError = '';

            try {
                const formData = new FormData();
                formData.append('dni', this.carnetDni);
                formData.append('avatar', this.selectedCarnetPhoto);

                const response = await fetch(`<?= base_url('consulta-carnet/foto') ?>`, {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();
                if (data.status !== 'success') {
                    this.carnetError = data.msg || 'No se pudo actualizar la foto.';
                    return;
                }

                await Swal.fire({
                    icon: 'success',
                    title: 'Foto actualizada',
                    text: 'Tu nueva foto se guardó correctamente.',
                    timer: 1700,
                    showConfirmButton: false,
                    background: '#0a0a0a',
                    color: '#fff'
                });

                this.selectedCarnetPhoto = null;
                if (this.$refs.carnetPhotoInput) {
                    this.$refs.carnetPhotoInput.value = '';
                }

                this.consultarCarnet();
            } catch (error) {
                this.carnetError = 'Error al guardar la nueva foto.';
            } finally {
                this.isUpdatingPhoto = false;
            }
        },
        descargarCarnet() {
            const card = document.getElementById('webCardDownload');
            html2canvas(card, {
                useCORS: true,
                allowTaint: true,
                backgroundColor: null,
                scale: 2
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = `carnet_${this.carnetDni}.png`;
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        },
        contactMessage: '',
        contactName: '',
        contactPhone: '',
        contactEmail: '',
        companyPhone: '<?= preg_replace('/[^0-9]/', '', $company['phone'] ?? '1234567890') ?>',
        sendWhatsApp() {
            const baseUrl = 'https://api.whatsapp.com/send';
            const text = `*¡Nueva Solicitud de Contacto!* 🚀\n\n` +
                         `👤 *Nombre:* ${this.contactName}\n` +
                         `📞 *Teléfono:* ${this.contactPhone}\n` +
                         `📧 *Email:* ${this.contactEmail}\n\n` +
                         `📝 *Mensaje:* ${this.contactMessage}\n\n` +
                         `_Enviado desde el sitio web de <?= esc($company['name'] ?? 'NexusFit') ?>_`;
            
            const whatsappUrl = `${baseUrl}?phone=${this.companyPhone}&text=${encodeURIComponent(text)}`;
            window.open(whatsappUrl, '_blank');
        }
      }" 
      @scroll.window="scrolled = window.pageYOffset > 50">

    <!-- Alert Flash Messages -->
    <?php if (session()->getFlashdata('respuesta')): ?>
        <div class="fixed top-24 right-6 z-[70] max-w-sm w-full animate-fade-in" x-data="{ show: true }" x-show="show">
            <div class="glass border-l-4 <?= session()->getFlashdata('respuesta')['type'] == 'danger' ? 'border-red-500' : (session()->getFlashdata('respuesta')['type'] == 'success' ? 'border-neon' : 'border-yellow-500') ?> p-4 shadow-2xl">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                        <i data-lucide="<?= session()->getFlashdata('respuesta')['type'] == 'danger' ? 'alert-circle' : (session()->getFlashdata('respuesta')['type'] == 'success' ? 'check-circle' : 'alert-triangle') ?>" 
                           class="w-5 h-5 <?= session()->getFlashdata('respuesta')['type'] == 'danger' ? 'text-red-500' : (session()->getFlashdata('respuesta')['type'] == 'success' ? 'text-neon' : 'text-yellow-500') ?>"></i>
                        <p class="text-sm font-medium text-white"><?= session()->getFlashdata('respuesta')['msg'] ?></p>
                    </div>
                    <button @click="show = false" class="text-gray-400 hover:text-white">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>
        </div>
    <?php endif; ?>

    <!-- Navbar -->
    <nav :class="scrolled ? 'bg-black/40 backdrop-blur-md py-4 shadow-lg shadow-black/50' : 'bg-transparent py-6'"
         data-aos="fade-down"
         class="fixed w-full z-50 transition-all duration-500">
        <div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
            <a href="#home" class="flex items-center gap-2 text-neon font-display font-bold text-2xl tracking-tighter hover:scale-105 transition-transform">
                <img src="<?= base_url('assets/admin/images/logo.png') ?>?v=<?= time() ?>" alt="Logo" class="w-10 h-10 object-contain">
                <span><?= strtoupper(esc($company['name'] ?? 'NEXUS FIT')) ?></span>
            </a>

            <!-- Desktop Menu -->
            <div class="hidden md:flex items-center gap-8">
                <a href="#home" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Inicio
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#about" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Nosotros
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#classes" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Clases
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#schedule" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Horario
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#pricing" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Planes
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <a href="#contact" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Contacto
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </a>
                <button @click="carnetModalOpen = true" class="relative text-sm font-medium text-gray-300 hover:text-white transition-colors group py-2">
                    Consulta tu Carnet
                    <span class="absolute bottom-0 left-0 w-0 h-[2px] bg-neon transition-all duration-300 group-hover:w-full"></span>
                </button>
                <?php if (session('user_id')): ?>
                    <a href="<?= site_url('dashboard') ?>" class="px-6 py-2 bg-neon text-black font-semibold rounded-full hover:scale-105 transition-all hover:shadow-[0_0_20px_rgba(204,255,0,0.4)]">
                        Mi Panel
                    </a>
                <?php else: ?>
                    <button @click="loginModalOpen = true" 
                            class="px-6 py-2 bg-neon text-black font-semibold rounded-full hover:scale-105 transition-all hover:shadow-[0_0_20px_rgba(204,255,0,0.4)]">
                        Iniciar Sesión
                    </button>
                <?php endif; ?>
            </div>

            <!-- Mobile Toggle -->
            <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden text-white p-2">
                <i x-show="!mobileMenuOpen" data-lucide="menu"></i>
                <i x-show="mobileMenuOpen" data-lucide="x" x-cloak></i>
            </button>
        </div>

        <!-- Mobile Menu -->
        <div x-show="mobileMenuOpen" 
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-4"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-4"
             class="md:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-xl border-t border-white/10 p-6 flex flex-col gap-6" x-cloak>
            <a href="#home" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Inicio</a>
            <a href="#about" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Nosotros</a>
            <a href="#classes" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Clases</a>
            <a href="#schedule" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Horario</a>
            <a href="#pricing" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Planes</a>
            <a href="#contact" @click="mobileMenuOpen = false" class="text-2xl font-display font-bold text-white">Contacto</a>
            <button @click="carnetModalOpen = true; mobileMenuOpen = false" class="text-2xl font-display font-bold text-white text-left">Consulta tu Carnet</button>
            <?php if (session('user_id')): ?>
                <a href="<?= site_url('dashboard') ?>" class="w-full py-4 bg-neon text-black font-bold rounded-xl text-center">
                    Mi Panel
                </a>
            <?php else: ?>
                <button @click="loginModalOpen = true; mobileMenuOpen = false" class="w-full py-4 bg-neon text-black font-bold rounded-xl">
                    Iniciar Sesión
                </button>
            <?php endif; ?>
        </div>
    </nav>

    <main>
        <!-- Hero Section -->
        <section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden">
            <div class="absolute inset-0 z-0">
                <?php if (!empty($company['cover_image']) && file_exists(FCPATH . 'assets/admin/images/' . $company['cover_image'])) : ?>
                    <img src="<?= base_url('assets/admin/images/' . $company['cover_image']) ?>?v=<?= time() ?>" 
                         alt="Gym background" class="w-full h-full object-cover opacity-40">
                <?php else: ?>
                    <img src="<?= base_url('assets/frontend/images/portada.jpg') ?>" 
                         alt="Gym background" class="w-full h-full object-cover opacity-40">
                <?php endif; ?>
                <div class="absolute inset-0 bg-gradient-to-t from-darker via-darker/80 to-transparent"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-darker via-darker/50 to-transparent"></div>
            </div>

            <div class="relative z-10 max-w-7xl mx-auto px-6 w-full pt-32 pb-20">
                <div class="max-w-3xl">
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass mb-8" data-aos="fade-up">
                        <span class="w-2 h-2 rounded-full bg-neon animate-pulse"></span>
                        <span class="text-sm font-medium tracking-wide uppercase text-gray-300">Bienvenido a <?= esc($company['name'] ?? 'NEXUSFIT') ?></span>
                    </div>

                    <h1 class="text-6xl md:text-8xl font-display font-bold tracking-tighter leading-[1.1] mb-6" 
                        data-aos="fade-up" data-aos-delay="200">
                        REDEFINE <br />
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-neon to-white">
                            TUS LÍMITES
                        </span>
                    </h1>

                    <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-xl leading-relaxed" 
                       data-aos="fade-up" data-aos-delay="400">
                        <?= esc($company['message'] ?? 'Instalaciones de última generación, entrenadores de élite y una comunidad que te empuja a ser tu mejor versión.') ?>
                    </p>

                    <div class="flex flex-col sm:flex-row gap-4" data-aos="fade-up" data-aos-delay="600">
                        <a href="#pricing" class="group relative inline-flex items-center justify-center gap-3 px-8 py-4 bg-neon text-black font-bold text-lg rounded-full overflow-hidden transition-transform hover:scale-105">
                            <span class="relative z-10">Ver Planes</span>
                            <i data-lucide="arrow-right" class="relative z-10 w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
                            <div class="absolute inset-0 bg-white translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out"></div>
                        </a>
                        <a href="#classes" class="inline-flex items-center justify-center px-8 py-4 glass text-white font-bold text-lg rounded-full hover:bg-white/10 transition-colors">
                            Ver Clases
                        </a>
                    </div>
                </div>
            </div>

            <!-- Scroll indicator -->
            <div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 opacity-50" data-aos="fade-up" data-aos-delay="1000">
                <span class="text-xs uppercase tracking-widest text-gray-500"></span>
                <div class="w-[1px] h-12 bg-gradient-to-b from-neon to-transparent"></div>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="py-24 bg-dark relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div data-aos="fade-right">
                        <h2 class="text-neon font-bold tracking-widest uppercase text-sm mb-4">Sobre Nosotros</h2>
                        <h3 class="text-4xl md:text-5xl font-display font-bold mb-6 leading-tight">
                            <?= esc($about['title'] ?? 'NO ES SOLO UN GIMNASIO, ES UNA EVOLUCIÓN') ?>
                        </h3>
                        <p class="text-gray-400 text-lg mb-8 leading-relaxed">
                            <?= esc($about['description'] ?? 'En NEXUSFIT, hemos redefinido la experiencia de entrenamiento. Combinamos la última tecnología con un enfoque holístico de salud.') ?>
                        </p>
                        
                        <div class="grid sm:grid-cols-2 gap-8">
                            <div class="flex flex-col gap-3">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center">
                                    <i data-lucide="zap" class="w-6 h-6 text-neon"></i>
                                </div>
                                <h4 class="text-white font-bold text-lg">Equipamiento Inteligente</h4>
                                <p class="text-gray-500 text-sm leading-relaxed">Máquinas conectadas que rastrean tu progreso en tiempo real.</p>
                            </div>
                            <div class="flex flex-col gap-3">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center">
                                    <i data-lucide="users" class="w-6 h-6 text-neon"></i>
                                </div>
                                <h4 class="text-white font-bold text-lg">Comunidad Élite</h4>
                                <p class="text-gray-500 text-sm leading-relaxed">Entrena junto a personas que comparten tu pasión.</p>
                            </div>
                            <div class="flex flex-col gap-3">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center">
                                    <i data-lucide="target" class="w-6 h-6 text-neon"></i>
                                </div>
                                <h4 class="text-white font-bold text-lg">Planes Personalizados</h4>
                                <p class="text-gray-500 text-sm leading-relaxed">Análisis biométrico para crear rutinas adaptadas a ti.</p>
                            </div>
                            <div class="flex flex-col gap-3">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center">
                                    <i data-lucide="shield-check" class="w-6 h-6 text-neon"></i>
                                </div>
                                <h4 class="text-white font-bold text-lg">Recuperación</h4>
                                <p class="text-gray-500 text-sm leading-relaxed">Zonas de crioterapia y masajes para tu recuperación.</p>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4 relative" data-aos="fade-left">
                        <div class="absolute -inset-4 bg-neon/20 blur-3xl rounded-full z-0"></div>
                        <img src="<?= (!empty($about['image2']) && file_exists(FCPATH . $about['image2'])) ? base_url($about['image2']) : base_url('assets/frontend/images/about-coach.jpg') ?>" 
                             alt="Gym training" class="rounded-2xl w-full h-64 object-cover relative z-10 mt-12">
                        <img src="<?= (!empty($about['image']) && file_exists(FCPATH . $about['image'])) ? base_url($about['image']) : base_url('assets/frontend/images/about-banner.png') ?>" 
                             alt="Gym equipment" class="rounded-2xl w-full h-80 object-cover relative z-10">
                        <div class="col-span-2 glass rounded-2xl p-6 relative z-10 flex items-center justify-between">
                            <div>
                                <p class="text-4xl font-display font-bold text-neon">24/7</p>
                                <p class="text-gray-400 text-sm uppercase tracking-wider">Acceso Total</p>
                            </div>
                            <div class="w-[1px] h-12 bg-white/20"></div>
                            <div>
                                <p class="text-4xl font-display font-bold text-white">50+</p>
                                <p class="text-gray-400 text-sm uppercase tracking-wider">Entrenadores</p>
                            </div>
                            <div class="w-[1px] h-12 bg-white/20"></div>
                            <div>
                                <p class="text-4xl font-display font-bold text-white">10k</p>
                                <p class="text-gray-400 text-sm uppercase tracking-wider">Metros²</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Classes Section -->
        <section id="classes" class="py-24 bg-darker relative">
            <div class="max-w-7xl mx-auto px-6">
                <div class="flex flex-col md:flex-row justify-between items-end mb-16" data-aos="fade-up">
                    <div>
                        <h2 class="text-neon font-bold tracking-widest uppercase text-sm mb-4">Nuestras Clases</h2>
                        <h3 class="text-4xl md:text-5xl font-display font-bold leading-tight">
                            ENTRENAMIENTO <br />
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">SIN LÍMITES</span>
                        </h3>
                    </div>
                    <a href="#schedule" class="group flex items-center gap-2 text-neon font-bold hover:text-white transition-colors mt-6 md:mt-0">
                        Ver Horario Completo
                        <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-2 transition-transform"></i>
                    </a>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <?php foreach ($classes as $class): ?>
                    <div class="group relative overflow-hidden rounded-2xl aspect-[3/4] cursor-pointer" data-aos="fade-up">
                        <img src="<?= (!empty($class['photo']) && file_exists(FCPATH . 'assets/admin/images/classes/' . $class['photo'])) ? base_url('assets/admin/images/classes/' . $class['photo']) : base_url('assets/frontend/images/class-1.jpg') ?>" 
                             class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity"></div>
                        <div class="absolute inset-0 p-6 flex flex-col justify-end">
                            <h4 class="text-2xl font-display font-bold text-white mb-2"><?= esc($class['name']) ?></h4>
                            <p class="text-gray-300 text-sm opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300">
                                <?= esc($class['description']) ?>
                            </p>
                            <p class="text-neon text-xs mt-2 font-bold italic">Instructor: <?= esc($class['instructor_name']) ?></p>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <!-- Schedule Section -->
        <script id="schedule-data" type="application/json"><?= $jsonSchedule ?></script>
        <section id="schedule" x-data="{ 
            hoveredClass: null,
            schedule: JSON.parse(document.getElementById('schedule-data').textContent),
            days: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo']
        }" class="py-24 bg-dark relative overflow-hidden">
            <div class="absolute top-0 right-0 w-[800px] h-[800px] bg-neon/5 rounded-full blur-[120px] pointer-events-none"></div>
            
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-16" data-aos="fade-up">
                    <h2 class="text-neon font-bold tracking-widest uppercase text-sm mb-4">Horario</h2>
                    <h3 class="text-4xl md:text-5xl font-display font-bold">
                        PLANIFICA TU <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">SEMANA</span>
                    </h3>
                </div>

                <div class="overflow-x-auto pb-8" data-aos="fade-up" data-aos-delay="200">
                    <div class="min-w-[1000px] grid grid-cols-7 gap-4">
                        <template x-for="day in days" :key="day">
                            <div class="text-center py-4 glass rounded-xl font-display font-bold text-lg text-white" x-text="day"></div>
                        </template>

                        <template x-for="day in days" :key="'col-'+day">
                            <div class="flex flex-col gap-4 min-h-[400px]">
                                <template x-for="cls in schedule.filter(c => c.day === day)" :key="cls.id">
                                    <div @mouseenter="hoveredClass = cls" @mouseleave="hoveredClass = null"
                                         class="relative p-4 rounded-xl glass border border-white/5 cursor-pointer hover:border-neon/50 transition-colors group">
                                        <div :class="cls.color" class="absolute top-0 left-0 w-1 h-full rounded-l-xl opacity-50 group-hover:opacity-100 transition-opacity"></div>
                                        <p class="text-[10px] text-neon font-mono mb-2 flex items-center gap-1">
                                            <i data-lucide="clock" class="w-3 h-3"></i> <span x-text="cls.startTime"></span> - <span x-text="cls.endTime"></span>
                                        </p>
                                        <h4 class="text-white font-bold text-sm mb-1" x-text="cls.name"></h4>
                                        <p class="text-gray-400 text-xs flex items-center gap-1">
                                            <i data-lucide="user" class="w-3 h-3"></i> <span x-text="cls.instructor"></span>
                                        </p>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- Hover Modal -->
            <div x-show="hoveredClass" 
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-200"
                 x-transition:leave-start="opacity-100 scale-100"
                 x-transition:leave-end="opacity-0 scale-95"
                 class="fixed inset-0 z-[100] flex items-center justify-center p-4 pointer-events-none" 
                 x-cloak>
                <div class="max-w-sm w-full glass rounded-3xl p-8 shadow-2xl shadow-black backdrop-blur-xl border border-neon/20 pointer-events-none">
                    <div class="flex items-center justify-between mb-6">
                        <span :class="hoveredClass?.color" class="px-3 py-1 rounded-full text-xs font-bold text-white" x-text="hoveredClass?.intensity"></span>
                        <div class="flex flex-col items-end">
                            <span class="text-neon text-sm font-bold" x-text="hoveredClass?.time"></span>
                            <span class="text-gray-400 text-xs flex items-center gap-1">
                                <i data-lucide="timer" class="w-4 h-4"></i> <span x-text="hoveredClass?.duration"></span>
                            </span>
                        </div>
                    </div>
                    <h4 class="text-3xl font-display font-bold text-white mb-2" x-text="hoveredClass?.name"></h4>
                    <p class="text-neon font-bold mb-4 flex items-center gap-2">
                        <i data-lucide="user" class="w-5 h-5"></i> <span x-text="hoveredClass?.instructor"></span>
                    </p>
                    <p class="text-gray-400 leading-relaxed mb-6" x-text="hoveredClass?.desc"></p>
                    <div class="flex items-center gap-2 text-white font-bold bg-neon/10 p-3 rounded-xl border border-neon/20">
                        <i data-lucide="flame" class="w-5 h-5 text-neon"></i>
                        <span class="text-xs uppercase tracking-wider">Sesión de alto rendimiento</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- Pricing Section -->
        <section id="pricing" class="py-24 bg-darker relative overflow-hidden">
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[1000px] h-[1000px] bg-neon/5 rounded-full blur-[150px] pointer-events-none"></div>
            
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="text-center mb-16" data-aos="fade-up">
                    <h2 class="text-neon font-bold tracking-widest uppercase text-sm mb-4">Planes</h2>
                    <h3 class="text-4xl md:text-5xl font-display font-bold">
                        INVIERTE EN <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">TU FUTURO</span>
                    </h3>
                </div>

                <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                    <?php 
                    $currency = get_currency();
                    foreach ($plans as $plan): 
                        $amount = (float) $plan['amount'];
                        $finalPrice = $amount;
                        if (!empty($plan['discount_type']) && !empty($plan['discount_value'])) {
                            if ($plan['discount_type'] === 'percent') {
                                $finalPrice = $amount - ($amount * ((float)$plan['discount_value'] / 100));
                            } else {
                                $finalPrice = $amount - (float)$plan['discount_value'];
                            }
                        }
                    ?>
                    <div class="relative p-8 rounded-3xl glass border border-white/10 hover:border-neon/50 transition-all group" data-aos="fade-up">
                        <h4 class="text-2xl font-display font-bold text-white mb-2"><?= esc($plan['name']) ?></h4>
                        <div class="mb-8 flex items-baseline gap-1">
                            <span class="text-5xl font-display font-bold text-neon"><?= $currency ?><?= number_format($finalPrice, 2) ?></span>
                            <span class="text-gray-500">/<?= esc($plan['duration']) ?></span>
                        </div>
                        <div class="text-gray-400 text-sm mb-8 leading-relaxed">
                            <?= $plan['description'] ?>
                        </div>
                        <button @click="contactMessage = 'Hola, estoy interesado en el plan <?= esc($plan['name']) ?>. Quisiera recibir más información.'; document.getElementById('contact').scrollIntoView({ behavior: 'smooth' })" 
                           class="block w-full py-4 text-center rounded-xl font-bold bg-white/10 text-white group-hover:bg-neon group-hover:text-black transition-all">
                            Seleccionar Plan
                        </button>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <!-- Contact Section -->
        <section id="contact" class="py-24 bg-dark relative overflow-hidden">
            <div class="max-w-7xl mx-auto px-6 relative z-10">
                <div class="grid lg:grid-cols-2 gap-16">
                    <div data-aos="fade-right">
                        <h2 class="text-neon font-bold tracking-widest uppercase text-sm mb-4">Contacto</h2>
                        <h3 class="text-4xl md:text-5xl font-display font-bold mb-6 leading-tight">
                            ¿LISTO PARA <br />
                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">EMPEZAR?</span>
                        </h3>
                        
                        <div class="space-y-8 mt-12">
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center shrink-0">
                                    <i data-lucide="map-pin" class="w-6 h-6 text-neon"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-bold text-lg mb-1">Ubicación</h4>
                                    <p class="text-gray-500 text-sm"><?= esc($company['address'] ?? 'Av. Principal 123') ?></p>
                                </div>
                            </div>
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center shrink-0">
                                    <i data-lucide="phone" class="w-6 h-6 text-neon"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-bold text-lg mb-1">Teléfono</h4>
                                    <p class="text-gray-500 text-sm"><?= esc($company['phone'] ?? '+1 234 567 890') ?></p>
                                </div>
                            </div>
                            <div class="flex items-start gap-4">
                                <div class="w-12 h-12 rounded-xl glass flex items-center justify-center shrink-0">
                                    <i data-lucide="mail" class="w-6 h-6 text-neon"></i>
                                </div>
                                <div>
                                    <h4 class="text-white font-bold text-lg mb-1">Email</h4>
                                    <p class="text-gray-500 text-sm"><?= esc($company['email'] ?? 'hola@gym.com') ?></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="glass rounded-3xl p-8 relative transition-all duration-500" :class="contactMessage ? 'ring-2 ring-neon shadow-2xl shadow-neon/20' : ''" data-aos="fade-left">
                        <form class="flex flex-col gap-6" @submit.prevent="sendWhatsApp()">
                            <div class="grid sm:grid-cols-2 gap-6">
                                <div class="flex flex-col gap-2">
                                    <label class="text-sm font-medium text-gray-400">Nombre Completo</label>
                                    <input type="text" x-model="contactName" required class="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon transition-all" placeholder="Tu nombre">
                                </div>
                                <div class="flex flex-col gap-2">
                                    <label class="text-sm font-medium text-gray-400">Teléfono</label>
                                    <input type="tel" x-model="contactPhone" required class="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon transition-all" placeholder="Tu teléfono">
                                </div>
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-sm font-medium text-gray-400">Correo Electrónico</label>
                                <input type="email" x-model="contactEmail" required class="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon transition-all" placeholder="tu@email.com">
                            </div>
                            <div class="flex flex-col gap-2">
                                <label class="text-sm font-medium text-gray-400">Mensaje</label>
                                <textarea rows="4" x-model="contactMessage" class="bg-white/5 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-neon transition-all resize-none" placeholder="¿Cómo podemos ayudarte?"></textarea>
                            </div>
                            <button type="submit" class="group flex items-center justify-center gap-2 py-4 bg-neon text-black font-bold rounded-xl hover:bg-white transition-all">
                                Enviar Mensaje
                                <i data-lucide="send" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-darker border-t border-white/5 pt-20 pb-10">
        <div class="max-w-7xl mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
                <div class="flex flex-col gap-6">
                    <div class="flex items-center gap-3">
                        <img src="<?= base_url('assets/admin/images/logo.png') ?>?v=<?= time() ?>" alt="Logo" class="w-12 h-12 object-contain">
                        <span class="text-neon font-display font-bold text-3xl tracking-tighter"><?= strtoupper(esc($company['name'] ?? 'NEXUSFIT')) ?></span>
                    </div>
                    <p class="text-gray-400 leading-relaxed max-w-xs">
                        <?= esc($company['message'] ?? 'Donde forjamos cuerpos, mentes y espíritus. Tu transformación comienza aquí.') ?>
                    </p>
                    <div class="flex flex-wrap items-center gap-4">
                        <?php if (!empty($company['facebook'])) : ?>
                            <a href="<?= esc($company['facebook']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/facebook.png') ?>" alt="Facebook" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($company['twitter'])) : ?>
                            <a href="<?= esc($company['twitter']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/twitterx.png') ?>" alt="Twitter / X" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($company['instagram'])) : ?>
                            <a href="<?= esc($company['instagram']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/instagram.png') ?>" alt="Instagram" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($company['linkedin'])) : ?>
                            <a href="<?= esc($company['linkedin']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/linkedin.webp') ?>" alt="LinkedIn" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($company['website'])) : ?>
                            <a href="<?= esc($company['website']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/www.png') ?>" alt="Sitio web" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                        <?php if (!empty($company['phone'])) : ?>
                            <a href="https://wa.me/<?= preg_replace('/[^0-9]/', '', $company['phone']) ?>" target="_blank" class="hover:scale-110 transition-transform duration-300">
                                <img src="<?= base_url('assets/admin/images/Redes/whatsapp.png') ?>" alt="WhatsApp" class="w-8 h-8 object-contain">
                            </a>
                        <?php endif; ?>
                    </div>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-6 uppercase tracking-wider text-sm">Soporte</h4>
                    <ul class="flex flex-col gap-4">
                        <li><a href="#" class="text-gray-400 hover:text-neon text-sm transition-colors">Preguntas Frecuentes</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-neon text-sm transition-colors">Términos y Condiciones</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-neon text-sm transition-colors">Política de Privacidad</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-neon text-sm transition-colors">Contacto</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="text-white font-bold mb-6 uppercase tracking-wider text-sm">Horario</h4>
                    <p class="text-gray-400 text-sm"><?= esc($company['schedule_week'] ?? 'Lunes - Viernes: 6am - 11pm') ?></p>
                    <p class="text-gray-400 text-sm"><?= esc($company['schedule_weekend'] ?? 'Sábado - Domingo: 8am - 8pm') ?></p>
                </div>
            </div>

            <div class="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="flex flex-wrap items-center gap-3">
                    <p class="text-gray-500 text-sm font-medium">
                        &copy; <?= date('Y') ?> <span class="text-white font-bold"><?= strtoupper(esc($company['name'] ?? 'TITAN')) ?></span>. Todos los derechos reservados.
                    </p>
                    <button id="installAppBtn" type="button" class="inline-flex items-center justify-center gap-2 px-3 py-1.5 bg-neon text-black text-xs font-bold rounded-full hover:bg-white transition-all shadow-lg shadow-neon/10">
                        <i data-lucide="download" class="w-4 h-4"></i>
                        <span>Instalar</span>
                    </button>
                </div>
                <div class="flex items-center gap-2 group">
                    <span class="text-gray-500 text-sm font-medium">Creado por</span>
                    <a href="https://aircan.me/" target="_blank" class="px-4 py-1.5 bg-white/5 hover:bg-neon border border-white/10 hover:border-neon rounded-full text-white hover:text-black text-xs font-bold tracking-widest transition-all duration-300 shadow-lg hover:shadow-neon/20 uppercase">
                        Aircan
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Login Modal -->
    <div x-show="loginModalOpen" 
         class="fixed inset-0 z-[60] flex items-center justify-center p-4" x-cloak>
        <div x-show="loginModalOpen" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="loginModalOpen = false"
             class="fixed inset-0 bg-black/80 backdrop-blur-sm"></div>

        <div x-show="loginModalOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95 translate-y-4"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 translate-y-4"
             class="relative w-full max-w-md bg-darker border border-white/10 rounded-3xl overflow-hidden shadow-2xl shadow-neon/10 z-10">
            
            <button @click="loginModalOpen = false" class="absolute top-4 right-4 p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-colors">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>

            <div class="p-8 sm:p-10">
                <div class="mb-8 text-center">
                    <h2 class="text-3xl font-display font-bold text-white mb-2 tracking-tight">Bienvenido</h2>
                    <p class="text-gray-400 text-sm">Ingresa tus credenciales para acceder.</p>
                </div>

                <form class="space-y-6" action="<?= base_url('login'); ?>" method="post">
                    <div class="space-y-4">
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-500 group-focus-within:text-neon transition-colors">
                                <i data-lucide="mail" class="w-5 h-5"></i>
                            </div>
                            <input type="email" name="correo" required class="w-full bg-black/50 border border-white/10 rounded-xl py-3 pl-12 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-neon transition-all" placeholder="correo@ejemplo.com">
                        </div>
                        <div class="relative group">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-500 group-focus-within:text-neon transition-colors">
                                <i data-lucide="lock" class="w-5 h-5"></i>
                            </div>
                            <input type="password" name="clave" required class="w-full bg-black/50 border border-white/10 rounded-xl py-3 pl-12 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-neon transition-all" placeholder="••••••••">
                        </div>
                    </div>

                    <button type="submit" class="w-full py-4 bg-neon text-black font-bold rounded-xl hover:bg-white transition-all">
                        Iniciar Sesión
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Carnet Modal -->
    <div x-show="carnetModalOpen" 
         class="fixed inset-0 z-[60] flex items-center justify-center p-4" x-cloak>
        <div x-show="carnetModalOpen" 
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             @click="carnetModalOpen = false"
             class="fixed inset-0 bg-black/90 backdrop-blur-md"></div>

        <div x-show="carnetModalOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-95 translate-y-4"
             x-transition:enter-end="opacity-100 scale-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100 translate-y-0"
             x-transition:leave-end="opacity-0 scale-95 translate-y-4"
             class="relative w-full max-w-2xl bg-darker border border-white/10 rounded-3xl overflow-hidden shadow-2xl shadow-neon/10 z-10 max-h-[90vh] overflow-y-auto">
            
            <button @click="carnetModalOpen = false; carnetData = null; carnetError = ''; carnetDni = ''" class="absolute top-4 right-4 p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-full transition-colors z-20">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>

            <div class="p-8 sm:p-10">
                <div class="mb-8 text-center">
                    <h2 class="text-3xl font-display font-bold text-white mb-2 tracking-tight">Consulta tu Carnet</h2>
                    <p class="text-gray-400 text-sm">Ingresa tu DNI para descargar tu identificación digital.</p>
                </div>

                <div class="space-y-6">
                    <div class="flex gap-2">
                        <div class="relative group flex-1">
                            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-500 group-focus-within:text-neon transition-colors">
                                <i data-lucide="credit-card" class="w-5 h-5"></i>
                            </div>
                            <input type="text" x-model="carnetDni" @keyup.enter="consultarCarnet()" required class="w-full bg-black/50 border border-white/10 rounded-xl py-4 pl-12 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-neon transition-all" placeholder="Número de DNI">
                        </div>
                        <button @click="consultarCarnet()" :disabled="isConsulting || !carnetDni" 
                                class="px-8 py-4 bg-neon text-black font-bold rounded-xl hover:bg-white transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                            <span x-show="!isConsulting">Consultar</span>
                            <span x-show="isConsulting" class="flex items-center gap-2"><i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Buscando...</span>
                        </button>
                    </div>

                    <!-- Error Message -->
                    <div x-show="carnetError" class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl flex items-center gap-3 animate-fade-in" x-cloak>
                        <i data-lucide="alert-circle" class="w-5 h-5 text-red-500"></i>
                        <p class="text-sm text-red-200" x-text="carnetError"></p>
                    </div>

                    <!-- Card Result -->
                    <div x-show="carnetData" class="space-y-6 animate-fade-in" x-cloak>
                        <div class="flex justify-center bg-dark p-6 rounded-2xl overflow-hidden">
                            <!-- Template de la tarjeta idéntico al admin -->
                            <div class="card profile-card-3" id="webCardDownload">
                                <div class="side-accent"></div>
                                <div class="main-content">
                                    <div class="watermark">FITNESS CARD</div>
                                    <div class="header-card">
                                        <div class="gym-brand">
                                            <span class="gym-name" x-text="carnetData?.company?.name"></span>
                                        </div>
                                        <div class="membership-badge" x-text="carnetData?.membership_name"></div>
                                    </div>

                                    <div class="user-section">
                                        <img :src="carnetData?.avatar ? '<?= base_url('assets/admin/uploads/avatars/') ?>/' + carnetData.avatar : '<?= base_url('assets/admin/images/avatars/default.png') ?>'" alt="profile-image" class="profile" />
                                        <div class="user-info">
                                            <h2 x-text="carnetData?.name + ' ' + (carnetData?.lastname || '')"></h2>
                                            <span class="client-email" x-text="carnetData?.email"></span>
                                            <div class="client-data">
                                                <span class="data-pill"><i class="bi bi-card-text"></i> <span x-text="carnetData?.dni"></span></span>
                                                <span class="data-pill"><i class="bi bi-phone"></i> <span x-text="carnetData?.phone"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="footer-card">
                                        <div class="contact-info">
                                            <span class="gym-detail"><i class="bi bi-geo-alt-fill"></i> <span x-text="carnetData?.company?.address"></span></span>
                                            <span class="gym-detail"><i class="bi bi-telephone-fill"></i> <span x-text="carnetData?.company?.phone"></span></span>
                                        </div>
                                        <div class="qr-section">
                                            <img class="qr-image" :src="'<?= base_url('assets/admin/uploads/qrcodes/') ?>/' + carnetData?.qrCode + '.png'" alt="qr-image" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="space-y-3">
                            <label class="block text-sm font-medium text-gray-300">Cambiar foto del carnet</label>
                            <input x-ref="carnetPhotoInput" type="file" accept="image/png,image/jpeg,image/jpg,image/webp"
                                   @change="onCarnetPhotoSelected($event)"
                                   class="w-full bg-black/50 border border-white/10 rounded-xl py-3 px-4 text-sm text-white file:mr-4 file:py-2 file:px-3 file:rounded-lg file:border-0 file:bg-neon file:text-black file:font-semibold hover:file:bg-white">
                            <p class="text-xs text-gray-400">Formatos permitidos: JPG, PNG, WEBP. Máximo 4MB.</p>
                            <button @click="actualizarFotoCarnet()" :disabled="isUpdatingPhoto"
                                    class="w-full py-3 bg-neon text-black font-bold rounded-xl hover:bg-white transition-all disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2">
                                <span x-show="!isUpdatingPhoto">Guardar Nueva Foto</span>
                                <span x-show="isUpdatingPhoto" class="flex items-center gap-2"><i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...</span>
                            </button>
                        </div>

                        <button @click="descargarCarnet()" 
                                class="w-full py-4 bg-white text-black font-bold rounded-xl hover:bg-neon transition-all flex items-center justify-center gap-2">
                            <i data-lucide="download" class="w-5 h-5"></i>
                            Descargar Carnet
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        lucide.createIcons();
        AOS.init({ duration: 800, once: true, offset: 100 });
        document.addEventListener('alpine:initialized', () => { lucide.createIcons(); });

        const appUrl = "<?= esc($appUrl, 'js'); ?>";
        const companyName = "<?= esc($company['name'] ?? 'NEXUSFIT', 'js'); ?>";
        const installAppBtn = document.getElementById('installAppBtn');
        const footerInstallWrap = document.getElementById('footerInstallWrap');
        let deferredInstallPrompt = null;

        function isStandaloneMode() {
            return window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
        }

        function hideInstallUi() {
            if (installAppBtn) {
                installAppBtn.classList.add('install-btn-hidden');
            }
        }

        function showInstallUi() {
            if (installAppBtn && !isStandaloneMode()) {
                installAppBtn.classList.remove('install-btn-hidden');
            }
        }

        function isIosDevice() {
            return /iphone|ipad|ipod/i.test(window.navigator.userAgent);
        }

        function fallbackInstallMessage() {
            if (isIosDevice()) {
                return 'En iPhone o iPad abre Safari, toca Compartir y luego Agregar a pantalla de inicio.';
            }

            return 'Si tu navegador no muestra el instalador, abre el menú y busca Instalar app o Agregar a pantalla principal.';
        }

        if (isStandaloneMode()) {
            hideInstallUi();
        } else {
            showInstallUi();
        }

        window.addEventListener('beforeinstallprompt', (event) => {
            event.preventDefault();
            deferredInstallPrompt = event;
            showInstallUi();
        });

        window.addEventListener('appinstalled', () => {
            deferredInstallPrompt = null;
            hideInstallUi();
            Swal.fire({
                icon: 'success',
                title: 'App instalada',
                text: `${companyName} se instaló correctamente.`,
                timer: 1800,
                showConfirmButton: false,
                background: '#0a0a0a',
                color: '#fff'
            });
        });

        if (installAppBtn) {
            installAppBtn.addEventListener('click', async () => {
                if (!deferredInstallPrompt) {
                    Swal.fire({
                        icon: 'info',
                        title: 'Instala la app',
                        text: fallbackInstallMessage(),
                        confirmButtonText: 'Entendido',
                        background: '#0a0a0a',
                        color: '#fff',
                        confirmButtonColor: '#ccff00'
                    });
                    return;
                }

                deferredInstallPrompt.prompt();
                const choiceResult = await deferredInstallPrompt.userChoice;
                deferredInstallPrompt = null;
            });
        }

        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register(`${appUrl}/service-worker.js`, {
                    scope: `${appUrl}/`
                }).catch((error) => {
                    console.error('No se pudo registrar el service worker', error);
                });
            });
        }
    </script>
</body>
</html>
User / IP	: 216.73.216.191
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64