import { html } from '@design.estate/dees-element';
import { injectCssVariables } from '../../00variables.js';

export const demoFunc = () => {
  injectCssVariables();
  return html`
  <style>
    .demo-section {
      margin-bottom: 2rem;
    }
    .demo-section h3 {
      margin: 0 0 1rem 0;
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .layout-container {
      border: 1px solid var(--dees-border);
      border-radius: var(--dees-radius);
      overflow: hidden;
      height: 400px;
    }
    .demo-content {
      padding: 1rem;
    }
    .demo-card {
      background: var(--dees-card);
      border: 1px solid var(--dees-border);
      border-radius: var(--dees-radius);
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .demo-note {
      font-size: 0.875rem;
      color: var(--dees-muted-foreground);
      margin-top: 0.5rem;
    }
  </style>

  <div class="demo-section">
    <h3>App Layout with Navigation</h3>
    <div class="layout-container">
      <dees-mobile-applayout>
        <dees-mobile-header title="My App">
          <dees-mobile-button slot="actions" icon variant="ghost">
            <dees-mobile-icon icon="bell" size="20"></dees-mobile-icon>
          </dees-mobile-button>
        </dees-mobile-header>

        <div class="demo-content">
          <div class="demo-card">
            <h4 style="margin: 0 0 0.5rem 0;">Welcome</h4>
            <p style="margin: 0; color: var(--dees-muted-foreground);">
              This is a demo of the app layout component with header and bottom navigation.
            </p>
          </div>
          <div class="demo-card">
            <h4 style="margin: 0 0 0.5rem 0;">Features</h4>
            <ul style="margin: 0; padding-left: 1.25rem; color: var(--dees-muted-foreground);">
              <li>iOS keyboard handling</li>
              <li>View transitions</li>
              <li>Safe area support</li>
            </ul>
          </div>
        </div>

        <dees-mobile-navigation
          slot="navigation"
          activeTab="home"
          .tabs=${[
            { id: 'home', icon: 'home', label: 'Home' },
            { id: 'explore', icon: 'compass', label: 'Explore' },
            { id: 'settings', icon: 'settings', label: 'Settings' }
          ]}
        ></dees-mobile-navigation>
      </dees-mobile-applayout>
    </div>
    <p class="demo-note">
      The app layout provides a grid structure with content area and bottom navigation.
      It automatically hides navigation when keyboard is visible on mobile.
    </p>
  </div>
`;
};