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

export const gradientCTA: 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: "Ready to Transform Your Business?",
              settings: {
                fontSize: 64,
                fontWeight: "900",
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#ffffff", dark: "#ffffff" },
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 1.0,
                animationDelay: 0.3,
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content:
                "Join 50,000+ businesses already using our platform to scale faster, work smarter, and achieve more. Start your free trial today and see the difference.",
              settings: {
                fontSize: 22,
                textAlign: "center",
                paddingLeft: 24,
                paddingRight: 24,
                marginBottom: 48,
                color: {
                  light: "rgba(255,255,255,0.95)",
                  dark: "rgba(255,255,255,0.95)",
                },
                lineHeight: 1.6,
                maxWidth: "720px",
                marginLeft: "auto",
                marginRight: "auto",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1.0,
                animationDelay: 0.6,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "button",
              content: "Start Free Trial",
              settings: {
                backgroundColor: { light: "#ffffff", dark: "#ffffff" },
                hoverBackgroundColor: { light: "#f8fafc", dark: "#f1f5f9" },
                color: { light: "#1e293b", dark: "#1e293b" },
                fontSize: 20,
                fontWeight: "700",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 48,
                paddingBottom: 20,
                paddingLeft: 48,
                marginRight: 16,
                marginBottom: 16,
                borderRadius: 16,
                boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
                minWidth: "220px",
                transition: "all 0.3s ease",
                hoverTransform: "translateY(-2px)",
                hoverBoxShadow: "0 12px 40px rgba(0, 0, 0, 0.3)",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 0.9,
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "button",
              content: "Schedule Demo",
              settings: {
                backgroundColor: "transparent",
                borderColor: "rgba(255,255,255,0.8)",
                borderWidth: 2,
                borderStyle: "solid",
                hoverBackgroundColor: "rgba(255,255,255,0.1)",
                hoverBorderColor: "#ffffff",
                color: { light: "#ffffff", dark: "#ffffff" },
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                paddingTop: 20,
                paddingRight: 40,
                paddingBottom: 20,
                paddingLeft: 40,
                marginLeft: 16,
                marginBottom: 16,
                borderRadius: 16,
                minWidth: "200px",
                transition: "all 0.3s ease",
                hoverTransform: "translateY(-2px)",
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.8,
                animationDelay: 1.1,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content:
                "✨ No credit card required • 30-day money-back guarantee • Cancel anytime",
              settings: {
                fontSize: 16,
                textAlign: "center",
                marginTop: 40,
                color: {
                  light: "rgba(255,255,255,0.9)",
                  dark: "rgba(255,255,255,0.9)",
                },
                lineHeight: 1.5,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 1.3,
              },
            },
          ],
          settings: {
            paddingTop: 100,
            paddingRight: 32,
            paddingBottom: 100,
            paddingLeft: 32,
            textAlign: "center",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            minHeight: "600px",
            position: "relative",
            overflow: "hidden",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        background:
          "linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)",
        backgroundSize: "200% 200%",
        backgroundAnimation: "gradientShift 8s ease infinite",
        position: "relative",
        overflow: "hidden",
      },
    },
  ],
  settings: {
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    position: "relative",
    overflow: "hidden",
  },
  name: "Gradient CTA",
  description:
    "Eye-catching gradient CTA section with animated background and compelling copy",
  category: "cta",
};
