<?php if (!function_exists('avatar_img')) { @include_once '../helpers.php'; } ?>
<?php
// landing.php - Solo contenido, sin HTML completo
?>

<div class="hero">
  <h1 class="animate">La red social de tus amigos de verdad</h1>
  <p class="muted animate delay-1">Fotos, chat, etiquetas y ranking — sin postureo. Conecta con tus personas más cercanas.</p>
  <div class="row animate delay-2">
    <a class="btn primary" href="./?r=register"><i class="fas fa-ticket-alt"></i> Acceder con invitación</a>
    <a class="btn" href="./?r=login"><i class="fas fa-key"></i> Ya tengo cuenta</a>
  </div>
</div>

<div class="grid grid-3" style="margin-top: 40px;">
  <div class="card animate delay-1">
    <div class="card-icon">
      <i class="fas fa-ticket-alt"></i>
    </div>
    <h3>Invitaciones exclusivas</h3>
    <p class="muted">Solo usuarios invitados pueden unirse, garantizando un círculo íntimo y de confianza.</p>
    <div class="chips">
      <span class="chip"><i class="fas fa-lock"></i> Privado</span>
      <span class="chip"><i class="fas fa-users"></i> Exclusivo</span>
    </div>
  </div>
  
  <div class="card animate delay-2">
    <div class="card-icon">
      <i class="fas fa-trophy"></i>
    </div>
    <h3>Ranking de amigos</h3>
    <p class="muted">Mantén un ranking personal de tus amigos más cercanos y celebra los momentos especiales.</p>
    <div class="chips">
      <span class="chip"><i class="fas fa-birthday-cake"></i> Cumpleaños</span>
      <span class="chip"><i class="fas fa-star"></i> Favoritos</span>
    </div>
  </div>
  
  <div class="card animate delay-3">
    <div class="card-icon">
      <i class="fas fa-camera"></i>
    </div>
    <h3>Momentos reales</h3>
    <p class="muted">Comparte fotos y videos sin filtros, capturando los recuerdos tal como sucedieron.</p>
    <div class="chips">
      <span class="chip"><i class="fas fa-tag"></i> Etiquetas</span>
      <span class="chip"><i class="fas fa-bookmark"></i> Recuerdos</span>
    </div>
  </div>
</div>

<div class="stats animate delay-3" style="margin-top: 60px; text-align: center;">
  <div class="row" style="justify-content: center;">
    <div class="stat-item">
      <div class="stat-number">30k+</div>
      <div class="stat-label">Usuarios activos</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">95%</div>
      <div class="stat-label">Satisfacción</div>
    </div>
    <div class="stat-item">
      <div class="stat-number">10+</div>
      <div class="stat-label">Premios</div>
    </div>
  </div>
</div>