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

export const techHero: Section = {
  id: `section-${generateId("section")}`,
  type: "regular",
  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 is Here",
              settings: {
                fontSize: 76,
                fontWeight: "900",
                textAlign: "center",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 32,
                marginLeft: 0,
                background:
                  "linear-gradient(135deg, #f7931a 0%, #4f46e5 50%, #059669 100%)",
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                lineHeight: 1.05,
                letterSpacing: "-0.03em",
                // Advanced animations
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 1.2,
                animationDelay: 0.2,
                animationEasing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
                animationFillMode: "forwards",
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content:
                "Trade, stake, and manage crypto portfolios 10x faster with our advanced trading platform. Join 75,000+ traders who maximize profits with confidence.",
              settings: {
                fontSize: 26,
                fontWeight: "400",
                textAlign: "center",
                paddingTop: 0,
                paddingRight: 24,
                paddingBottom: 0,
                paddingLeft: 24,
                marginTop: 0,
                marginRight: "auto",
                marginBottom: 48,
                marginLeft: "auto",
                color: { light: "zinc-600", dark: "zinc-300" },
                lineHeight: 1.6,
                maxWidth: "800px",
                // Advanced animations
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1,
                animationDelay: 0.6,
                animationEasing: "ease-out",
                animationFillMode: "forwards",
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "button",
              content: "Start Trading →",
              settings: {
                background: "linear-gradient(135deg, #00d4ff 0%, #090979 100%)",
                hoverBackground:
                  "linear-gradient(135deg, #00c4ef 0%, #080869 100%)",
                color: "#ffffff",
                hoverColor: "#ffffff",
                fontSize: 22,
                fontWeight: "700",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 48,
                paddingBottom: 20,
                paddingLeft: 48,
                marginTop: 0,
                marginRight: 12,
                marginBottom: 20,
                marginLeft: 0,
                borderRadius: 16,
                boxShadow: "0 16px 64px rgba(0, 212, 255, 0.4)",
                minWidth: "250px",
                // Advanced animations
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 1,
                animationEasing: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
                animationFillMode: "forwards",
                // Hover effects
                transitionProperty: "all",
                transitionDuration: 0.3,
                transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
                hoverEffect: "elevate",
                hoverEffectIntensity: 2.2,
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "button",
              content: "View Markets",
              settings: {
                backgroundColor: "transparent",
                borderColor: { light: "#d1d5db", dark: "#6b7280" },
                borderWidth: 2,
                borderStyle: "solid",
                hoverBackgroundColor: { light: "#f9fafb", dark: "#374151" },
                hoverBorderColor: { light: "#9ca3af", dark: "#9ca3af" },
                color: { light: "#374151", dark: "#d1d5db" },
                hoverColor: { light: "#111827", dark: "#ffffff" },
                fontSize: 20,
                fontWeight: "600",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 40,
                paddingBottom: 20,
                paddingLeft: 40,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 20,
                marginLeft: 12,
                borderRadius: 16,
                minWidth: "200px",
                // Advanced animations
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.8,
                animationDelay: 1.2,
                animationEasing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
                animationFillMode: "forwards",
                // Hover effects
                transitionProperty: "all",
                transitionDuration: 0.3,
                transitionTimingFunction: "ease-out",
                hoverEffect: "glow",
                hoverEffectIntensity: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content:
                "⚡ Lightning Fast Trades • 🔗 Multi-Chain Support • 📈 Advanced Analytics • 🤖 AI-Powered Insights",
              settings: {
                fontSize: 18,
                fontWeight: "500",
                textAlign: "center",
                paddingTop: 56,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
                color: { light: "zinc-500", dark: "zinc-400" },
                lineHeight: 1.6,
                borderTop: true,
                borderWidth: 1,
                borderStyle: "solid",
                borderColor: { light: "#e5e7eb", dark: "#4b5563" },
                // Advanced animations
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1,
                animationDelay: 1.6,
                animationEasing: "ease-out",
                animationFillMode: "forwards",
              },
            },
            {
              id: `element-${generateId("element")}-6`,
              type: "text",
              content: "⚡",
              settings: {
                fontSize: 64,
                textAlign: "center",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
                position: "absolute",
                top: "15%",
                right: "8%",
                // Floating animation
                enableAnimation: true,
                animationType: "bounce",
                animationDuration: 2,
                animationDelay: 2,
                animationIterationCount: "infinite",
                animationEasing: "ease-in-out",
              },
            },
            {
              id: `element-${generateId("element")}-7`,
              type: "text",
              content: "🚀",
              settings: {
                fontSize: 56,
                textAlign: "center",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
                position: "absolute",
                top: "20%",
                left: "10%",
                // Floating animation
                enableAnimation: true,
                animationType: "pulse",
                animationDuration: 3,
                animationDelay: 2.5,
                animationIterationCount: "infinite",
                animationEasing: "ease-in-out",
              },
            },
            {
              id: `element-${generateId("element")}-8`,
              type: "text",
              content: "💎",
              settings: {
                fontSize: 48,
                textAlign: "center",
                paddingTop: 0,
                paddingRight: 0,
                paddingBottom: 0,
                paddingLeft: 0,
                marginTop: 0,
                marginRight: 0,
                marginBottom: 0,
                marginLeft: 0,
                position: "absolute",
                bottom: "15%",
                right: "12%",
                // Floating animation
                enableAnimation: true,
                animationType: "swing",
                animationDuration: 2.5,
                animationDelay: 3,
                animationIterationCount: "infinite",
                animationEasing: "ease-in-out",
              },
            },
          ],
          settings: {
            paddingTop: 120,
            paddingRight: 32,
            paddingBottom: 120,
            paddingLeft: 32,
            textAlign: "center",
            position: "relative",
            minHeight: "100vh",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            background: "linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%)",
            backgroundSize: "200% 200%",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0,
        maxWidth: "1400px",
        marginLeft: "auto",
        marginRight: "auto",
      },
      nestingLevel: 1,
    },
  ],
  settings: {
    background:
      "linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%)",
    backgroundSize: "200% 200%",
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    minHeight: "100vh",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    position: "relative",
    overflow: "hidden",
  },
  name: "Tech Hero",
  description:
    "Modern technology hero with enhanced animations, code snippets, gradients, and impressive visual effects for crypto trading platform",
  category: "hero",
  snapshots: {
    card: "",
    preview: "",
  },
};
