export default {
  title: "DSS/Welcome",
  tags: ["autodocs"],
};

export const GettingStarted = {
  render: () => {
    const div = document.createElement("div");
    div.innerHTML = `
      <div style="font-family: system-ui; padding: 2rem; max-width: 700px;">
        <h1 style="color: #1a1a2e; margin-bottom: 1rem;">Design System Swarm</h1>
        <p style="color: #666; font-size: 1.1rem; line-height: 1.6;">
          Welcome to DSS Storybook. This is your interactive component library.
        </p>

        <div style="background: #f8f9fa; border-radius: 8px; padding: 1.5rem; margin: 1.5rem 0;">
          <h2 style="color: #1a1a2e; font-size: 1.2rem; margin-bottom: 1rem;">Getting Started</h2>
          <ol style="color: #444; line-height: 2;">
            <li>Go to the <strong>Admin UI</strong> to configure your design system</li>
            <li>Import components from Figma or your component library</li>
            <li>Click <strong>"Initialize Storybook"</strong> to generate component stories</li>
            <li>Browse your components in the sidebar</li>
          </ol>
        </div>

        <div style="background: #e8f4fd; border-left: 4px solid #0066cc; padding: 1rem; margin: 1.5rem 0;">
          <strong style="color: #0066cc;">No components loaded yet</strong>
          <p style="color: #444; margin: 0.5rem 0 0 0;">
            Initialize your design system from the Admin UI to populate this Storybook.
          </p>
        </div>

        <p style="color: #888; font-size: 0.9rem; margin-top: 2rem;">
          DSS v1.0.0 | <a href="/admin-ui/" style="color: #0066cc;">Open Admin UI</a>
        </p>
      </div>
    `;
    return div;
  },
};