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

export const mainpage = () => html`
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f5f5f5;
    }
    .demo-container {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    .demo-section {
      background: white;
      border-radius: 12px;
      padding: 48px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      max-width: 600px;
      width: 100%;
    }
    h1 {
      margin: 0 0 32px 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-size: 28px;
      color: #1a1a1a;
    }
    .component-demo {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  </style>
  <div class="demo-container">
    <div class="demo-section">
      <h1>Serve.Zone Catalog</h1>
      <div class="component-demo">
        <sz-hello></sz-hello>
        <sz-hello text="Welcome to Serve.Zone!"></sz-hello>
      </div>
    </div>
  </div>
`;