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

export const LandingPage = () => html`
  <idp-landing-page></idp-landing-page>
`;

export const AdminConsole = () => html`
  <div style="box-sizing: border-box; min-height: 100vh; padding: 32px; background: #f4f4f2; font-family: Geist, system-ui, sans-serif;">
    <idp-admin-shell></idp-admin-shell>
  </div>
`;

export const MobileShowcase = () => html`
  <idp-mobile-showcase></idp-mobile-showcase>
`;

export const ComposedViews = () => html`
  <div style="display: grid; gap: 48px; background: #0a0a0a;">
    <idp-landing-page></idp-landing-page>
    <div style="padding: 48px; background: #f4f4f2;">
      <idp-admin-shell></idp-admin-shell>
    </div>
    <idp-mobile-showcase></idp-mobile-showcase>
  </div>
`;