{
  "$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
  "schemaVersion": "2.0.0",
  "package": "ui_home",
  "description": "Home page components including hero, features, about, and contact sections",
  "components": [
    {
      "id": "home_page",
      "name": "HomePage",
      "description": "Main home page layout with all sections",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Box",
          "component": "main",
          "className": "home-page",
          "sx": {
            "minHeight": "100vh",
            "background": "linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05) 0%, transparent 50%, rgba(var(--color-accent-rgb), 0.05) 100%)"
          },
          "children": [
            { "$ref": "hero_section" },
            { "$ref": "features_section" },
            { "$ref": "about_section" },
            { "$ref": "contact_section" }
          ]
        }
      }
    },
    {
      "id": "hero_section",
      "name": "HeroSection",
      "description": "Hero section with title, subtitle, and call-to-action buttons",
      "props": [
        {
          "name": "title",
          "type": "string",
          "required": false,
          "default": "Build Anything, Visually"
        },
        {
          "name": "subtitle",
          "type": "string",
          "required": false,
          "default": "A 6-level meta-architecture for creating entire applications through visual workflows, schema editors, and embedded scripting. No code required."
        }
      ],
      "render": {
        "type": "element",
        "template": {
          "type": "Box",
          "component": "section",
          "className": "hero-section",
          "sx": {
            "py": { "xs": 8, "md": 12 },
            "px": { "xs": 2, "md": 4 }
          },
          "children": [
            {
              "type": "Container",
              "maxWidth": "lg",
              "className": "hero-container",
              "children": [
                {
                  "type": "Stack",
                  "spacing": 3,
                  "alignItems": "center",
                  "className": "hero-content",
                  "sx": { "textAlign": "center" },
                  "children": [
                    {
                      "type": "Text",
                      "variant": "h1",
                      "className": "hero-title",
                      "children": "{{title}}",
                      "sx": {
                        "fontWeight": 700,
                        "fontSize": { "xs": "2.5rem", "sm": "3.5rem", "md": "4rem" },
                        "lineHeight": 1.1,
                        "background": "linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%)",
                        "backgroundClip": "text",
                        "WebkitBackgroundClip": "text",
                        "WebkitTextFillColor": "transparent",
                        "color": "transparent"
                      }
                    },
                    {
                      "type": "Text",
                      "variant": "h5",
                      "className": "hero-subtitle",
                      "children": "{{subtitle}}",
                      "sx": {
                        "color": "text.secondary",
                        "fontWeight": 400,
                        "maxWidth": "600px",
                        "fontSize": { "xs": "1rem", "md": "1.25rem" },
                        "lineHeight": 1.6
                      }
                    },
                    {
                      "type": "Stack",
                      "direction": { "xs": "column", "sm": "row" },
                      "spacing": 2,
                      "className": "hero-cta-group",
                      "sx": { "mt": 2, "flexWrap": "wrap", "justifyContent": "center" },
                      "children": [
                        {
                          "type": "Button",
                          "variant": "contained",
                          "color": "primary",
                          "size": "large",
                          "children": "Get Started",
                          "className": "hero-cta-primary",
                          "onClick": "{{onNavigate(2)}}",
                          "sx": {
                            "px": 4,
                            "py": 1.5,
                            "fontSize": "1rem",
                            "fontWeight": 600,
                            "borderRadius": 2
                          }
                        },
                        {
                          "type": "Button",
                          "variant": "outlined",
                          "color": "primary",
                          "size": "large",
                          "children": "Watch Demo",
                          "className": "hero-cta-secondary",
                          "sx": {
                            "px": 4,
                            "py": 1.5,
                            "fontSize": "1rem",
                            "fontWeight": 600,
                            "borderRadius": 2
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "features_section",
      "name": "FeaturesSection",
      "description": "Features grid showcasing the 6 levels of MetaBuilder",
      "props": [
        {
          "name": "title",
          "type": "string",
          "required": false,
          "default": "Six Levels of Power"
        }
      ],
      "render": {
        "type": "element",
        "template": {
          "type": "Box",
          "component": "section",
          "id": "features",
          "className": "features-section",
          "sx": {
            "py": { "xs": 6, "md": 10 },
            "px": { "xs": 2, "md": 4 }
          },
          "children": [
            {
              "type": "Container",
              "maxWidth": "lg",
              "className": "features-container",
              "children": [
                {
                  "type": "Text",
                  "variant": "h2",
                  "children": "{{title}}",
                  "className": "features-header",
                  "sx": { "fontWeight": 700, "textAlign": "center", "mb": 6 }
                },
                {
                  "type": "Grid",
                  "container": true,
                  "spacing": 3,
                  "className": "features-grid",
                  "children": [
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_1" }] },
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_2" }] },
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_3" }] },
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_4" }] },
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_5" }] },
                    { "type": "Grid", "item": true, "xs": 12, "sm": 6, "lg": 4, "children": [{ "$ref": "feature_card_6" }] }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_1",
      "name": "FeatureCard1",
      "description": "Level 1 - Public Website feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level1",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "divider",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "1" }]
                },
                { "type": "Text", "variant": "h6", "children": "Public Website", "sx": { "fontWeight": 600 } },
                { "type": "Text", "variant": "body2", "children": "Beautiful landing pages with responsive design and hamburger menus", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "Perfect for marketing sites, portfolios, and public-facing content", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_2",
      "name": "FeatureCard2",
      "description": "Level 2 - User Area feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level2",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "divider",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "2" }]
                },
                { "type": "Text", "variant": "h6", "children": "User Area", "sx": { "fontWeight": 600 } },
                { "type": "Text", "variant": "body2", "children": "Authenticated dashboards with profiles and comment systems", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "User registration, profile management, and interactive features", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_3",
      "name": "FeatureCard3",
      "description": "Level 3 - Moderator Panel feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level3",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "divider",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #f97316 0%, #ea580c 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "3" }]
                },
                { "type": "Text", "variant": "h6", "children": "Moderator Panel", "sx": { "fontWeight": 600 } },
                { "type": "Text", "variant": "body2", "children": "Content moderation and user management tools", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "Review content, manage reports, and maintain community standards", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_4",
      "name": "FeatureCard4",
      "description": "Level 4 - Admin Panel feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level4",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "divider",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "4" }]
                },
                { "type": "Text", "variant": "h6", "children": "Admin Panel", "sx": { "fontWeight": 600 } },
                { "type": "Text", "variant": "body2", "children": "Django-style data management with CRUD operations and filters", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "Complete control over data models with list views and inline editing", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_5",
      "name": "FeatureCard5",
      "description": "Level 5 - God-Tier Builder feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level5",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "divider",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "primary.main", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #a855f7 0%, #9333ea 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "5" }]
                },
                { "type": "Text", "variant": "h6", "children": "God-Tier Builder", "sx": { "fontWeight": 600 } },
                { "type": "Text", "variant": "body2", "children": "Meta-builder with workflows, schemas, and automation scripting", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "Design and generate entire applications procedurally", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "feature_card_6",
      "name": "FeatureCard6",
      "description": "Level 6 - Super God Panel feature card",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Card",
          "className": "feature-card feature-card--level6",
          "sx": {
            "height": "100%",
            "border": 2,
            "borderColor": "warning.main",
            "background": "linear-gradient(135deg, rgba(251, 191, 36, 0.05) 0%, rgba(234, 179, 8, 0.05) 100%)",
            "transition": "border-color 0.2s ease-in-out, transform 0.2s ease-in-out",
            "&:hover": { "borderColor": "warning.dark", "transform": "translateY(-2px)" }
          },
          "children": [
            {
              "type": "CardHeader",
              "className": "feature-card-header",
              "children": [
                {
                  "type": "Box",
                  "className": "feature-icon",
                  "sx": {
                    "width": 48, "height": 48, "borderRadius": 2,
                    "background": "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
                    "display": "flex", "alignItems": "center", "justifyContent": "center",
                    "color": "white", "fontWeight": 700, "fontSize": "1.25rem", "mb": 2
                  },
                  "children": [{ "type": "Text", "children": "6" }]
                },
                {
                  "type": "Stack",
                  "direction": "row",
                  "spacing": 1,
                  "alignItems": "center",
                  "children": [
                    { "type": "Text", "variant": "h6", "children": "Super God Panel", "sx": { "fontWeight": 600 } },
                    {
                      "type": "Chip",
                      "label": "NEW",
                      "size": "small",
                      "sx": {
                        "bgcolor": "rgba(245, 158, 11, 0.2)",
                        "color": "warning.dark",
                        "fontWeight": 600,
                        "fontSize": "0.65rem"
                      }
                    }
                  ]
                },
                { "type": "Text", "variant": "body2", "children": "Multi-tenant control with power transfer and homepage management", "sx": { "color": "text.secondary", "mt": 1 } }
              ]
            },
            {
              "type": "CardContent",
              "className": "feature-card-content",
              "children": [
                { "type": "Text", "variant": "body2", "children": "Supreme administrator access for multi-tenant architecture", "sx": { "color": "text.secondary" } }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "about_section",
      "name": "AboutSection",
      "description": "About section with MetaBuilder description",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Box",
          "component": "section",
          "id": "about",
          "className": "about-section",
          "sx": {
            "py": { "xs": 6, "md": 10 },
            "px": { "xs": 2, "md": 4 },
            "bgcolor": "action.hover"
          },
          "children": [
            {
              "type": "Container",
              "maxWidth": "md",
              "className": "about-container",
              "children": [
                {
                  "type": "Stack",
                  "spacing": 3,
                  "alignItems": "center",
                  "className": "about-content",
                  "sx": { "textAlign": "center" },
                  "children": [
                    { "type": "Text", "variant": "h2", "children": "About MetaBuilder", "className": "about-title", "sx": { "fontWeight": 700 } },
                    {
                      "type": "Text",
                      "variant": "body1",
                      "children": "MetaBuilder is a revolutionary platform that lets you build entire application stacks through visual interfaces. From public websites to complex admin panels, everything is generated from declarative configurations, workflows, and embedded scripts.",
                      "className": "about-description",
                      "sx": { "color": "text.secondary", "fontSize": { "xs": "1rem", "md": "1.125rem" }, "lineHeight": 1.7 }
                    },
                    {
                      "type": "Text",
                      "variant": "body1",
                      "children": "Whether you're a designer who wants to create without code, or a developer who wants to work at a higher level of abstraction, MetaBuilder adapts to your needs.",
                      "className": "about-description",
                      "sx": { "color": "text.secondary", "fontSize": { "xs": "1rem", "md": "1.125rem" }, "lineHeight": 1.7 }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "contact_section",
      "name": "ContactSection",
      "description": "Contact section with form",
      "props": [],
      "render": {
        "type": "element",
        "template": {
          "type": "Box",
          "component": "section",
          "id": "contact",
          "className": "contact-section",
          "sx": {
            "py": { "xs": 6, "md": 10 },
            "px": { "xs": 2, "md": 4 }
          },
          "children": [
            {
              "type": "Container",
              "maxWidth": "sm",
              "className": "contact-container",
              "children": [
                {
                  "type": "Card",
                  "className": "contact-card",
                  "sx": { "p": { "xs": 3, "md": 4 } },
                  "children": [
                    {
                      "type": "Stack",
                      "spacing": 1,
                      "alignItems": "center",
                      "className": "contact-header",
                      "sx": { "textAlign": "center", "mb": 4 },
                      "children": [
                        { "type": "Text", "variant": "h4", "children": "Get in Touch", "className": "contact-title", "sx": { "fontWeight": 600 } },
                        { "type": "Text", "variant": "body2", "children": "Have questions? We'd love to hear from you.", "className": "contact-subtitle", "sx": { "color": "text.secondary" } }
                      ]
                    },
                    {
                      "type": "Stack",
                      "component": "form",
                      "spacing": 3,
                      "className": "contact-form",
                      "children": [
                        { "type": "TextField", "label": "Name", "placeholder": "Your name", "fullWidth": true, "variant": "outlined", "className": "contact-field contact-field--name" },
                        { "type": "TextField", "label": "Email", "placeholder": "your@email.com", "type": "email", "fullWidth": true, "variant": "outlined", "className": "contact-field contact-field--email" },
                        { "type": "TextField", "label": "Message", "placeholder": "Your message...", "fullWidth": true, "multiline": true, "rows": 4, "variant": "outlined", "className": "contact-field contact-field--message" },
                        { "type": "Button", "variant": "contained", "color": "primary", "fullWidth": true, "size": "large", "children": "Send Message", "className": "contact-submit", "sx": { "py": 1.5, "fontWeight": 600 } }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }
  ],
  "exports": {
    "components": [
      "HomePage",
      "HeroSection",
      "FeaturesSection",
      "FeatureCard1",
      "FeatureCard2",
      "FeatureCard3",
      "FeatureCard4",
      "FeatureCard5",
      "FeatureCard6",
      "AboutSection",
      "ContactSection"
    ]
  }
}