<div class="demo-header">
    <h1>My App</h1>
    <firebase-loginheader
      id="header"
      show-name
      show-menu
    ></firebase-loginheader>
  </div>

  <div class="container">
    <div class="demo-section">
      <h2>Basic Login Header</h2>
      <p>The header above shows the login button when not authenticated, and user info with menu when authenticated.</p>
      <div class="output" id="output">Auth state will appear here...</div>
    </div>

    <div class="demo-section">
      <h2>With Email Display</h2>
      <firebase-loginheader
        id="with-email"
        show-name
        show-email
        show-menu
      ></firebase-loginheader>
    </div>

    <div class="demo-section">
      <h2>Minimal (Avatar Only)</h2>
      <firebase-loginheader
        id="minimal"
        show-menu
      ></firebase-loginheader>
    </div>

    <div class="demo-section">
      <h2>Custom Styled</h2>
      <firebase-loginheader
        id="custom"
        show-name
        show-menu
        login-text="Get Started"
        logout-text="Log Out"
        style="
          --firebase-loginheader-btn-bg: #10b981;
          --firebase-loginheader-btn-hover-bg: #059669;
          --firebase-loginheader-avatar-size: 42px;
        "
      ></firebase-loginheader>
    </div>

    <div class="demo-section">
      <h2>With Custom Menu Items</h2>
      <firebase-loginheader
        id="with-menu"
        show-name
        show-menu
      ></firebase-loginheader>
      <div class="output" id="menu-output">Click a menu item...</div>
    </div>
  </div>

:root {
  --bg: #0c0f14;
  --bg-elevated: #141923;
  --bg-panel: #171d28;
  --border: #262f3f;
  --text: #f4f6fb;
  --text-muted: #a7b0c2;
  --text-dim: #7d879b;
  --accent: #ff8a3d;
  --accent-strong: #ff6a00;
  --accent-soft: rgba(255, 138, 61, 0.16);
  --shadow: 0 20px 50px rgba(5, 8, 14, 0.45);
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --max-width: 1160px;
}

.demo-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background: var(--bg-elevated);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .demo-header h1 {
      margin: 0;
      font-size: 1.5rem;
      color: var(--accent);
    }
    .container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }
    .demo-section {
      background: var(--bg-elevated);
      padding: 2rem;
      border-radius: 8px;
      margin-bottom: 2rem;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .demo-section h2 {
      margin-top: 0;
      color: #555;
    }
    .output {
      margin-top: 1rem;
      padding: 1rem;
      background: #f8f9fa;
      border-radius: 4px;
      font-family: monospace;
      font-size: 0.875rem;
    }

import "https://esm.sh/@manufosela/firebase-loginheader";

    const header = document.getElementById('header');
    const output = document.getElementById('output');

    // Auth state changes
    header.addEventListener('auth-state-changed', (e) => {
      const { user, isAuthenticated } = e.detail;
      output.textContent = isAuthenticated
        ? `Authenticated as: ${user.displayName || user.email}`
        : 'Not authenticated';
    });

    header.addEventListener('login-click', () => {
      output.textContent = 'Login clicked - show your login UI here';
    });

    header.addEventListener('logout', () => {
      output.textContent = 'User logged out';
    });

    // Menu items example
    const withMenu = document.getElementById('with-menu');
    const menuOutput = document.getElementById('menu-output');

    withMenu.menuItems = [
      { label: 'Profile', action: 'profile', icon: '👤' },
      { label: 'Settings', action: 'settings', icon: '⚙️' },
      { label: 'Help', action: 'help', icon: '❓' }
    ];

    withMenu.addEventListener('menu-item-click', (e) => {
      menuOutput.textContent = `Menu item clicked: ${e.detail.action}`;
    });