# Arquitectura de Page Headers Dinámicos

## 📋 Resumen

Sistema centralizado para manejar page headers dinámicos según el demo activo y el módulo. Permite que cada demo tenga su propio estilo de page header mientras mantiene una arquitectura escalable y fácil de mantener.

## 🏗️ Arquitectura

### Estructura de Archivos

```
config/
  └── page-headers.php          # Configuración centralizada de demos y módulos

app/Helpers/
  └── PageHeaderHelper.php      # Helper principal con lógica de decisión

resources/views/
  ├── components/
  │   └── page-header.blade.php  # Componente moderno (x-page-header)
  └── modules/
      └── [module]/
          └── frontend/
              ├── index.blade.php
              └── partials/
                  └── dynamic-header.blade.php  # Header clásico (opcional)
```

## 🎯 Demos Disponibles

### Lista Completa de Demos (10 demos)

1. **demo-construction** - Header clásico por defecto
2. **demo-transportation-logistic** - Header moderno por defecto
3. **demo-accounting-1** - Header moderno por defecto
4. **demo-architecture-2** - Header moderno por defecto
5. **demo-creative-agency-2** - Header moderno por defecto
6. **demo-insurance** - Header moderno por defecto
7. **demo-law-firm-2** - Header moderno por defecto
8. **demo-marketing-1** - Header moderno por defecto
9. **demo-sass** - Header moderno por defecto
10. **default** - Header moderno por defecto (fallback)

### Configuración en `config/page-headers.php`

```php
'demos' => [
    'demo-construction' => [
        'default_type' => 'classic',  // Usa headers clásicos
        'modules' => [
            'services' => 'classic',  // Override específico
            'news' => 'classic',
        ],
    ],
    'demo-transportation-logistic' => [
        'default_type' => 'modern',   // Usa headers modernos
    ],
    // ... más demos
],
```

## 📦 Módulos con Page Headers Implementados

### Módulos Completados ✅

1. **Products** (`products`)
   - Ruta: `front.products.index`
   - Icono: `fas fa-laptop-code`
   - Título: "Equipos"

2. **Services** (`services`)
   - Ruta: `frontend.services.index`
   - Icono: `fas fa-cogs`
   - Título: "Soluciones"
   - Header clásico: `partials/dynamic-header.blade.php`

3. **News** (`news`)
   - Ruta: `frontend.news.index`
   - Icono: `fas fa-newspaper`
   - Título: "Novedades"
   - Header clásico: hardcodeado en `index.blade.php`

4. **Blog** (`blog`)
   - Ruta: `blog.index`
   - Icono: `fas fa-blog`
   - Título: "Blog"
   - Header clásico: `partials/dynamic-header.blade.php`

5. **Gallery** (`gallery`)
   - Ruta: `frontend.gallery.gallery`
   - Icono: `fas fa-images`
   - Título: "Galería"
   - Header clásico: `partials/dynamic-header.blade.php`

6. **Projects** (`projects`)
   - Ruta: `frontend.projects.index`
   - Icono: `fas fa-project-diagram`
   - Título: "Proyectos"
   - Header clásico: `partials/dynamic-header.blade.php`

7. **References** (`references`)
   - Ruta: `frontend.references.index`
   - Icono: `fas fa-handshake`
   - Título: "Referencias"
   - Header clásico: hardcodeado en `index.blade.php`

8. **FAQs** (`faqs`)
   - Ruta: `frontend.faqs.index`
   - Icono: `fas fa-question-circle`
   - Título: "Preguntas Frecuentes"
   - Header clásico: `partials/dynamic-header.blade.php`

9. **Team Members** (`team-members`)
   - Ruta: `frontend.team.index`
   - Icono: `fas fa-users`
   - Título: "Equipo"
   - Header: siempre moderno (sin clásico)

## 🔧 Uso en Vistas

### Patrón Estándar

```blade
@php
    $moduleConfig = get_module_page_header_config('nombre-modulo');
    $pageTitle = $customTitle ?? $moduleConfig['title'];
    $pageSubtitle = $customSubtitle ?? $moduleConfig['subtitle'];
    $breadcrumbs = get_module_breadcrumbs('nombre-modulo', $currentTitle);
@endphp

@if(should_use_modern_page_header('nombre-modulo'))
    {{-- Modern Page Header --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Classic Page Header --}}
    @if(view()->exists('modules.nombre-modulo.frontend.partials.dynamic-header'))
        @include('modules.nombre-modulo.frontend.partials.dynamic-header')
    @else
        {{-- Fallback a moderno --}}
        <x-page-header ... />
    @endif
@endif
```

