<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="Tambre App">
    
    <link rel="manifest" href="manifest.json">
    
    <title>Tambre Golf & Croquet</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* Reseteo básico y prevención de scroll en el cuerpo principal */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #f5f5f5;
            font-family: sans-serif;
        }

        /* El iframe ocupa toda la pantalla menos la barra inferior */
        #app-frame {
            width: 100%;
            height: calc(100% - 65px);
            border: none;
            display: block;
            background-color: #ffffff;
        }

        /* Barra de navegación inferior */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 65px;
            background-color: #ffffff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            /* Soporte para el área segura del notch inferior en iPhones modernos */
            padding-bottom: env(safe-area-inset-bottom);
        }

        /* Estilos de los botones */
        .nav-btn {
            background: none;
            border: none;
            font-size: 24px;
            color: #888888;
            cursor: pointer;
            padding: 10px 20px;
            transition: color 0.3s, transform 0.1s;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .nav-btn:active {
            transform: scale(0.9);
        }

        /* Estado activo del botón (Verde Tambre aproximado) */
        .nav-btn.active {
            color: #2e7d32; 
        }

        /* Texto opcional debajo del icono */
        .nav-text {
            font-size: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>

    <iframe id="app-frame" src="https://www.allservice.es/app-recetas/public/cliente.php" allowfullscreen></iframe>

    <nav class="bottom-nav">
        <button onclick="changeUrl('https://www.allservice.es/tambre-app/public/index.php?route=/player/dashboard', this)" class="nav-btn">
            <i class="fa-solid fa-golf-ball-tee"></i>
        </button>

        <button onclick="changeUrl('https://www.allservice.es/app-recetas/public/cliente.php', this)" class="nav-btn active">
            <i class="fa-solid fa-house"></i>
        </button>

        <button onclick="changeUrl('https://www.allservice.es/croquet_club/public/index.php', this)" class="nav-btn">
            <i class="fa-solid fa-bullseye"></i> 
        </button>
    </nav>

    <script>
        // Función para cambiar la URL del iframe y actualizar el color del botón activo
        function changeUrl(url, clickedElement) {
            // Cambiar URL
            document.getElementById('app-frame').src = url;
            
            // Quitar clase 'active' de todos los botones
            const buttons = document.querySelectorAll('.nav-btn');
            buttons.forEach(btn => btn.classList.remove('active'));
            
            // Añadir clase 'active' al botón clicado
            clickedElement.classList.add('active');
        }
    </script>
</body>
</html>