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

export const pricingToggle: 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: "Flexible Pricing Plans",
              settings: {
                fontSize: 48,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 16,
                color: { light: "#0f172a", dark: "#f1f5f9" },
                lineHeight: 1.2,
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.2,
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content: "Save 20% with annual billing",
              settings: {
                fontSize: 18,
                textAlign: "center",
                marginBottom: 40,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 0.4,
              },
            },
            {
              id: `element-${generateId("element")}-3`,
              type: "text",
              content: "💰 Monthly    •    💎 Yearly (Save 20%)",
              settings: {
                fontSize: 20,
                fontWeight: "600",
                textAlign: "center",
                marginBottom: 60,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                backgroundColor: { light: "#f1f5f9", dark: "#1e293b" },
                paddingTop: 16,
                paddingRight: 32,
                paddingBottom: 16,
                paddingLeft: 32,
                borderRadius: 50,
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 0.6,
              },
            },
          ],
          nestingLevel: 1,
        },
      ],
    },
    // Pricing Cards Row
    {
      id: `row-${generateId("row")}-cards`,
      columns: [
        // Starter Plan
        {
          id: `column-${generateId("column")}-starter`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-4`,
              type: "text",
              content: "⚡ Starter",
              settings: {
                fontSize: 28,
                fontWeight: "700",
                textAlign: "center",
                marginBottom: 16,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "text",
              content: "$19/mo",
              settings: {
                fontSize: 56,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#3b82f6", dark: "#60a5fa" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-6`,
              type: "text",
              content: "or $15/mo billed yearly",
              settings: {
                fontSize: 16,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#10b981", dark: "#34d399" },
                fontWeight: "600",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-7`,
              type: "text",
              content:
                "Perfect for individuals and small teams getting started",
              settings: {
                fontSize: 16,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-8`,
              type: "text",
              content:
                "✓ Up to 10 projects\n✓ 50GB storage\n✓ Email support\n✓ Basic analytics\n✓ Team collaboration (up to 5 users)",
              settings: {
                fontSize: 16,
                textAlign: "left",
                marginBottom: 32,
                color: { light: "#475569", dark: "#cbd5e1" },
                lineHeight: 2,
                paddingLeft: 20,
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.6,
              },
            },
            {
              id: `element-${generateId("element")}-9`,
              type: "button",
              content: "Start 14-Day Free Trial",
              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,
                borderRadius: 12,
                width: "100%",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.8,
              },
            },
          ],
          settings: {
            backgroundColor: { light: "#ffffff", dark: "#0f172a" },
            borderWidth: 2,
            borderColor: { light: "#e2e8f0", dark: "#334155" },
            borderRadius: 20,
            paddingTop: 48,
            paddingRight: 40,
            paddingBottom: 48,
            paddingLeft: 40,
            marginRight: 20,
          },
          nestingLevel: 1,
        },
        // Professional Plan
        {
          id: `column-${generateId("column")}-professional`,
          width: 50,
          elements: [
            {
              id: `element-${generateId("element")}-10`,
              type: "text",
              content: "🚀 Professional",
              settings: {
                fontSize: 28,
                fontWeight: "700",
                textAlign: "center",
                marginBottom: 16,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-11`,
              type: "text",
              content: "$49/mo",
              settings: {
                fontSize: 56,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#7c3aed", dark: "#a78bfa" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.8,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-12`,
              type: "text",
              content: "or $39/mo billed yearly",
              settings: {
                fontSize: 16,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#10b981", dark: "#34d399" },
                fontWeight: "600",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-13`,
              type: "text",
              content: "Ideal for growing businesses and larger teams",
              settings: {
                fontSize: 16,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-14`,
              type: "text",
              content:
                "✓ Unlimited projects\n✓ 500GB storage\n✓ Priority support\n✓ Advanced analytics\n✓ Unlimited team members\n✓ API access\n✓ Custom integrations",
              settings: {
                fontSize: 16,
                textAlign: "left",
                marginBottom: 32,
                color: { light: "#475569", dark: "#cbd5e1" },
                lineHeight: 2,
                paddingLeft: 20,
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.6,
              },
            },
            {
              id: `element-${generateId("element")}-15`,
              type: "button",
              content: "Upgrade to Professional",
              settings: {
                backgroundColor: { light: "#7c3aed", dark: "#7c3aed" },
                hoverBackgroundColor: { light: "#6d28d9", dark: "#6d28d9" },
                color: { light: "#ffffff", dark: "#ffffff" },
                fontSize: 18,
                fontWeight: "600",
                paddingTop: 16,
                paddingRight: 32,
                paddingBottom: 16,
                paddingLeft: 32,
                borderRadius: 12,
                width: "100%",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.8,
              },
            },
          ],
          settings: {
            backgroundColor: { light: "#ffffff", dark: "#0f172a" },
            borderWidth: 3,
            borderColor: { light: "#7c3aed", dark: "#a78bfa" },
            borderRadius: 20,
            paddingTop: 48,
            paddingRight: 40,
            paddingBottom: 48,
            paddingLeft: 40,
            marginLeft: 20,
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        display: "flex",
        alignItems: "stretch",
        gap: 0,
      },
    },
  ],
  settings: {
    paddingTop: 120,
    paddingRight: 24,
    paddingBottom: 120,
    paddingLeft: 24,
    backgroundColor: { light: "#f8fafc", dark: "#020617" },
  },
  name: "Pricing Toggle",
  description: "Pricing with monthly/yearly toggle and savings highlight",
  category: "pricing",
};
