<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>SuerteYa – Rifas</title>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"/>
  <link rel="stylesheet" href="style.css"/>
  <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
  <!-- Reemplaza TU_CLIENT_ID si vas a mostrar el botón PayPal aquí (no es necesario en landing) -->
  <!-- <script src="https://www.paypal.com/sdk/js?client-id=TU_CLIENT_ID&currency=USD"></script> -->
</head>
<body>
  <header class="topbar">
    <div class="wrap">
      <div class="brand">
        <img src="assets/Amarillo.png" alt="SuerteYa" />
      </div>
      <nav class="nav">
        <a href="#sorteos">Sorteos</a>
        <a href="#resultados">Resultados</a>
        <a href="#ganadores">Ganadores</a>
        <a href="#resenas">Reseñas</a>
      </nav>
      <div class="auth-cta">
        <button id="btn-open-benefits" class="btn btn-ghost">Beneficios</button>
        <button id="btn-login" class="btn">Iniciar sesión</button>
        <div id="user-menu" class="user-menu hidden">
          <span id="user-name"></span>
          <button id="btn-logout" class="btn btn-ghost">Salir</button>
        </div>
      </div>
    </div>
  </header>

  <main class="wrap">
    <section id="hero">
      <h1>Rifas diarias — Compra 1$ y participa 1PM, 4PM y 7PM</h1>
      <p>Transparencia con resultados oficiales. Reserva en tiempo real y paga por Pago Móvil o PayPal.</p>
      <a href="#sorteos" class="btn btn-primary">Ver sorteos</a>
    </section>

    <section id="sorteos" class="grid">
      <div id="raffles-grid" class="cards"></div>
    </section>

    <section id="resultados">
      <h2>Resultados</h2>
      <p>Publicamos resultados de 1PM / 4PM / 7PM vinculados a loterías oficiales.</p>
    </section>

    <section id="ganadores">
      <h2>Ganadores</h2>
      <div id="winners-grid" class="cards"></div>
    </section>

    <section id="resenas">
      <h2>Reseñas</h2>
      <div id="reviews-grid" class="cards"></div>
    </section>
  </main>

  <footer class="footer">
    <div class="wrap">
      <p>© <span id="year"></span> SuerteYa — Operamos como puente tecnológico con loterías oficiales.</p>
    </div>
  </footer>

  <!-- Modal Beneficios -->
  <div id="benefits-modal" class="modal hidden">
    <div class="modal-box">
      <button class="modal-close" data-close="benefits-modal">×</button>
      <h3>Beneficios de registrarte</h3>
      <ul>
        <li>Cada 5 boletos, 1 gratis.</li>
        <li>Sube tus comprobantes directo en la web.</li>
        <li>Acceso a sorteos exclusivos.</li>
        <li>Historial de compras y boletos.</li>
      </ul>
      <div class="text-center">
        <button id="benefits-go-login" class="btn btn-primary">Crear cuenta</button>
      </div>
    </div>
  </div>

  <!-- Modal Auth -->
  <div id="auth-modal" class="modal hidden">
    <div class="modal-box">
      <button class="modal-close" data-close="auth-modal">×</button>
      <h3 id="auth-title">Inicia sesión</h3>

      <div class="tabs">
        <button class="tab tab-active" data-tab="login">Ingresar</button>
        <button class="tab" data-tab="register">Registrarme</button>
      </div>

      <form id="form-login" class="auth-form">
        <label>Email</label>
        <input type="email" id="login-email" required>
        <label>Contraseña</label>
        <input type="password" id="login-password" required>
        <button type="submit" class="btn btn-primary full">Entrar</button>
      </form>

      <form id="form-register" class="auth-form hidden">
        <label>Nombre</label>
        <input type="text" id="reg-name" required>
        <label>Teléfono</label>
        <input type="tel" id="reg-phone" required>
        <label>Email</label>
        <input type="email" id="reg-email" required>
        <label>Contraseña</label>
        <input type="password" id="reg-password" required>
        <button type="submit" class="btn btn-primary full">Crear cuenta</button>
        <p class="note">Recibirás un correo de verificación.</p>
      </form>
    </div>
  </div>

  <script type="module" src="script.js"></script>
</body>
</html>
