ui-essentials/projects/demo-ui-essentials/src/app/demos/landing-header-demo/landing-header-demo.component.ts

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LandingHeaderComponent, CTAButton, LandingHeaderConfig, NavigationItem } from 'ui-landing-pages';
import { ButtonComponent, VStackComponent, SectionComponent } from 'ui-essentials';

@Component({
  selector: 'app-landing-header-demo',
  standalone: true,
  imports: [CommonModule, LandingHeaderComponent, ButtonComponent, VStackComponent, SectionComponent],
  template: `
    <ui-vstack [spacing]="'xl'">
      <ui-section>
        <h2>Landing Header - Light Theme</h2>
        <p>Sticky navigation header with transparent background that becomes solid on scroll.</p>
        
        <ui-lp-header
          [configuration]="lightHeaderConfig()"
          (navigationClicked)="onNavigationClicked($event)"
          (ctaClicked)="onCTAClicked($event)">
        </ui-lp-header>
      </ui-section>
      
      <ui-section>
        <h2>Landing Header - Dark Theme</h2>
        <p>Dark theme version with logo and mega menu navigation.</p>
        
        <ui-lp-header
          [configuration]="darkHeaderConfig()"
          (navigationClicked)="onNavigationClicked($event)"
          (ctaClicked)="onCTAClicked($event)">
        </ui-lp-header>
      </ui-section>
      
      <ui-section>
        <h2>Landing Header - With Dropdown Menu</h2>
        <p>Header with dropdown navigation and badges.</p>
        
        <ui-lp-header
          [configuration]="dropdownHeaderConfig()"
          (navigationClicked)="onNavigationClicked($event)"
          (ctaClicked)="onCTAClicked($event)">
        </ui-lp-header>
      </ui-section>
      
      <ui-section>
        <h2>Configuration Options</h2>
        <div class="demo-controls">
          <ui-button
            [variant]="'outlined'"
            (clicked)="toggleTransparent()"
            class="demo-control">
            Toggle Transparent: {{ lightHeaderConfig().transparent ? 'ON' : 'OFF' }}
          </ui-button>
          
          <ui-button
            [variant]="'outlined'"
            (clicked)="toggleSticky()"
            class="demo-control">
            Toggle Sticky: {{ lightHeaderConfig().sticky ? 'ON' : 'OFF' }}
          </ui-button>
          
          <ui-button
            [variant]="'outlined'"
            (clicked)="toggleMobileMenu()"
            class="demo-control">
            Toggle Mobile Menu: {{ lightHeaderConfig().showMobileMenu ? 'ON' : 'OFF' }}
          </ui-button>
        </div>
      </ui-section>
      
      <!-- Content to demonstrate scroll behavior -->
      <ui-section>
        <h3>Scroll Content</h3>
        <div style="height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
          Scroll to see header behavior
        </div>
      </ui-section>
      
      <ui-section>
        <h3>More Content</h3>
        <div style="height: 100vh; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
          Keep scrolling...
        </div>
      </ui-section>
    </ui-vstack>
  `,
  styles: [`
    .demo-controls {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
    
    .demo-control {
      min-width: 200px;
    }
    
    :host {
      display: block;
      padding-bottom: 2rem;
    }
  `]
})
export class LandingHeaderDemoComponent {
  lightHeaderConfig = signal<LandingHeaderConfig>({
    logo: {
      text: 'UI Suite',
      url: '/'
    },
    navigation: [
      {
        id: 'home',
        label: 'Home',
        route: '/',
      },
      {
        id: 'features',
        label: 'Features',
        route: '/features',
      },
      {
        id: 'pricing',
        label: 'Pricing',
        route: '/pricing',
      },
      {
        id: 'about',
        label: 'About',
        route: '/about',
      },
      {
        id: 'contact',
        label: 'Contact',
        route: '/contact',
      }
    ],
    ctaButton: {
      text: 'Get Started',
      variant: 'filled',
      size: 'medium',
      action: () => alert('CTA clicked!')
    },
    transparent: true,
    sticky: true,
    showMobileMenu: true,
    maxWidth: 'xl',
    theme: 'light'
  });
  
  darkHeaderConfig = signal<LandingHeaderConfig>({
    logo: {
      text: 'Dark UI',
      url: '/'
    },
    navigation: [
      {
        id: 'products',
        label: 'Products',
        route: '/products',
      },
      {
        id: 'solutions',
        label: 'Solutions',
        route: '/solutions',
      },
      {
        id: 'resources',
        label: 'Resources',
        route: '/resources',
      },
      {
        id: 'company',
        label: 'Company',
        route: '/company',
      }
    ],
    ctaButton: {
      text: 'Start Free Trial',
      variant: 'filled',
      size: 'medium',
      icon: '🚀',
      action: () => alert('Free trial started!')
    },
    transparent: false,
    sticky: true,
    showMobileMenu: true,
    maxWidth: 'xl',
    theme: 'dark'
  });
  
  dropdownHeaderConfig = signal<LandingHeaderConfig>({
    logo: {
      text: 'Dropdown Demo',
      url: '/'
    },
    navigation: [
      {
        id: 'home',
        label: 'Home',
        route: '/',
      },
      {
        id: 'products',
        label: 'Products',
        children: [
          {
            id: 'ui-kit',
            label: 'UI Kit',
            route: '/products/ui-kit',
            badge: 'New'
          },
          {
            id: 'components',
            label: 'Components',
            route: '/products/components',
          },
          {
            id: 'templates',
            label: 'Templates',
            route: '/products/templates',
            badge: 'Pro'
          }
        ]
      },
      {
        id: 'docs',
        label: 'Documentation',
        children: [
          {
            id: 'getting-started',
            label: 'Getting Started',
            route: '/docs/getting-started',
          },
          {
            id: 'api',
            label: 'API Reference',
            route: '/docs/api',
          },
          {
            id: 'examples',
            label: 'Examples',
            route: '/docs/examples',
          }
        ]
      },
      {
        id: 'support',
        label: 'Support',
        route: '/support',
        badge: '24/7'
      }
    ],
    ctaButton: {
      text: 'Contact Sales',
      variant: 'tonal',
      size: 'medium',
      action: () => alert('Contact sales clicked!')
    },
    transparent: false,
    sticky: true,
    showMobileMenu: true,
    maxWidth: 'xl',
    theme: 'light'
  });
  
  toggleTransparent(): void {
    const current = this.lightHeaderConfig();
    this.lightHeaderConfig.set({
      ...current,
      transparent: !current.transparent
    });
  }
  
  toggleSticky(): void {
    const current = this.lightHeaderConfig();
    this.lightHeaderConfig.set({
      ...current,
      sticky: !current.sticky
    });
  }
  
  toggleMobileMenu(): void {
    const current = this.lightHeaderConfig();
    this.lightHeaderConfig.set({
      ...current,
      showMobileMenu: !current.showMobileMenu
    });
  }
  
  onNavigationClicked(item: NavigationItem): void {
    console.log('Navigation clicked:', item);
  }
  
  onCTAClicked(cta: CTAButton): void {
    console.log('CTA clicked:', cta);
  }
}