import type { Section } from "@/types/builder";
import { generateId } from "@/store/builder-store";

export const appHero: Section = {
  id: `section-${generateId("section")}`,
  type: "regular",
  rows: [
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}-1`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-1`,
              type: "heading",
              content: "Your Crypto Trading, Simplified",
              settings: {
                fontSize: 60,
                fontWeight: "bold",
                textAlign: "left",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 24,
                marginLeft: 0,
                color: { light: "zinc-900", dark: "white" },
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content:
                "The all-in-one crypto trading app that brings together portfolio tracking, market analysis, and automated trading. Download now and join 2M+ users who've transformed their trading success.",
              settings: {
                fontSize: 20,
                textAlign: "left",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 40,
                marginLeft: 0,
                color: { light: "zinc-600", dark: "zinc-300" },
                lineHeight: 1.6,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "image",
              content: "",
              settings: {
                src: "/placeholder.svg?height=60&width=180&text=App+Store",
                alt: "Download on App Store",
                width: "180px",
                height: "auto",
                marginTop: 0,
                marginRight: 16,
                marginBottom: 16,
                marginLeft: 0,
                display: "inline-block",
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "image",
              content: "",
              settings: {
                src: "/placeholder.svg?height=60&width=180&text=Google+Play",
                alt: "Get it on Google Play",
                width: "180px",
                height: "auto",
                marginTop: 0,
                marginRight: 0,
                marginBottom: 16,
                marginLeft: 0,
                display: "inline-block",
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content:
                "⭐ 4.9/5 stars  •  📱 2M+ downloads  •  💰 Free with premium trading features",
              settings: {
                fontSize: 16,
                textAlign: "left",
                paddingTop: 24,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 32,
                marginLeft: 0,
                color: { light: "zinc-500", dark: "zinc-400" },
                lineHeight: 1.5,
              },
            },
          ],
          settings: {
            paddingTop: 80,
            paddingRight: 40,
            paddingBottom: 80,
            paddingLeft: 0,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}-2`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-6`,
              type: "image",
              content: "",
              settings: {
                src: "/placeholder.svg?height=600&width=300&text=Phone+Mockup",
                alt: "App Screenshot",
                width: "100%",
                height: "500px",
                maxWidth: "300px",
                objectFit: "cover",
                marginTop: 0,
                marginRight: "auto",
                marginBottom: 0,
                marginLeft: "auto",
              },
            },
          ],
          settings: {
            paddingTop: 80,
            paddingRight: 0,
            paddingBottom: 80,
            paddingLeft: 40,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        maxWidth: "1200px",
        paddingTop: 0,
        paddingRight: 40,
        paddingBottom: 0,
        paddingLeft: 40,
        marginLeft: "auto",
        marginRight: "auto",
      },
      nestingLevel: 1,
    },
  ],
  settings: {
    backgroundColor: { light: "zinc-50", dark: "zinc-900" },
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    minHeight: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  name: "App Hero",
  description:
    "Mobile app hero section with app store badges and device mockups",
  category: "hero",
  snapshots: {
    card: "",
    preview: "",
  },
};
