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

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

export const cryptoHero: Section = {
  id: "crypto-hero",
  type: "fullwidth",
  name: "Crypto Hero",
  description: "Cryptocurrency trading hero with live market data",
  category: "hero",
  rows: [
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}`,
          width: 100,
          elements: [
            {
              id: `element-${generateId("element")}-1`,
              type: "heading",
              content: "The Future of Crypto Trading",
              settings: {
                fontSize: 72,
                fontWeight: "900",
                lineHeight: 1.1,
                marginBottom: 32,
                color: { light: "#ffffff", dark: "#ffffff" },
                textAlign: "center",
                textShadow: "0 4px 8px rgba(0,0,0,0.3)",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1.2,
                animationDelay: 0.3,
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content: "Trade Bitcoin, Ethereum, and 500+ cryptocurrencies with institutional-grade security and lightning-fast execution.",
              settings: {
                fontSize: 24,
                lineHeight: 1.5,
                marginBottom: 48,
                color: { light: "rgba(255,255,255,0.9)", dark: "rgba(255,255,255,0.9)" },
                textAlign: "center",
                maxWidth: "800px",
                marginLeft: "auto",
                marginRight: "auto",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 1,
                animationDelay: 0.6,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "button",
              content: "Start Trading Crypto",
              settings: {
                backgroundColor: { light: "#f59e0b", dark: "#f59e0b" },
                hoverBackgroundColor: { light: "#d97706", dark: "#d97706" },
                color: { light: "#000000", dark: "#000000" },
                fontSize: 20,
                fontWeight: "700",
                paddingTop: 20,
                paddingRight: 40,
                paddingBottom: 20,
                paddingLeft: 40,
                marginRight: 20,
                borderRadius: 16,
                boxShadow: "0 20px 40px -8px rgba(245, 158, 11, 0.4)",
                enableAnimation: true,
                animationType: "bounceIn",
                animationDuration: 0.8,
                animationDelay: 1,
                display: "inline-block",
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "button",
              content: "Learn More",
              settings: {
                backgroundColor: "transparent",
                borderColor: { light: "#ffffff", dark: "#ffffff" },
                borderWidth: 2,
                borderStyle: "solid",
                hoverBackgroundColor: { light: "rgba(255,255,255,0.1)", dark: "rgba(255,255,255,0.1)" },
                color: { light: "#ffffff", dark: "#ffffff" },
                fontSize: 20,
                fontWeight: "600",
                paddingTop: 18,
                paddingRight: 40,
                paddingBottom: 18,
                paddingLeft: 40,
                borderRadius: 16,
                enableAnimation: true,
                animationType: "bounceIn",
                animationDuration: 0.8,
                animationDelay: 1.2,
                display: "inline-block",
              },
            },
          ],
          settings: {
            paddingTop: 120,
            paddingRight: 32,
            paddingBottom: 120,
            paddingLeft: 32,
            textAlign: "center",
          },
        },
      ],
      settings: {
        maxWidth: "1400px",
        marginLeft: "auto",
        marginRight: "auto",
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
      },
    },
  ],
  settings: {
    background: "linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e293b 100%)",
    backgroundSize: "400% 400%",
    position: "relative",
    overflow: "hidden",
  },
}; 