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

function generateId(prefix: string): string {
  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
}

export const tradingHero: Section = {
  id: "trading-hero",
  type: "regular",
  name: "Trading Hero",
  description: "Modern trading platform hero with real-time charts and CTAs",
  category: "hero",
  rows: [
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-1`,
              type: "heading",
              content: "Trade Smarter, Not Harder",
              settings: {
                fontSize: 56,
                fontWeight: "800",
                lineHeight: 1.1,
                marginBottom: 24,
                color: { light: "#0f172a", dark: "#f8fafc" },
                textAlign: "left",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.2,
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content: "Join millions of traders who trust our advanced platform. Trade cryptocurrencies, forex, and stocks with zero fees and lightning-fast execution.",
              settings: {
                fontSize: 20,
                lineHeight: 1.6,
                marginBottom: 40,
                color: { light: "#64748b", dark: "#94a3b8" },
                textAlign: "left",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.4,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "button",
              content: "Start Trading Now",
              settings: {
                backgroundColor: { light: "#3b82f6", dark: "#3b82f6" },
                hoverBackgroundColor: { light: "#2563eb", dark: "#2563eb" },
                color: { light: "#ffffff", dark: "#ffffff" },
                fontSize: 18,
                fontWeight: "600",
                paddingTop: 16,
                paddingRight: 32,
                paddingBottom: 16,
                paddingLeft: 32,
                marginRight: 16,
                marginBottom: 16,
                borderRadius: 12,
                boxShadow: "0 10px 25px -5px rgba(59, 130, 246, 0.3)",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.6,
                display: "inline-block",
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "button",
              content: "View Demo",
              settings: {
                backgroundColor: "transparent",
                borderColor: { light: "#e2e8f0", dark: "#475569" },
                borderWidth: 2,
                borderStyle: "solid",
                hoverBackgroundColor: { light: "#f8fafc", dark: "#1e293b" },
                color: { light: "#475569", dark: "#cbd5e1" },
                fontSize: 18,
                fontWeight: "600",
                paddingTop: 14,
                paddingRight: 32,
                paddingBottom: 14,
                paddingLeft: 32,
                borderRadius: 12,
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.8,
                display: "inline-block",
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content: "🔒 Secure & Regulated  •  ⚡ 0.01s Execution  •  📊 24/7 Support",
              settings: {
                fontSize: 16,
                marginTop: 40,
                color: { light: "#10b981", dark: "#34d399" },
                textAlign: "left",
                fontWeight: "500",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1,
                animationDelay: 1,
              },
            },
          ],
          settings: {
            paddingTop: 80,
            paddingRight: 40,
            paddingBottom: 80,
            paddingLeft: 0,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-6`,
              type: "image",
              settings: {
                src: "/placeholder.svg?height=600&width=800",
                alt: "Trading Dashboard",
                borderRadius: 20,
                boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 1,
                animationDelay: 0.4,
                width: "100%",
                height: "auto",
              },
            },
            {
              id: `element-${generateId("element")}-7`,
              type: "text",
              content: "📈 +247% Average Returns",
              settings: {
                fontSize: 18,
                fontWeight: "700",
                marginTop: 24,
                paddingTop: 16,
                paddingRight: 24,
                paddingBottom: 16,
                paddingLeft: 24,
                backgroundColor: { light: "#dcfce7", dark: "#14532d" },
                color: { light: "#166534", dark: "#4ade80" },
                borderRadius: 12,
                textAlign: "center",
                enableAnimation: true,
                animationType: "bounceIn",
                animationDuration: 0.8,
                animationDelay: 1.2,
                boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
              },
            },
          ],
          settings: {
            paddingTop: 40,
            paddingRight: 0,
            paddingBottom: 40,
            paddingLeft: 40,
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        maxWidth: "1200px",
        marginLeft: "auto",
        marginRight: "auto",
        minHeight: "600px",
      },
      nestingLevel: 1,
    },
  ],
  settings: {
    paddingTop: 0,
    paddingRight: 32,
    paddingBottom: 0,
    paddingLeft: 32,
    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    backgroundSize: "400% 400%",
    position: "relative",
    overflow: "hidden",
  },
}; 