# Astro Partner Hub

Actúa como un Desarrollador Web Full Stack Senior y Arquitecto UI/UX experto en el stack **Astro + Alpine.js + Vanilla JS**. 

Necesito que construyas una Progressive Web App (PWA) de nivel profesional, moderna (tendencias UX/UI 2026), responsive (Mobile-First optimizada para todas las pantallas de smartphones, pero adaptable a Tablets y Desktop) para la plataforma de **Socios Comerciales**.

---

### 🛠️ TECH STACK OBLIGATORIO

- **Framework Principal:** Astro (usando componentes `.astro` para la estructura y layout).

- **Reactividad Ligera:** Alpine.js (para la interactividad de la UI como modales, pestañas, menús desplegables y toggles).

- **Lógica de Negocio y PWA:** Vanilla JS puro (para consumo de API Fetch, LocalStorage, Registro de Service Worker, Notificaciones Push y lógica de cálculos).

- **Estilos:** Tailwind CSS (o CSS utilitario moderno con diseño fluido).

---

### 📱 DISEÑO Y ESTÉTICA UI/UX (Tendencias 2026)

1. **Línea Gráfica (Inspirada en el Wireframe adjunto):**

   - Palette de colores primaria basada en **Amarillo/Dorado cálido (`#FACC15` o similar), Negro Profundo (`#18181B`) y Blanco / Gris claro (`#F4F4F5`)**.

   - Tarjetas con bordes suavemente redondeados (`rounded-2xl` o `rounded-3xl`), sombras sutiles y botones de acción principales (*CTA*) en negro o amarillo contrastante.

   - Tipografía moderna, limpia y legibilidad óptima en pantallas pequeñas.

2. **Navegación Móvil y Responsive:**

   - **En Móviles:** Implementa una barra de navegación inferior fija (*Bottom Navigation Bar*) con iconos táctiles para: Inicio/Vuelos, Reservaciones, Comisiones y Perfil/Ajustes.

   - **En Desktop/Tablets:** La interfaz debe transformarse automáticamente a un Dashboard con barra lateral (*Sidebar*) retraíble o navegación superior horizontal con contenedores centrados para aprovechar pantallas anchas.

---

### ⚙️ FUNCIONALIDADES Y FLUIJO DE LA APP

#### 1. Módulo de Autenticación y Registro de Socios

- **Login / Inicio de Sesión:** Formulario limpio con campos para usuario/email y contraseña, botón de inicio de sesión y enlace a registro.

- **Registro de Socios Comerciales:** Formulario estructurado que capture **obligatoriamente** los siguientes campos:

  - Categoría

  - Empresas asignadas

  - Nombre

  - Razón Social

  - RUC

  - Contacto Principal

  - Email

  - Teléfono

  - Sitio Web

  - Dirección

  - Notas

#### 2. Módulo de Consulta de Vuelos y Reservaciones

- Buscador con filtros por fecha, origen, destino y número de pasajeros.

- Listado visual de vuelos disponibles en tarjetas interactivas.

- Flujo para **Generar Reservación** que permita seleccionar vuelo y agregar opcionales / adicionales (Souvenirs, snacks, transporte terrestre, etc.).

- **Desglose y Resumen de Compra:** Debe mostrar el total en general calculado en tiempo real con el desglose exacto de:

  - Subtotal Vuelos

  - Subtotal Souvenirs / Extras

  - Impuestos / Tasas

  - **TOTAL GENERAL**

#### 3. Módulo de Comisiones (Cálculo Automático)

- Dashboard/Resumen de comisiones ganadas por el socio comercial.

- **Lógica de negocio:** La comisión es del **10%** sobre el valor de las ventas.

- Debe incluir una vista o tarjeta resumen limpia que muestre:

  - Mapeo de ventas realizadas.

  - Total cobrado en vuelos y extras.

  - **Comisión neta a recibir (10% calculado automáticamente)**.

#### 4. Configuración PWA y Notificaciones (Service Worker en Vanilla JS)

- Incluye la creación y configuración del archivo `manifest.json` (iconos, tema amarillo/negro, nombre de la app, `display: standalone`).

- Script de registro de un **Service Worker en Vanilla JS** para:

  - Funcionar en segundo plano y soportar uso offline (caché de assets principales).

  - Simular el envío y recepción de **Notificaciones Push** (por ejemplo: *"¡Reservación confirmada!"* o *"Nueva comisión acreditada del 10%"*).

---

### 📦 ENTREGABLES REQUERIDOS

1. Estructura de archivos limpia para el proyecto en Astro.

2. El archivo de layout general con la inclusión de Alpine.js y la lógica del Service Worker en Vanilla JS.

3. El componente `.astro` o página de **Login / Registro** con todos los campos especificados.

4. El componente `.astro` para **Consulta de Vuelos, Resumen de Compra y Desglose de Comisiones del 10%**.

5. Los archivos `manifest.json` y `sw.js` (Service Worker) listos para producción.

Por favor, escribe un código modular, limpio, completamente funcional y comentado donde corresponda.

This project was built with [Lovable](https://lovable.dev).

## Build with Lovable

Continue developing this project in the [Lovable editor](https://lovable.dev/projects/be1f5b9e-f0ac-441f-a123-4c938f08b54e).

- **Ship faster**: describe what you want to build and Lovable handles the code.
- **Stay in sync**: every change made in Lovable is committed straight to this repository.
- **Full ownership**: this code is yours. Push to `main` on GitHub and your changes sync back into Lovable, ready for your next prompt.

## Development

Prefer working locally? You need Node.js and npm — [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating).

```sh
git clone <this-repository-url>
cd <repository-name>
npm i
npm run dev
```