## 🎨 Tipos de Page Headers

### 1. Header Moderno (`x-page-header`)
- **Componente**: `<x-page-header>`
- **Ubicación**: `resources/views/components/page-header.blade.php`
- **Características**:
  - Diseño limpio y moderno
  - Breadcrumbs integrados
  - Iconos opcionales
  - Backgrounds configurables (primary, dark, gradient, secondary)
  - Animaciones integradas

### 2. Header Clásico
- **Tipos**:
  - **Partial**: `partials/dynamic-header.blade.php` (services, blog, gallery, projects, faqs)
  - **Hardcodeado**: Directamente en `index.blade.php` (news, references)
- **Características**:
  - Diseño específico del demo
  - SVG decorativos
  - Posicionamiento absoluto
  - Animaciones personalizadas

## 📝 Agregar un Nuevo Demo

### Paso 1: Agregar a la configuración

Editar `config/page-headers.php`:

```php
'demos' => [
    'demo-nuevo-demo' => [
        'default_type' => 'modern',  // o 'classic'
        'modules' => [
            // Overrides específicos por módulo (opcional)
            'services' => 'classic',
        ],
    ],
],
```

### Paso 2: Crear header clásico (si es necesario)

Si el demo usa headers clásicos, crear:
- `resources/views/modules/[module]/frontend/partials/dynamic-header.blade.php`

O mantener hardcodeado en `index.blade.php` si es específico del demo.

## 📝 Agregar un Nuevo Módulo

### Paso 1: Agregar configuración del módulo

Editar `config/page-headers.php`:

```php
'module_config' => [
    'nuevo-modulo' => [
        'title' => 'Título del Módulo',
        'subtitle' => 'Subtítulo descriptivo',
        'icon' => 'fas fa-icono',
        'route' => 'ruta.nombre',
    ],
],
```

### Paso 2: Implementar en la vista

En `resources/views/modules/nuevo-modulo/frontend/index.blade.php`:

```blade
@php
    $moduleConfig = get_module_page_header_config('nuevo-modulo');
    $breadcrumbs = get_module_breadcrumbs('nuevo-modulo');
@endphp

@if(should_use_modern_page_header('nuevo-modulo'))
    <x-page-header
        :title="$moduleConfig['title']"
        :subtitle="$moduleConfig['subtitle']"
        :icon="$moduleConfig['icon']"
        :breadcrumbs="$breadcrumbs"
        background="primary" />
@else
    {{-- Header clásico si existe --}}
    @include('modules.nuevo-modulo.frontend.partials.dynamic-header')
@endif
```

## 🔍 Funciones Helper Disponibles

### `should_use_modern_page_header(?string $module = null): bool`
Determina si usar header moderno según demo y módulo.

### `get_module_page_header_config(string $module): array`
Obtiene la configuración de un módulo (título, subtítulo, icono, ruta).

### `get_module_breadcrumbs(string $module, ?string $currentTitle = null): array`
Genera breadcrumbs por defecto para un módulo.

### `get_active_demo(): string`
Obtiene el nombre del demo activo.

## 🎯 Lógica de Decisión

```
1. ¿El demo tiene configuración específica para el módulo?
   → SÍ: Usar esa configuración
   → NO: Continuar

2. ¿El demo tiene un default_type definido?
   → SÍ: Usar ese tipo
   → NO: Continuar

3. ¿Existe un header clásico para el módulo?
   → SÍ: Usar clásico
   → NO: Usar moderno (fallback seguro)
```

## ✅ Ventajas del Sistema

1. **Centralizado**: Toda la configuración en un solo archivo
2. **Escalable**: Fácil agregar nuevos demos y módulos
3. **Flexible**: Permite overrides por módulo
4. **Seguro**: Siempre tiene un fallback
5. **Mantenible**: Cambios en un solo lugar
6. **Consistente**: Mismo patrón en todos los módulos

## 📊 Estado Actual

- ✅ **10 demos** configurados
- ✅ **9 módulos** con page headers implementados
- ✅ **Sistema de fallback** implementado
- ✅ **Configuración centralizada** funcionando
- ✅ **Helpers globales** disponibles

## 🚀 Próximos Pasos

1. Agregar más demos según necesidad
2. Crear headers clásicos específicos para nuevos demos
3. Personalizar estilos por demo si es necesario
4. Optimizar rendimiento si hay muchos demos