lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/ecommerce1.html

@@ -0,0 +1,50 @@
+ <!-- Botón Flotante de WhatsApp convertido a PrimeNG -->
+    <button id="whatsapp-button"
+            pButton
+            type="button"
+            class="whatsapp-float p-button-rounded p-button-lg"
+            [ngClass]="{ 'p-button-success': showWhatsappButton, 'p-button-secondary': !showWhatsappButton }"
+            (click)="showWhatsappModalDialog()"
+            aria-label="Contáctanos por WhatsApp">
+        <!-- SVG se mantiene para icono consistente -->
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" style="vertical-align:middle">
+            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
+        </svg>
+    </button>
+
+    <!-- WhatsApp Modal reemplazado por PrimeNG Dialog -->
+    <p-dialog [(visible)]="showWhatsappModal"
+              modal="true"
+              [blockScroll]="true"
+              [closable]="true"
+              [draggable]="false"
+              [focusOnShow]="false"
+              [keepInViewport]="true"
+              [position]="'center'"
+              [style]="{ width: '360px' }"
+              [dismissableMask]="false"
+              [closeOnEscape]="false"
+              appendTo="body">
+        <div class="p-text-center" style="display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;">
+            <div style="background:#25d366;color:white;width:72px;height:72px;border-radius:36px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:1rem;">
+                <svg width="36" height="36" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
+                </svg>
+            </div>
+            <h3>¡No te vayas aún!</h3>
+            <p>Si tienes alguna pregunta, puedes chatear con nosotros directamente por WhatsApp.</p>
+            <div style="margin-top:1rem">
+                <button pButton type="button" label="Chatear en WhatsApp" class="p-button-success" (click)="openWhatsappChat('Hola, tengo una pregunta.')"></button>
+            </div>
+        </div>
+    </p-dialog>
+
+    <lib-header-ecommerce1 [menuConfig]="headerMenuConfig" [DatosNegocio]="DatosNegocio"></lib-header-ecommerce1>
+    <lib-bar-float-ecommerce1 ></lib-bar-float-ecommerce1>
+  
+        <router-outlet></router-outlet>
+
+    <!-- Footer Section -->
+    <lib-footer-ecommerce1 [DatosNegocio]="DatosNegocio"></lib-footer-ecommerce1>
+ 
+   

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/ecommerce1.scss

