# web-recursos — guía de puesta en marcha

Sitio estático (HTML/CSS/JS, sin frameworks) para la biblioteca de
lead magnets de `@byduvan_ai`. Flujo: tarjetas → popup con 3 campos →
guarda el lead en Google Sheets → redirige a `gracias.html` (recurso
pedido + resto de la biblioteca + Skool/Cal). Incluye un
`dashboard.html` interno para medir qué recurso convierte mejor.

## 1. Conecta Google Sheets (una vez)

1. Crea un Google Sheet nuevo (vacío, cualquier nombre — ej. "Leads web-recursos").
2. Menú **Extensiones → Apps Script**.
3. Borra el contenido del editor y pega **todo** el archivo
   [`apps-script/Code.gs`](apps-script/Code.gs) de este proyecto.
4. En la línea `const DASH_TOKEN = 'CAMBIA_ESTE_TOKEN';` escribe una
   clave tuya (letras y números, sin espacios). Guárdala, la vas a
   necesitar en el paso 3.
5. Arriba a la derecha: **Implementar → Nueva implementación**.
   - Tipo: **Aplicación web**.
   - Ejecutar como: **Yo** (tu cuenta).
   - Quién tiene acceso: **Cualquier usuario**.
6. Autoriza los permisos que te pida Google (es tu propio script).
7. Copia la URL que te entrega — termina en `/exec`.

## 2. Configura `config.js`

Abre [`config.js`](config.js) y reemplaza:

- `GOOGLE_SCRIPT_URL` → la URL que copiaste en el paso 1.7.
- `DASHBOARD_TOKEN` → el mismo valor que pusiste en `DASH_TOKEN` (paso 1.4).
- `WHATSAPP_NUMERO` → tu número con código de país, sin espacios (ej. `573001234567`).
- Revisa `SKOOL_LINK` y `CAL_LINK`.
- Agrega/edita recursos en el arreglo `RECURSOS` (título, descripción,
  badge, ícono, y si tiene lista "incluye").

## 3. Prueba en local

Desde esta carpeta, con cualquier servidor estático, por ejemplo:

```bash
npx serve .
```

Abre la URL que te dé (ej. `http://localhost:3000`), haz clic en
"Quiero esto" en una tarjeta, completa el formulario y confirma que:

- Te redirige a `gracias.html` con el recurso destacado.
- La fila aparece en tu Google Sheet (pestaña "Leads").
- `dashboard.html` te deja entrar con el token y muestra ese lead.

## 4. Publica (Netlify o Vercel)

Es un sitio 100% estático — no hay build. Arrastra esta carpeta
completa (`web-recursos/`) a [netlify.com/drop](https://app.netlify.com/drop)
o conéctala como proyecto en Vercel. No hay variables de entorno que
configurar ahí: todo vive en `config.js`.

## Estructura

```
web-recursos/
├── index.html          biblioteca + popup de captura + venta
├── gracias.html         página compartida post-captura
├── dashboard.html        panel interno (protegido con DASHBOARD_TOKEN)
├── config.js             ← el único archivo que edita Duvan normalmente
├── style.css
├── js/lib.js              lógica compartida (tarjetas, modal, envío)
├── recursos/*.html         contenido real de cada recurso (PDF/prompts/etc.)
└── apps-script/Code.gs      pega esto en el editor de Apps Script del Sheet
```

## Notas

- El selector de WhatsApp en el popup solo incluye países de
  Latinoamérica y Europa (editable en `PAISES_WHATSAPP` dentro de
  `js/lib.js`).
- El "dashboard" usa el mismo token como contraseña de entrada y como
  autenticación de la API — es suficiente para uso interno, pero no
  es una cuenta con login real. No compartas la URL ni el token.
- Para agregar un recurso nuevo: solo agrega un objeto al arreglo
  `RECURSOS` en `config.js` y crea su página en `recursos/`. No hay
  que tocar `index.html`, `gracias.html` ni `dashboard.html`.