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

export const testimonialsGrid: 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: "Loved by Thousands of Customers",
              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:
                "Don't just take our word for it. Here's what our customers have to say about their experience.",
              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: {},
    },
    // Testimonials Row 1
    {
      id: `row-${generateId("row")}`,
      columns: [
        // Testimonial 1
        {
          id: `column-${generateId("column")}`,
          width: 33.33,
          elements: [
            {
              id: `element-${generateId("element")}-3`,
              type: "text",
              content: "⭐⭐⭐⭐⭐",
              settings: {
                fontSize: 24,
                textAlign: "center",
                marginBottom: 24,
                color: { light: "#fbbf24", dark: "#fbbf24" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 0.6,
              },
            },
            {
              id: `element-${generateId("element")}-4`,
              type: "text",
              content:
                '"This platform has completely transformed how we manage our projects. The intuitive interface and powerful features make it a joy to use every day. Our team productivity has increased by 40%!"',
              settings: {
                fontSize: 18,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#374151", dark: "#d1d5db" },
                lineHeight: 1.7,
                fontStyle: "italic",
                paddingLeft: 16,
                paddingRight: 16,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-5`,
              type: "image",
              content:
                "https://images.unsplash.com/photo-1494790108755-2616c078e5b8?w=80&h=80&fit=crop&crop=face",
              settings: {
                width: "64px",
                height: "64px",
                borderRadius: 50,
                marginLeft: "auto",
                marginRight: "auto",
                marginBottom: 16,
                objectFit: "cover",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-6`,
              type: "heading",
              content: "Sarah Johnson",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                marginBottom: 4,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-7`,
              type: "text",
              content: "CEO, TechStart Inc.",
              settings: {
                fontSize: 14,
                textAlign: "center",
                color: { light: "#64748b", dark: "#94a3b8" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
          ],
          settings: {
            paddingTop: 40,
            paddingRight: 32,
            paddingBottom: 40,
            paddingLeft: 32,
            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" },
            transition: "all 0.3s ease",
            hoverTransform: "translateY(-4px)",
          },
          nestingLevel: 1,
        },
        // Testimonial 2
        {
          id: `column-${generateId("column")}`,
          width: 33.33,
          elements: [
            {
              id: `element-${generateId("element")}-8`,
              type: "text",
              content: "⭐⭐⭐⭐⭐",
              settings: {
                fontSize: 24,
                textAlign: "center",
                marginBottom: 24,
                color: { light: "#fbbf24", dark: "#fbbf24" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 0.7,
              },
            },
            {
              id: `element-${generateId("element")}-9`,
              type: "text",
              content:
                '"Outstanding customer support and incredibly robust features. We\'ve been using this for 2 years and it keeps getting better. The analytics dashboard alone is worth the price!"',
              settings: {
                fontSize: 18,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#374151", dark: "#d1d5db" },
                lineHeight: 1.7,
                fontStyle: "italic",
                paddingLeft: 16,
                paddingRight: 16,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 0.9,
              },
            },
            {
              id: `element-${generateId("element")}-10`,
              type: "image",
              content:
                "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=80&h=80&fit=crop&crop=face",
              settings: {
                width: "64px",
                height: "64px",
                borderRadius: 50,
                marginLeft: "auto",
                marginRight: "auto",
                marginBottom: 16,
                objectFit: "cover",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.1,
              },
            },
            {
              id: `element-${generateId("element")}-11`,
              type: "heading",
              content: "Michael Chen",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                marginBottom: 4,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.3,
              },
            },
            {
              id: `element-${generateId("element")}-12`,
              type: "text",
              content: "CTO, Digital Solutions",
              settings: {
                fontSize: 14,
                textAlign: "center",
                color: { light: "#64748b", dark: "#94a3b8" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.5,
              },
            },
          ],
          settings: {
            paddingTop: 40,
            paddingRight: 32,
            paddingBottom: 40,
            paddingLeft: 32,
            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" },
            transition: "all 0.3s ease",
            hoverTransform: "translateY(-4px)",
          },
          nestingLevel: 1,
        },
        // Testimonial 3
        {
          id: `column-${generateId("column")}`,
          width: 33.33,
          elements: [
            {
              id: `element-${generateId("element")}-13`,
              type: "text",
              content: "⭐⭐⭐⭐⭐",
              settings: {
                fontSize: 24,
                textAlign: "center",
                marginBottom: 24,
                color: { light: "#fbbf24", dark: "#fbbf24" },
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 0.8,
              },
            },
            {
              id: `element-${generateId("element")}-14`,
              type: "text",
              content:
                '"Game-changer for our agency! The collaboration tools are seamless and the automation features save us hours every week. Our clients love the transparency it provides."',
              settings: {
                fontSize: 18,
                textAlign: "center",
                marginBottom: 32,
                color: { light: "#374151", dark: "#d1d5db" },
                lineHeight: 1.7,
                fontStyle: "italic",
                paddingLeft: 16,
                paddingRight: 16,
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.8,
                animationDelay: 1.0,
              },
            },
            {
              id: `element-${generateId("element")}-15`,
              type: "image",
              content:
                "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=80&h=80&fit=crop&crop=face",
              settings: {
                width: "64px",
                height: "64px",
                borderRadius: 50,
                marginLeft: "auto",
                marginRight: "auto",
                marginBottom: 16,
                objectFit: "cover",
                enableAnimation: true,
                animationType: "zoomIn",
                animationDuration: 0.6,
                animationDelay: 1.2,
              },
            },
            {
              id: `element-${generateId("element")}-16`,
              type: "heading",
              content: "Emily Rodriguez",
              settings: {
                fontSize: 18,
                fontWeight: "600",
                textAlign: "center",
                marginBottom: 4,
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "slideUp",
                animationDuration: 0.6,
                animationDelay: 1.4,
              },
            },
            {
              id: `element-${generateId("element")}-17`,
              type: "text",
              content: "Founder, Creative Agency",
              settings: {
                fontSize: 14,
                textAlign: "center",
                color: { light: "#64748b", dark: "#94a3b8" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 1.6,
              },
            },
          ],
          settings: {
            paddingTop: 40,
            paddingRight: 32,
            paddingBottom: 40,
            paddingLeft: 32,
            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" },
            transition: "all 0.3s ease",
            hoverTransform: "translateY(-4px)",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        display: "flex",
        flexWrap: "wrap",
        gap: 24,
        alignItems: "stretch",
      },
    },
    // Stats Row
    {
      id: `row-${generateId("row")}`,
      columns: [
        {
          id: `column-${generateId("column")}`,
          width: 25,
          elements: [
            {
              id: `element-${generateId("element")}-18`,
              type: "heading",
              content: "50K+",
              settings: {
                fontSize: 48,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#3b82f6", dark: "#60a5fa" },
                enableAnimation: true,
                animationType: "countUp",
                animationDuration: 2.0,
                animationDelay: 1.8,
              },
            },
            {
              id: `element-${generateId("element")}-19`,
              type: "text",
              content: "Happy Customers",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                textAlign: "center",
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 2.0,
              },
            },
          ],
          settings: {
            textAlign: "center",
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}`,
          width: 25,
          elements: [
            {
              id: `element-${generateId("element")}-20`,
              type: "heading",
              content: "4.9",
              settings: {
                fontSize: 48,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#10b981", dark: "#34d399" },
                enableAnimation: true,
                animationType: "countUp",
                animationDuration: 2.0,
                animationDelay: 2.0,
              },
            },
            {
              id: `element-${generateId("element")}-21`,
              type: "text",
              content: "Average Rating",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                textAlign: "center",
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 2.2,
              },
            },
          ],
          settings: {
            textAlign: "center",
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}`,
          width: 25,
          elements: [
            {
              id: `element-${generateId("element")}-22`,
              type: "heading",
              content: "99.9%",
              settings: {
                fontSize: 48,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#8b5cf6", dark: "#a78bfa" },
                enableAnimation: true,
                animationType: "countUp",
                animationDuration: 2.0,
                animationDelay: 2.2,
              },
            },
            {
              id: `element-${generateId("element")}-23`,
              type: "text",
              content: "Uptime",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                textAlign: "center",
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 2.4,
              },
            },
          ],
          settings: {
            textAlign: "center",
          },
          nestingLevel: 1,
        },
        {
          id: `column-${generateId("column")}`,
          width: 25,
          elements: [
            {
              id: `element-${generateId("element")}-24`,
              type: "heading",
              content: "24/7",
              settings: {
                fontSize: 48,
                fontWeight: "800",
                textAlign: "center",
                marginBottom: 8,
                color: { light: "#f59e0b", dark: "#fbbf24" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 1.0,
                animationDelay: 2.4,
              },
            },
            {
              id: `element-${generateId("element")}-25`,
              type: "text",
              content: "Support",
              settings: {
                fontSize: 16,
                fontWeight: "600",
                textAlign: "center",
                color: { light: "#1e293b", dark: "#f1f5f9" },
                enableAnimation: true,
                animationType: "fadeIn",
                animationDuration: 0.6,
                animationDelay: 2.6,
              },
            },
          ],
          settings: {
            textAlign: "center",
          },
          nestingLevel: 1,
        },
      ],
      settings: {
        display: "flex",
        justifyContent: "space-around",
        alignItems: "center",
        marginTop: 80,
        paddingTop: 40,
        paddingBottom: 40,
        borderTopWidth: 1,
        borderTopStyle: "solid",
        borderTopColor: { light: "#e2e8f0", dark: "#334155" },
      },
    },
  ],
  settings: {
    paddingTop: 120,
    paddingRight: 24,
    paddingBottom: 120,
    paddingLeft: 24,
    backgroundColor: { light: "#f8fafc", dark: "#0f172a" },
  },
  name: "Testimonials Grid",
  description:
    "Beautiful testimonials with customer photos, ratings, and trust statistics",
  category: "testimonials",
};
