<div class="demo-container">
  <h1>UI Font Manager Demo</h1>
  <p class="demo-description">
    Dynamically load Google Fonts and switch between font themes with smooth transitions. 
    Select a font preset to apply it globally to the entire application.
  </p>

  <!-- Font Preset Selection -->
  <section class="demo-section">
    <h2>Font Preset Selection</h2>
    <p class="preset-description">
      Choose from curated font combinations. The selected preset will be applied to the entire application.
    </p>
    
    <div class="preset-controls">
      <div class="preset-selector">
        <label for="preset-select">Choose Font Preset:</label>
        <select 
          id="preset-select" 
          [value]="selectedPreset" 
          (change)="onPresetChange($event)">
          <option value="">Select a preset...</option>
          <option *ngFor="let preset of fontPresets" [value]="preset.key">
            {{preset.name}} - {{preset.description}}
          </option>
        </select>
      </div>
      
      <div class="transition-selector" *ngIf="selectedPreset">
        <label for="transition-select">Transition Effect:</label>
        <select id="transition-select" [(ngModel)]="selectedTransition">
          <option value="fade">Fade</option>
          <option value="scale">Scale</option>
          <option value="typewriter">Typewriter</option>
        </select>
        <button 
          class="apply-btn"
          (click)="applyPresetWithTransition()">
          Apply with {{selectedTransition | titlecase}} Effect
        </button>
      </div>
    </div>

    <!-- Current Preset Display -->
    <div class="current-preset" *ngIf="currentPreset">
      <h4>Currently Applied: {{currentPreset.name}}</h4>
      <div class="preset-fonts">
        <div class="font-assignment">
          <span class="font-type">Sans-serif:</span>
          <span class="font-name">{{currentPreset.fonts.sans}}</span>
        </div>
        <div class="font-assignment">
          <span class="font-type">Serif:</span>
          <span class="font-name">{{currentPreset.fonts.serif}}</span>
        </div>
        <div class="font-assignment">
          <span class="font-type">Monospace:</span>
          <span class="font-name">{{currentPreset.fonts.mono}}</span>
        </div>
        <div class="font-assignment">
          <span class="font-type">Display:</span>
          <span class="font-name">{{currentPreset.fonts.display}}</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Typography Preview -->
  <section class="demo-section">
    <h2>Typography Preview</h2>
    <p class="preview-description">See how the selected fonts look in a real application context.</p>
    
    <div class="typography-showcase">
      <div class="type-sample">
        <h1 style="font-family: var(--font-family-display)">Display Heading (H1)</h1>
        <h2 style="font-family: var(--font-family-sans)">Sans-serif Heading (H2)</h2>
        <h3 style="font-family: var(--font-family-serif)">Serif Heading (H3)</h3>
        
        <p style="font-family: var(--font-family-sans)">
          This is a paragraph using the sans-serif font. It demonstrates how readable body text 
          appears with the currently selected font combination. Lorem ipsum dolor sit amet, 
          consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        
        <blockquote style="font-family: var(--font-family-serif)">
          "This is a quote using the serif font, which often provides better readability 
          for longer text passages and adds elegance to quoted content."
        </blockquote>
        
        <pre><code style="font-family: var(--font-family-mono)">// Code example with monospace font
function applyFontTheme(theme) {
  document.documentElement.style.setProperty('--font-family-sans', theme.sans);
  document.documentElement.style.setProperty('--font-family-serif', theme.serif);
  document.documentElement.style.setProperty('--font-family-mono', theme.mono);
}</code></pre>

        <div class="font-info">
          Current fonts: Sans (var(--font-family-sans)) | Serif (var(--font-family-serif)) | 
          Mono (var(--font-family-mono)) | Display (var(--font-family-display))
        </div>
      </div>
    </div>
  </section>

  <!-- Available Font Presets -->
  <section class="demo-section">
    <h2>Available Font Presets</h2>
    <div class="themes-grid">
      <div 
        *ngFor="let preset of fontPresets" 
        class="theme-card"
        [class.active]="preset.key === selectedPreset">
        
        <h4>{{preset.name}}</h4>
        <p class="theme-description">{{preset.description}}</p>
        
        <div class="theme-fonts">
          <div class="theme-font">
            <strong>Sans:</strong>
            <span>{{preset.fonts.sans}}</span>
          </div>
          <div class="theme-font">
            <strong>Serif:</strong>
            <span>{{preset.fonts.serif}}</span>
          </div>
          <div class="theme-font">
            <strong>Mono:</strong>
            <span>{{preset.fonts.mono}}</span>
          </div>
          <div class="theme-font">
            <strong>Display:</strong>
            <span>{{preset.fonts.display}}</span>
          </div>
        </div>
        
        <button 
          class="apply-theme-btn"
          (click)="applyPreset(preset.key)">
          Apply {{preset.name}}
        </button>
      </div>
    </div>
  </section>

  <!-- Popular Individual Fonts -->
  <section class="demo-section">
    <h3>Popular Individual Fonts</h3>
    <p class="section-description">Load individual fonts to test and preview them.</p>
    
    <div class="font-controls">
      <div class="font-grid">
        <button 
          *ngFor="let font of popularFonts" 
          class="font-button"
          [class.loaded]="isLoaded(font)"
          (click)="loadSingleFont(font)">
          
          {{font}}
          <span class="load-status" *ngIf="isLoaded(font)">✓</span>
        </button>
      </div>
    </div>
  </section>

  <!-- Event Log -->
  <section class="demo-section" *ngIf="eventLog.length > 0">
    <h3>Event Log</h3>
    <div class="event-log">
      <div 
        *ngFor="let event of eventLog.slice(-10)" 
        class="event-item"
        [class]="event.type">
        <span class="event-time">{{event.time}}</span>
        <span class="event-message">{{event.message}}</span>
      </div>
    </div>
  </section>
</div>