@@ -0,0 +1,276 @@
+/* Estilo para el botón flotante de WhatsApp */
+        .whatsapp-float {
+            position: fixed;
+            bottom: 1.5rem;
+            right: 1.5rem;
+            z-index: 999;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+        }
+
+        .whatsapp-float.show {
+            opacity: 1;
+            visibility: visible;
+        }
+
+        .whatsapp-float a {
+            display: block;
+            background-color: #25d366;
+            color: white;
+            padding: 1rem;
+            border-radius: 9999px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1-px rgba(0, 0, 0, 0.06);
+            transition: transform 0.2s ease-in-out;
+        }
+
+        .whatsapp-float a:hover {
+            transform: scale(1.1);
+        }
+
+        .whatsapp-float .fa-whatsapp {
+            font-size: 2.5rem;
+        }
+        
+        /* Modal styling (solo para el de WhatsApp) */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.6);
+            display: none; /* Initially hidden */
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+        }
+
+        .modal-content {
+            background-color: #ffffff;
+            padding: 2rem;
+            border-radius: 1rem;
+            text-align: center;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+            max-width: 90%;
+            width: 400px;
+            animation: fadeIn 0.5s ease-out;
+        }
+        
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .modal-close-button {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 1.5rem;
+            color: #aaa;
+            cursor: pointer;
+
+            &:hover {
+                color: #666;
+            }
+        }
+        
+        /* Estilos para las nuevas secciones de Login y Registro (paginas separadas) */
+        .auth-page {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: 2rem 0;
+        }
+
+        .auth-section {
+            background-color: #ffffff;
+            padding: 4rem 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+            max-width: 90%;
+            width: 500px;
+            margin: 4rem auto;
+            animation: fadeIn 0.5s ease-out;
+        }
+        
+        /* Animaciones para los elementos al hacer scroll */
+        .animate-scroll {
+            opacity: 0;
+            transform: translateY(50px);
+            transition: opacity 1.5s ease-out, transform 1.5s ease-out;
+        }
+
+        .animate-scroll.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+        /* Animación del titulo */
+        .animate-title-initial {
+            opacity: 0;
+            transform: translateX(-100px);
+        }
+
+        .animate-title-final {
+            transition: opacity 1s ease-out, transform 1s ease-out;
+        }
+
+        .animate-title-initial.is-visible {
+            opacity: 1;
+            transform: translateX(0);
+            animation: rotate360 1s ease-out forwards;
+            animation-iteration-count: 2; /* Gira dos veces */
+        }
+
+        @keyframes rotate360 {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+
+     
+       
+        /* Animación de las tarjetas de categoría */
+        .category-card-animation {
+            opacity: 0;
+            transform: scale(0.8);
+            transition: opacity 1.5s ease-out, transform 1.5s ease-out;
+        }
+
+        .category-card-animation.is-visible {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        /* Animación para la seccion "Nuestra Historia" */
+        .animate-history-section {
+            opacity: 0;
+            transform: translateY(100px);
+            transition: opacity 2s ease-out, transform 2s ease-out;
+        }
+        .animate-history-section.is-visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+
+    
+        /* Animación para el newsletter */
+        .animate-newsletter-section {
+            opacity: 0;
+            transform: scale(0.95);
+            transition: opacity 1.5s ease-out, transform 1.5s ease-out;
+        }
+        .animate-newsletter-section.is-visible {
+            opacity: 1;
+            transform: scale(1);
+        }
+        
+        /* Estilos del nuevo encabezado */
+        .header-top {
+            background-color: #fbc30d; /* Nuevo color amarillo */
+            color: black; /* Texto en negro */
+        }
+        
+        .header-top a {
+             color: black;
+             transition: color 0.3s;
+        }
+
+        .header-top a:hover {
+            color: #4a4a4a;
+        }
+
+        .main-nav {
+            background-color: #0093e9; /* Nuevo color azul */
+            padding: 1.5rem;
+            border-radius: 2rem;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+            position: relative;
+            margin-top: 2rem;
+            margin-left: auto;
+            margin-right: auto;
+            max-width: 90%;
+            width: 1000px;
+        }
+
+        .main-nav-ul {
+            list-style: none;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-grow: 1;
+            gap: 2rem;
+        }
+
+        .main-nav-link {
+            font-size: 1.125rem; /* text-lg */
+            font-weight: 600; /* font-semibold */
+            color: white; /* Color de link blanco */
+            transition: color 0.3s;
+        }
+        
+        .main-nav-link:hover {
+            color: #fbc30d; /* Nuevo color de hover para los links */
+        }
+        
+        /* Tamaño de la fuente ajustado */
+        .logo-center {
+            font-size: 2.5rem; /* Reducido de 3rem a 2.5rem */
+            font-weight: 700;
+            color: black;
+            text-shadow: 1px 1px 2px #fbc30d; /* Nuevo color para la sombra del logo */
+        }
+        
+        /* Animación del logo ya no tiene infinite */
+        .logo-rotate {
+            animation: rotate360 2s ease-out;
+        }
+
+        /* Estilos para el nuevo menú hamburguesa */
+        .hamburger-menu {
+            display: none;
+            cursor: pointer;
+            z-index: 50;
+        }
+        
+        @media (max-width: 767px) {
+            .hamburger-menu {
+                display: block;
+            }
+        }
+        
+        /* Ajuste para el encabezado en móvil para que el nombre de Zigma Inflables sea visible */
+        .mobile-header {
+            background-color: #0093e9; /* Mismo fondo que el desktop */
+            padding: 1rem;
+            border-radius: 1rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+
+        .mobile-header .logo-center {
+             font-size: 2rem;
+        }
+        
+        /* Footer con texto en negro */
+        .footer-top {
+            color: black;
+        }
+
+        // Estilos adicionales para SVG de WhatsApp
+        .whatsapp-float {
+          svg {
+            display: block;
+            width: 2.5rem;
+            height: 2.5rem;
+          }
+        }
+
+        .modal-content svg {
+          display: block;
+        }

package/projects/lib-common-angular/src/lib/componentes/landingPages/pages/ecommerce1/ecommerce1.ts

@@ -0,0 +1,341 @@
+import { Component, OnDestroy, OnInit, ElementRef, ViewChild, Renderer2, PLATFORM_ID, Inject, Input, OnChanges } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { Router, ActivatedRoute } from '@angular/router';
+import { HeaderEcommerce1Component } from "../../molecules/ecommerce1/header-ecommerce1/header-ecommerce1";
+import { BarFloatEcommerce1 } from "../../molecules/ecommerce1/bar-float-ecommerce1/bar-float-ecommerce1";
+import { FooterEcommerce1 } from "../../molecules/ecommerce1/footer-ecommerce1/footer-ecommerce1";
+import { RouterOutlet } from '@angular/router';
+import { CategoriaDTO, MenuConfig, MenuItem, BusinessDTO} from '@juliaosistem/core-dtos';
+@Component({
+  selector: 'lib-ecommerce1',
+  imports: [CommonModule, DialogModule, ButtonModule, BarFloatEcommerce1, FooterEcommerce1, HeaderEcommerce1Component, RouterOutlet],
+  templateUrl: './ecommerce1.html',
+  styleUrl: './ecommerce1.scss',
+})
+export class Ecommerce1 implements OnInit, OnDestroy, OnChanges {
+
+  // El usuario inicio sesion o no
+  @Input() isLogin: boolean = false;
+
+   // Datos del negocio
+  @Input() DatosNegocio :BusinessDTO | null = null;
+
+  // Categorias a mostrar
+  @Input() Categorias!: CategoriaDTO [];
+
+  // Rutas para navegación 
+  @Input() routePaths: { [key: string]: string } = {
+    home: './',
+    login: 'login',
+    register: 'register'
+  };
+
+  // Configuración del menú 
+    headerMenuConfig: MenuConfig | null = null;
+
+  @ViewChild('whatsappButton', { static: false }) whatsappButton!: ElementRef;
+  @ViewChild('productGrid', { static: false }) productGrid!: ElementRef;
+  @ViewChild('mobileMenu', { static: false }) mobileMenu!: ElementRef;
+
+  // Estado del componente
+  currentPage: string = 'home';
+  showWhatsappButton = false;
+  showWhatsappModal = false;
+  whatsappModalShown = false;
+  isMobileMenuOpen = false;
+
+  // Timers y listeners
+  private whatsappModalTimer?: number;
+  private scrollListener?: () => void;
+  private mouseOutListener?: (event: MouseEvent) => void;
+  private beforeUnloadListener?: (event: BeforeUnloadEvent) => void;
+  private intersectionObserver?: IntersectionObserver;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private renderer: Renderer2,
+    // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+    @Inject(PLATFORM_ID) private platformId: Object
+  ) {}
+
+  ngOnInit(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      this.initializeAnimations();
+      this.setupWhatsappModal();
+      this.setupScrollListener();
+    }
+     this.updateMenuConfig();
+  }
+
+  ngOnChanges(): void {
+    // Los datos han cambiado, aquí puedes actualizar cualquier lógica necesaria
+  }
+
+  ngAfterViewInit(): void {
+    this.handleWhatsappButtonVisibility();
+  }
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+   // eslint-disable-next-line max-lines-per-function
+   getItemsInHeaderMenu(): MenuItem[]  {
+    return  [
+        { id: 'home',label: 'Inicio',
+          type: 'link',
+          routerLink: [this.routePaths['home'] || './'],
+          icon: 'fas fa-home',visible: true, order: 1
+        },
+        {
+          id: 'login',
+          label: 'Iniciar Sesión',
+          type: 'link',
+          routerLink: [this.routePaths['login'] || 'login'],
+          icon: 'fas fa-sign-in-alt', visible: true,  order: 4
+        },   {
+          id: 'register',
+          label: 'Registrar',
+          type: 'link',
+          routerLink: [this.routePaths['register'] || 'register'],
+          icon: 'fas fa-user-plus',visible: true,  order: 5
+        }, {
+          id: 'Nosotros',
+          label: 'Nosotros',
+          type: 'link',
+          routerLink:['#nosotros'],
+          icon: 'fas fa-user-plus',visible: true,  order: 5
+        }
+      ]
+  }
+  
+  private updateMenuConfig(): void {
+    this.headerMenuConfig = {
+      name: 'Header Menu',
+      id: 'header-menu',
+      items: this.getItemsInHeaderMenu(),
+      showIcons: true
+    };
+  }
+      
+        // ===== NAVEGACIÓN =====
+  navigateToPage(page: string): void {
+    this.currentPage = page;
+    this.isMobileMenuOpen = false;
+    
+    // Usar Angular Router para navegación
+    const path = this.routePaths[page];
+    if (path !== undefined) {
+      this.router.navigate([path], { relativeTo: this.route });
+    }
+  }
+
+  // ===== MENÚ MÓVIL =====
+  toggleMobileMenu(): void {
+    this.isMobileMenuOpen = !this.isMobileMenuOpen;
+  }
+
+  // ===== WHATSAPP FUNCIONALIDAD =====
+  setupWhatsappModal(): void {
+    // Mostrar modal después de 10 segundos
+    this.whatsappModalTimer = window.setTimeout(() => {
+      this.showWhatsappModalDialog();
+    }, 15000);
+
+    // Exit intent detection
+    this.mouseOutListener = (event: MouseEvent) => {
+      if (event.clientY <= 0 && !this.whatsappModalShown) {
+        this.showWhatsappModalDialog();
+      }
+    };
+    document.addEventListener('mouseout', this.mouseOutListener);
+
+    // Intento de cierre/recarga de la página: usar el diálogo nativo de confirmación
+    // y, si el usuario decide permanecer, mostrar nuestro modal personalizado.
+    this.beforeUnloadListener = (event: BeforeUnloadEvent) => {
+      if (!this.whatsappModalShown && this.currentPage === 'home') {
+        event.preventDefault();
+        event.returnValue = '';
+        // El navegador mostrará su prompt; si el usuario se queda, mostramos el modal.
+        setTimeout(() => {
+          this.showWhatsappModalDialog();
+        }, 0);
+      }
+    };
+    window.addEventListener('beforeunload', this.beforeUnloadListener);
+  }
+
+  showWhatsappModalDialog(): void {
+    if (this.currentPage === 'home' && !this.whatsappModalShown) {
+      this.showWhatsappModal = true;
+      this.whatsappModalShown = true;
+    }
+  }
+
+  openWhatsappChat(message?: string): void {
+    const defaultMessage = 'Hola, estoy interesado en los productos de Zigma Inflables.';
+    const whatsappNumber = this.DatosNegocio?.telefono || '3186956700'; // Reemplazar con número real
+    const finalMessage = message || defaultMessage;
+    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(finalMessage)}`;
+    window.open(whatsappUrl, '_blank');
+    
+  }
+
+  // ===== NEWSLETTER =====
+  onNewsletterSubmit(email: string): void {
+    const message = `Hola, quiero ver tus productos. Este es mi correo: ${email}. Vi esto desde tu página web.`;
+    this.openWhatsappChat(message);
+  }
+
+  // ===== SCROLL ANIMATIONS =====
+  setupScrollListener(): void {
+    this.scrollListener = () => {
+      this.handleWhatsappButtonVisibility();
+    };
+    window.addEventListener('scroll', this.scrollListener);
+  }
+
+  private handleWhatsappButtonVisibility(): void {
+    if (this.currentPage !== 'home') {
+      this.showWhatsappButton = false;
+      return;
+    }
+
+    if (this.productGrid?.nativeElement) {
+      const productGridTop = this.productGrid.nativeElement.offsetTop;
+      if (window.scrollY > (productGridTop - 500)) {
+        this.showWhatsappButton = true;
+      } else {
+        this.showWhatsappButton = false;
+      }
+    }
+  }
+
+  // ===== ANIMACIONES =====
+  initializeAnimations(): void {
+    const observerOptions = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.2
+    };
+
+    this.intersectionObserver = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          this.renderer.addClass(entry.target, 'is-visible');
+          this.intersectionObserver?.unobserve(entry.target);
+        }
+      });
+    }, observerOptions);
+
+    // Observar elementos cuando el DOM esté listo
+    setTimeout(() => {
+      this.observeAnimationElements();
+      this.animateTitle();
+    }, 100);
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  private observeAnimationElements(): void {
+    if (!this.intersectionObserver) return;
+
+    // Elementos generales con animación de scroll
+    const animateElements = document.querySelectorAll('.animate-scroll');
+    animateElements.forEach(element => {
+      this.intersectionObserver?.observe(element);
+    });
+
+    // Tarjetas de producto con animación escalonada
+    const productCards = document.querySelectorAll('.product-card');
+    productCards.forEach((card, index) => {
+      this.renderer.setStyle(card, 'transition-delay', `${index * 0.2}s`);
+      this.intersectionObserver?.observe(card);
+    });
+
+    // Otros elementos animados
+    const categoryCards = document.querySelectorAll('.category-card-animation');
+    categoryCards.forEach(card => {
+      this.intersectionObserver?.observe(card);
+    });
+
+    const heroSection = document.querySelector('.animate-hero-section');
+    if (heroSection) {
+      this.intersectionObserver.observe(heroSection);
+    }
+
+    const historySection = document.querySelector('.animate-history-section');
+    if (historySection) {
+      this.intersectionObserver.observe(historySection);
+    }
+
+    const instagramSection = document.querySelector('.animate-instagram-section');
+    if (instagramSection) {
+      this.intersectionObserver.observe(instagramSection);
+    }
+
+    const newsletterSection = document.querySelector('.animate-newsletter-section');
+    if (newsletterSection) {
+      this.intersectionObserver.observe(newsletterSection);
+    }
+  }
+
+  private animateTitle(): void {
+    const toystoreTitle = document.getElementById('toystore-title');
+    if (toystoreTitle) {
+      this.renderer.addClass(toystoreTitle, 'logo-rotate');
+    }
+  }
+
+  // ===== PRODUCTOS =====
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onProductClick(product: any): void {
+    console.log('Product clicked:', product);
+    // Implementar navegación a detalle del producto
+    // this.router.navigate(['/ecommerce1/product', product.id]);
+  }
+
+  onCategoryFilter(category: string): void {
+    console.log('Filter by category:', category);
+    // Implementar filtrado de productos
+  }
+
+  // ===== CLEANUP =====
+  private cleanup(): void {
+    if (this.whatsappModalTimer) {
+      clearTimeout(this.whatsappModalTimer);
+    }
+    if (this.scrollListener) {
+      window.removeEventListener('scroll', this.scrollListener);
+    }
+    if (this.mouseOutListener) {
+      document.removeEventListener('mouseout', this.mouseOutListener);
+    }
+    if (this.beforeUnloadListener) {
+      window.removeEventListener('beforeunload', this.beforeUnloadListener);
+    }
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+    }
+
+    // Seguridad: asegurar que el body recupere el scroll si el diálogo quedó abierto
+    try {
+      document.body.classList.remove('p-overflow-hidden', 'overflow-hidden');
+    } catch(e){ console.error(e); }
+    this.showWhatsappModal = false;
+  }
+
+  // ===== EVENTOS DEL TEMPLATE =====
+  // Nota: con PrimeNG `p-dialog` manejamos el hide mediante `(onHide)`
+
+  onLanguageChange(language: string): void {
+    console.log('Language changed to:', language);
+    // Implementar cambio de idioma
+  }
+
+  onSocialLogin(provider: 'google' | 'facebook'): void {
+    console.log('Social login with:', provider);
+    // Implementar login social
+  }
+}