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

export const modernContact: Section = {
  id: `section-${generateId("section")}`,
  type: "regular",
  rows: [
    // Header Row
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}`,
          width: 100,
          elements: [
            {
              id: `element-${generateId("element")}-1`,
              type: "heading",
              content: "Get in Touch",
              settings: {
                fontSize: 56,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 24,
                color: { light: "#0f172a", dark: "#f1f5f9" },
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.8,
                animationDelay: 0.2,
              },
            },
            {
              id: `element-${generateId("element")}-2`,
              type: "text",
              content:
                "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
              settings: {
                fontSize: 20,
                textAlign: "center",
                paddingLeft: 24,
                paddingRight: 24,
                marginBottom: 80,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                maxWidth: "640px",
                marginLeft: "auto",
                marginRight: "auto",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 0.4,
              },
            },
          ],
          settings: {},
          nestingLevel: 1,
        },
      ],
      settings: {},
    },
    // Main Content Row
    {
      id: `row-${generateId("row")}`,
      columns: [
        // Contact Information Column
        {
          id: `column-${generateId("column")}`,
          width: 40,
          elements: [
            {
              id: `element-${generateId("element")}-3`,
              type: "heading",
              content: "Contact Information",
              settings: {
                fontSize: 32,
                fontWeight: "700",
                marginBottom: 32,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 0.6,
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "text",
              content: "📧",
              settings: {
                fontSize: 24,
                marginBottom: 8,
                color: { light: "#3b82f6", dark: "#60a5fa" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "heading",
              content: "Email",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.6,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-6`,
              type: "text",
              content: "hello@company.com\nsupport@company.com",
              settings: {
                fontSize: 16,
                marginBottom: 32,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                whiteSpace: "pre-line",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-7`,
              type: "text",
              content: "📞",
              settings: {
                fontSize: 24,
                marginBottom: 8,
                color: { light: "#10b981", dark: "#34d399" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-8`,
              type: "heading",
              content: "Phone",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-9`,
              type: "text",
              content: "+1 (555) 123-4567\n+1 (555) 987-6543",
              settings: {
                fontSize: 16,
                marginBottom: 32,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                whiteSpace: "pre-line",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-10`,
              type: "text",
              content: "📍",
              settings: {
                fontSize: 24,
                marginBottom: 8,
                color: { light: "#8b5cf6", dark: "#a78bfa" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-11`,
              type: "heading",
              content: "Office",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideLeft",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-12`,
              type: "text",
              content: "123 Business Ave\nSuite 100\nSan Francisco, CA 94102",
              settings: {
                fontSize: 16,
                marginBottom: 32,
                color: { light: "#64748b", dark: "#94a3b8" },
                lineHeight: 1.6,
                whiteSpace: "pre-line",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.6,
              },
            },
          ],
          settings: {
            paddingRight: 40,
          },
          nestingLevel: 1,
        },
        // Contact Form Column
        {
          id: `column-${generateId("column")}`,
          width: 60,
          elements: [
            {
              id: `element-${generateId("element")}-13`,
              type: "text",
              content: "Name *",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-14`,
              type: "text",
              content: "Your full name",
              settings: {
                fontSize: 16,
                paddingTop: 16,
                paddingBottom: 16,
                paddingLeft: 16,
                paddingRight: 16,
                marginBottom: 24,
                borderRadius: 12,
                borderWidth: 1,
                borderStyle: "solid",
                borderColor: { light: "#e2e8f0", dark: "#334155" },
                backgroundColor: { light: "#ffffff", dark: "#1e293b" },
                color: { light: "#64748b", dark: "#94a3b8" },
                width: "100%",
                transition: "all 0.3s ease",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-15`,
              type: "text",
              content: "Email *",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-16`,
              type: "text",
              content: "your.email@example.com",
              settings: {
                fontSize: 16,
                paddingTop: 16,
                paddingBottom: 16,
                paddingLeft: 16,
                paddingRight: 16,
                marginBottom: 24,
                borderRadius: 12,
                borderWidth: 1,
                borderStyle: "solid",
                borderColor: { light: "#e2e8f0", dark: "#334155" },
                backgroundColor: { light: "#ffffff", dark: "#1e293b" },
                color: { light: "#64748b", dark: "#94a3b8" },
                width: "100%",
                transition: "all 0.3s ease",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-17`,
              type: "text",
              content: "Subject",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-18`,
              type: "text",
              content: "How can we help you?",
              settings: {
                fontSize: 16,
                paddingTop: 16,
                paddingBottom: 16,
                paddingLeft: 16,
                paddingRight: 16,
                marginBottom: 24,
                borderRadius: 12,
                borderWidth: 1,
                borderStyle: "solid",
                borderColor: { light: "#e2e8f0", dark: "#334155" },
                backgroundColor: { light: "#ffffff", dark: "#1e293b" },
                color: { light: "#64748b", dark: "#94a3b8" },
                width: "100%",
                transition: "all 0.3s ease",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-19`,
              type: "text",
              content: "Message *",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                marginBottom: 8,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-20`,
              type: "text",
              content: "Tell us more about your project or question...",
              settings: {
                fontSize: 16,
                paddingTop: 16,
                paddingBottom: 80,
                paddingLeft: 16,
                paddingRight: 16,
                marginBottom: 32,
                borderRadius: 12,
                borderWidth: 1,
                borderStyle: "solid",
                borderColor: { light: "#e2e8f0", dark: "#334155" },
                backgroundColor: { light: "#ffffff", dark: "#1e293b" },
                color: { light: "#64748b", dark: "#94a3b8" },
                width: "100%",
                minHeight: "120px",
                resize: "vertical",
                transition: "all 0.3s ease",
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.6,
              },
            },
            {
              id: `element-${generateId("element")}-21`,
              type: "button",
              content: "Send Message",
              settings: {
                backgroundColor: { light: "#3b82f6", dark: "#3b82f6" },
                hoverBackgroundColor: { light: "#2563eb", dark: "#2563eb" },
                color: { light: "#ffffff", dark: "#ffffff" },
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                paddingTop: 18,
                paddingRight: 48,
                paddingBottom: 18,
                paddingLeft: 48,
                borderRadius: 12,
                boxShadow: {
                  light: "0 4px 14px rgba(59, 130, 246, 0.3)",
                  dark: "0 4px 14px rgba(59, 130, 246, 0.4)",
                },
                transition: "all 0.3s ease",
                hoverTransform: "translateY(-2px)",
                hoverBoxShadow: {
                  light: "0 8px 25px rgba(59, 130, 246, 0.4)",
                  dark: "0 8px 25px rgba(59, 130, 246, 0.5)",
                },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.8,
              },
            },
          ],
          settings: {
            paddingLeft: 40,
            paddingTop: 40,
            paddingRight: 40,
            paddingBottom: 40,
            borderRadius: 20,
            backgroundColor: { light: "#ffffff", dark: "#1e293b" },
            boxShadow: {
              light: "0 10px 25px rgba(0,0,0,0.05)",
              dark: "0 10px 25px rgba(0,0,0,0.3)",
            },
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: { light: "#e2e8f0", dark: "#334155" },
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        display: "flex",
        gap: 40,
        alignItems: "flex-start",
      },
    },
  ],
  settings: {
    paddingTop: 120,
    paddingRight: 24,
    paddingBottom: 120,
    paddingLeft: 24,
    backgroundColor: { light: "#f8fafc", dark: "#0f172a" },
  },
  name: "Modern Contact",
  description:
    "Modern contact section with contact information and form side by side",
  category: "contact",
};
