<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRON CORE GYM</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body style="background:#050505; color:white; font-family:sans-serif;" x-data="{isAdmin: false, coaches:[{name:'Titan Ruiz', spec:'Powerlifting', img:'https://images.unsplash.com/photo-1567013127542-490d757e51fc?w=400'},{name:'Elena Ortiz', spec:'HIIT', img:'https://images.unsplash.com/photo-1518310383802-640c2de311b2?w=400'}], pricing:[{name:'Basico', price:'29'},{name:'Iron VIP', price:'49'}]}">
<nav style="padding:20px; border-bottom:1px solid #333; display:flex; justify-content:space-between; background:black;">
<b style="color:#CCFF00; font-style:italic;">IRON CORE</b>
<button @click="isAdmin = !isAdmin" style="font-size:10px; opacity:0.5;">ADMIN</button>
</nav>
<template x-if="!isAdmin">
<div>
<header style="height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800'); background-size:cover;">
<div><h1 style="font-size:3rem; font-weight:900; font-style:italic;">NO LIMITS</h1><p style="color:#CCFF00;">DOMINA EL HIERRO</p></div>
</header>
<section style="padding:40px 20px;">
<h2 style="border-left:4px solid #CCFF00; padding-left:10px; margin-bottom:20px; font-weight:bold;">COACHES</h2>
<div style="display:grid; grid-template-cols:1fr; gap:20px;">
<template x-for="c in coaches">
<div style="background:#111; border-radius:15px; overflow:hidden;">
<img :src="c.img" style="width:100%; h:250px; object-fit:cover;">
<div style="padding:15px;"><b x-text="c.name"></b><br><small style="color:#CCFF00" x-text="c.spec"></small></div>
</div>
</template>
</div>
</section>
<section style="padding:40px 20px; background:#0a0a0a;">
<h2 style="font-weight:bold; margin-bottom:20px;">PLANES</h2>
<template x-for="p in pricing">
<div style="background:#111; padding:20px; border-radius:15px; margin-bottom:15px; border:1px solid #333;">
<h3 x-text="p.name"></h3>
<p style="font-size:2rem; font-weight:900;">$<span x-text="p.price"></span></p>
<button style="width:100%; background:#CCFF00; color:black; padding:10px; border-radius:10px; font-weight:bold; margin-top:10px;">ELEGIR</button>
</div>
</template>
</section>
</div>
</template>
<template x-if="isAdmin">
<div style="padding:20px;">
<h2 style="color:#CCFF00;">PANEL ADMIN</h2>
<p>Edita los nombres directamente:</p>
<template x-for="c in coaches">
<input x-model="c.name" style="background:#222; border:1px solid #444; color:white; padding:10px; width:100%; margin-bottom:10px; border-radius:5px;">
</template>
<button @click="isAdmin=false" style="background:white; color:black; padding:10px 20px; border-radius:5px; margin-top:20px;">Ver Web</button>
</div>
</template>
<a href="https://wa.me/123456789" style="position:fixed; bottom:20px; right:20px; background:#25D366; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 15px rgba(0,0,0,0.5);">
<svg style="width:30px; fill:white;" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.588-5.946 0-6.556 5.332-11.888 11.888-11.888 3.176 0 6.161 1.237 8.404 3.481s3.481 5.228 3.481 8.405c0 6.556-5.332 11.89-11.888 11.89-1.996 0-3.951-.502-5.69-1.458l-6.294 1.652zm6.368-1.927c1.556.924 3.19 1.412 4.887 1.412 5.165 0 9.375-4.21 9.375-9.377 0-2.503-.974-4.857-2.744-6.628s-4.125-2.744-6.629-2.744c-5.166 0-9.376 4.21-9.376 9.377 0 1.916.582 3.784 1.682 5.389l-1.099 4.01 4.124-1.082z"/></svg>
</a>
</body>
</html>