import { html, css, cssManager } from '@design.estate/dees-element';

export const demoFunc = () => html`
  <style>
    ${css`
      .demo-background {
        padding: 24px;
        background: ${cssManager.bdTheme('#f0f0f0', '#0a0a0a')};
        min-height: 100vh;
      }
      
      .demo-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      
      .grid-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      
      @media (max-width: 768px) {
        .grid-layout {
          grid-template-columns: 1fr;
        }
      }
    `}
  </style>
  
  <div class="demo-background">
    <div class="demo-container">
      <dees-panel .title=${'Panel Component'}>
        <p>The panel component automatically follows the theme and provides consistent styling for grouped content.</p>
        <p>It's perfect for creating sections in your application with proper spacing and borders.</p>
      </dees-panel>
      
      <dees-panel .title=${'Panel with Subtitle'} .subtitle=${'Additional context information'}>
        <p>Panels can have both a title and subtitle to provide more context.</p>
        <p>The subtitle appears in a smaller, muted text below the title.</p>
      </dees-panel>
      
      <div class="grid-layout">
        <dees-panel .title=${'Feature 1'}>
          <p>Grid layouts work great with panels for creating dashboards and feature sections.</p>
          <dees-button>Action</dees-button>
        </dees-panel>
        
        <dees-panel .title=${'Feature 2'}>
          <p>Each panel maintains consistent spacing and styling.</p>
          <dees-button>Another Action</dees-button>
        </dees-panel>
      </div>
      
      <dees-panel .title=${'Complex Content'}>
        <h4>Nested Elements</h4>
        <p>Panels can contain any type of content:</p>
        <ul>
          <li>Text and paragraphs</li>
          <li>Lists and tables</li>
          <li>Form inputs</li>
          <li>Other components</li>
        </ul>
        
        <dees-input-text .label=${'Example Input'} .description=${'Input inside a panel'}></dees-input-text>
        
        <div style="margin-top: 16px;">
          <dees-button>Submit</dees-button>
        </div>
      </dees-panel>
      
      <dees-panel>
        <p>Panels work great even without a title for simple content grouping.</p>
        <p>They provide visual separation and consistent padding.</p>
      </dees-panel>
    </div>
  </div>
`;