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

export const saasHero: Section = {
  id: `section-${generateId("section")}`,
  type: "regular",
  rows: [
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}-1`,
          width: 60,
          elements: [
            {
              id: `element-${generateId("element")}-1`,
              type: "heading",
              content: "Master Crypto Trading with Advanced Analytics",
              settings: {
                fontSize: 64,
                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.025em",
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content:
                "Transform market data into profitable trades. Our platform helps 15,000+ crypto traders make data-driven decisions with 40% higher success rates.",
              settings: {
                fontSize: 20,
                textAlign: "left",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 32,
                marginLeft: 0,
                color: { light: "zinc-600", dark: "zinc-300" },
                lineHeight: 1.6,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "button",
              content: "Start Trading Free",
              settings: {
                backgroundColor: "#2563eb",
                hoverBackgroundColor: "#1d4ed8",
                color: "#ffffff",
                hoverColor: "#ffffff",
                fontSize: 20,
                fontWeight: "700",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 40,
                paddingBottom: 20,
                paddingLeft: 40,
                marginTop: 0,
                marginRight: 12,
                marginBottom: 20,
                marginLeft: 0,
                borderRadius: 12,
                boxShadow: "0 12px 48px rgba(37, 99, 235, 0.4)",
                minWidth: "220px",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 1,
                animationEasing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                animationFillMode: "forwards",
                transitionProperty: "all",
                transitionDuration: 0.3,
                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
                hoverEffect: "elevate",
                hoverEffectIntensity: 2,
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "button",
              content: "View Trading Tools",
              settings: {
                backgroundColor: "transparent",
                borderColor: { light: "#d4d4d8", dark: "#52525b" },
                borderWidth: 2,
                borderStyle: "solid",
                hoverBackgroundColor: { light: "#f4f4f5", dark: "#27272a" },
                hoverBorderColor: { light: "#a1a1aa", dark: "#71717a" },
                color: { light: "#3f3f46", dark: "#d4d4d8" },
                hoverColor: { light: "#18181b", dark: "#ffffff" },
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 40,
                paddingBottom: 20,
                paddingLeft: 40,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 20,
                marginLeft: 12,
                borderRadius: 12,
                minWidth: "200px",
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.8,
                animationDelay: 1.2,
                animationEasing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
                animationFillMode: "forwards",
                transitionProperty: "all",
                transitionDuration: 0.3,
                transitionTimingFunction: "ease-out",
                hoverEffect: "glow",
                hoverEffectIntensity: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content:
                "✓ $0 trading fees first month  ✓ No minimum deposit  ✓ Start trading in 5 minutes",
              settings: {
                fontSize: 16,
                textAlign: "left",
                paddingTop: 32,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
                color: { light: "zinc-500", dark: "zinc-400" },
                lineHeight: 1.5,
              },
            },
          ],
          settings: {
            paddingTop: 80,
            paddingRight: 24,
            paddingBottom: 80,
            paddingLeft: 24,
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}-2`,
          width: 40,
          elements: [
            {
              id: `element-${generateId("element")}-6`,
              type: "image",
              content: "",
              settings: {
                src: "/placeholder.svg?height=500&width=600&text=Dashboard+Preview",
                alt: "Analytics Dashboard Preview",
                width: "100%",
                height: "400px",
                objectFit: "cover",
                borderRadius: 16,
                boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
              },
            },
          ],
          settings: {
            paddingTop: 80,
            paddingRight: 24,
            paddingBottom: 80,
            paddingLeft: 24,
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        paddingTop: 0,
        paddingRight: 16,
        paddingBottom: 0,
        paddingLeft: 16,
      },
      nestingLevel: 1,
    },
  ],
  settings: {
    backgroundColor: { light: "white", dark: "zinc-900" },
    paddingTop: 40,
    paddingRight: 16,
    paddingBottom: 40,
    paddingLeft: 16,
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    minHeight: "600px",
  },
  name: "SaaS Hero",
  description:
    "Professional SaaS hero section with split layout featuring compelling copy and dashboard preview",
  category: "hero",
  snapshots: {
    card: "",
    preview: "",
  },
};
