<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Creá tu tienda | SistemasPro</title>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/estilos.css" />
</head>
<body>
  <nav class="navbar">
    <a href="/planes" class="logo">← Sistemas<span>Pro</span></a>
  </nav>

  <main class="page">
    <div class="page-head">
      <div>
        <h1>Creá tu tienda</h1>
        <p class="page-sub">7 días de prueba gratis. Te armamos todo automáticamente — no hace falta que hagas nada más.</p>
      </div>
    </div>

    <div class="card" style="max-width: 520px;">
      <% if (error) { %><p class="alert alert-error"><%= error %></p><% } %>

      <form action="/registro" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

        <div class="form-group">
          <label>Nombre del negocio</label>
          <input type="text" name="nombreNegocio" value="<%= valores.nombreNegocio || '' %>" placeholder="Ej: Cuarto Caribe" required />
        </div>

        <div class="form-group">
          <label>Subdominio</label>
          <div style="display:flex; align-items:center; gap:0.4rem;">
            <input type="text" name="slug" value="<%= valores.slug || '' %>" pattern="[a-z0-9\-]+" placeholder="mi-negocio" required style="flex:1;" />
            <span class="form-hint" style="white-space:nowrap;">.sistemaspro.info</span>
          </div>
        </div>

        <div class="form-grid-2">
          <div class="form-group">
            <label>Tu nombre</label>
            <input type="text" name="nombreDueno" value="<%= valores.nombreDueno || '' %>" required />
          </div>
          <div class="form-group">
            <label>Tu correo (será tu usuario)</label>
            <input type="email" name="correoDueno" value="<%= valores.correoDueno || '' %>" required />
          </div>
        </div>

        <div class="form-group">
          <label>Contraseña</label>
          <input type="password" name="claveDueno" required minlength="6" />
        </div>

        <div class="form-group">
          <label>¿Qué plan querés cuando termine la prueba?</label>
          <select name="plan" required>
            <% planes.forEach(function (p) { %>
              <option value="<%= p.id %>" <%= valores.plan === p.id ? 'selected' : '' %>><%= p.nombre %> — <%= p.detalle %></option>
            <% }) %>
          </select>
          <p class="form-hint">No se te cobra nada ahora — recién al terminar los 7 días de prueba.</p>
        </div>

        <button type="submit" class="btn btn-primary btn-full">Crear mi tienda →</button>
      </form>
    </div>
  </main>
</body>
</html>
