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

export const mainpage = () => html`
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #111;
    }
    .demo-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .demo-section {
      background: #1a1a1a;
      border: 1px solid #333;
      padding: 48px;
      max-width: 600px;
      width: 100%;
    }
    h1 {
      margin: 0 0 16px 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 28px;
      color: #fff;
    }
    p {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      color: #999;
    }
  </style>
  <div class="demo-container">
    <div class="demo-section">
      <h1>Stack.Gallery Catalog</h1>
      <p>Component catalog for the Stack.Gallery Registry UI. Use <code>tswatch</code> to start the development server.</p>
    </div>
  </div>
`;