"use client";

import type React from "react";

import { useState, useRef, useEffect, useMemo } from "react";
import {
  motion,
  useScroll,
  useTransform,
  useSpring,
  useReducedMotion,
  useMotionValue,
  useMotionTemplate,
  type MotionValue,
  cubicBezier,
} from "motion/react";
import { useTheme } from "next-themes";
import { ArrowRight } from "lucide-react";

// Custom hook for mouse position with performance optimization and touch support
function useMousePosition() {
  const x = useMotionValue(0);
  const y = useMotionValue(0);

  useEffect(() => {
    // Use RAF for better performance
    let frameId: number;
    let prevX = 0;
    let prevY = 0;

    const handleMouseMove = (e: MouseEvent) => {
      // Cancel any existing animation frame
      if (frameId) {
        cancelAnimationFrame(frameId);
      }

      // Schedule update on next animation frame
      frameId = requestAnimationFrame(() => {
        // Add slight smoothing
        const newX = prevX + (e.clientX - prevX) * 0.5;
        const newY = prevY + (e.clientY - prevY) * 0.5;

        x.set(newX);
        y.set(newY);

        prevX = newX;
        prevY = newY;
      });
    };

    // Touch support
    const handleTouchMove = (e: TouchEvent) => {
      if (e.touches.length > 0) {
        if (frameId) {
          cancelAnimationFrame(frameId);
        }

        frameId = requestAnimationFrame(() => {
          const touch = e.touches[0];
          const newX = prevX + (touch.clientX - prevX) * 0.5;
          const newY = prevY + (touch.clientY - prevY) * 0.5;

          x.set(newX);
          y.set(newY);

          prevX = newX;
          prevY = newY;
        });
      }
    };

    // Set initial position to center of screen
    x.set(window.innerWidth / 2);
    y.set(window.innerHeight / 2);
    prevX = window.innerWidth / 2;
    prevY = window.innerHeight / 2;

    window.addEventListener("mousemove", handleMouseMove, { passive: true });
    window.addEventListener("touchmove", handleTouchMove, { passive: true });

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("touchmove", handleTouchMove);
      if (frameId) {
        cancelAnimationFrame(frameId);
      }
    };
  }, [x, y]);

  return { x, y };
}

// Custom hook for window size with debounce and SSR safety
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);

    // Set initial size
    setSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });

    let timeoutId: NodeJS.Timeout;

    const handleResize = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        setSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      }, 200); // Debounce resize events
    };

    window.addEventListener("resize", handleResize, { passive: true });
    return () => {
      window.removeEventListener("resize", handleResize);
      clearTimeout(timeoutId);
    };
  }, []);

  // Return zeros during SSR to prevent hydration mismatch
  return isMounted ? size : { width: 0, height: 0 };
}

// Custom hook to detect mobile/touch devices
function useMobileDetect() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      return (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
        window.innerWidth < 768
      );
    };

    setIsMobile(checkMobile());

    const handleResize = () => {
      setIsMobile(checkMobile());
    };

    window.addEventListener("resize", handleResize, { passive: true });
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return isMobile;
}

// Enhanced kinetic letter component with better performance
const KineticLetter = ({
  children,
  index = 0,
  mouseX,
  mouseY,
  windowWidth,
  windowHeight,
  isActive = false,
  delay = 0,
  weight = 1, // Control the intensity of the effect
  className = "",
  isMobile = false,
}: {
  children: React.ReactNode;
  index: number;
  mouseX: MotionValue<number>;
  mouseY: MotionValue<number>;
  windowWidth: number;
  windowHeight: number;
  isActive: boolean;
  delay?: number;
  weight?: number;
  className?: string;
  isMobile?: boolean;
}) => {
  const ref = useRef<HTMLSpanElement>(null);
  const [rect, setRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
  const prefersReducedMotion = useReducedMotion();

  // Optimize rect calculations with IntersectionObserver
  useEffect(() => {
    if (!ref.current || !isActive) return;

    const updateRect = () => {
      if (!ref.current) return;
      const { x, y, width, height } = ref.current.getBoundingClientRect();
      setRect({ x, y, width, height });
    };

    // Use IntersectionObserver to only calculate when visible
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting) {
          updateRect();
        }
      },
      { threshold: 0.1 }
    );

    observer.observe(ref.current);

    // Initial calculation
    updateRect();

    // Update on resize and after a short delay to ensure fonts are loaded
    const timeoutId = setTimeout(updateRect, 500);

    // Update rect periodically for dynamic content
    const intervalId = setInterval(updateRect, 2000);

    return () => {
      if (ref.current) observer.unobserve(ref.current);
      clearTimeout(timeoutId);
      clearInterval(intervalId);
    };
  }, [windowWidth, windowHeight, isActive]);

  // Calculate distance from mouse to letter center
  const centerX = rect.x + rect.width / 2;
  const centerY = rect.y + rect.height / 2;

  // Transform based on mouse position with refined parameters
  const maxDistance = isMobile ? 300 : 600;
  const maxRotation = (isMobile ? 10 : 15) * weight;

  const distanceX = useTransform(mouseX, (value) => {
    return value - centerX;
  });

  const distanceY = useTransform(mouseY, (value) => {
    return value - centerY;
  });

  const distance = useTransform([distanceX, distanceY], ([x, y]: [number, number]) => {
    return Math.sqrt(x * x + y * y);
  });

  const rotateX = useTransform(distanceY, (value) => {
    return (-value / maxDistance) * maxRotation;
  });

  const rotateY = useTransform(distanceX, (value) => {
    return (value / maxDistance) * maxRotation;
  });

  const translateZ = useTransform(distance, [0, maxDistance], [15 * weight, -5 * weight]);
  const scale = useTransform(distance, [0, maxDistance], [1.1 * weight, 0.9]);

  // Refined spring physics for smoother motion
  const springConfig = {
    stiffness: 250,
    damping: 25,
    mass: 0.5,
  };

  // Optimize by only creating springs when active
  const smoothRotateX = useSpring(rotateX, springConfig);
  const smoothRotateY = useSpring(rotateY, springConfig);
  const smoothTranslateZ = useSpring(translateZ, springConfig);
  const smoothScale = useSpring(scale, springConfig);

  const calculatedRotateX = isActive && !prefersReducedMotion ? smoothRotateX : 0;
  const calculatedRotateY = isActive && !prefersReducedMotion ? smoothRotateY : 0;
  const calculatedZ = isActive && !prefersReducedMotion ? smoothTranslateZ : 0;
  const calculatedScale = isActive && !prefersReducedMotion ? smoothScale : 1;

  // Refined animation timing with slight randomization for organic feel
  const randomOffset = useRef(Math.random() * 0.1);
  const entranceDelay = delay + index * 0.02 + randomOffset.current;
  const entranceDuration = 0.7 + randomOffset.current * 0.3;
  const entranceEase = cubicBezier(0.2, 0.8, 0.2, 1);

  return (
    <motion.span
      ref={ref}
      className={`inline-block relative ${className}`}
      style={{
        transformStyle: "preserve-3d",
        transformOrigin: "center center",
        willChange: "transform",
        backfaceVisibility: "hidden",
        rotateX: calculatedRotateX,
        rotateY: calculatedRotateY,
        z: calculatedZ,
        scale: calculatedScale,
      }}
      initial={{ opacity: 0, y: 20, rotateX: 20 }}
      animate={{
        opacity: 1,
        y: 0,
        rotateX: 0,
        transition: {
          duration: entranceDuration,
          ease: entranceEase,
          delay: entranceDelay,
        },
      }}
    >
      {children}
    </motion.span>
  );
};

// Enhanced kinetic text component with better performance
const KineticText = ({
  text,
  className = "",
  mouseX,
  mouseY,
  windowWidth,
  windowHeight,
  isActive = false,
  delay = 0,
  weight = 1,
  letterClassName = "",
  isMobile = false,
}: {
  text: string;
  className?: string;
  mouseX: MotionValue<number>;
  mouseY: MotionValue<number>;
  windowWidth: number;
  windowHeight: number;
  isActive: boolean;
  delay?: number;
  weight?: number;
  letterClassName?: string;
  isMobile?: boolean;
}) => {
  // Use state instead of useMemo to prevent hydration mismatch
  const [characters, setCharacters] = useState<string[]>([]);

  useEffect(() => {
    setCharacters(Array.from(text));
  }, [text]);

  return (
    <span className={`relative inline-block ${className}`}>
      {characters.map((char, i) => (
        <KineticLetter
          key={i}
          index={i}
          mouseX={mouseX}
          mouseY={mouseY}
          windowWidth={windowWidth}
          windowHeight={windowHeight}
          isActive={isActive}
          delay={delay}
          weight={weight}
          className={letterClassName}
          isMobile={isMobile}
        >
          {char === " " ? "\u00A0" : char}
        </KineticLetter>
      ))}
    </span>
  );
};

// Enhanced 3D button with refined interactions and touch support
const MagneticButton3D = ({
  children,
  className = "",
  onClick,
  delay = 0,
  icon,
  variant = "primary",
  isMobile = false,
  href = "#",
}: {
  children: React.ReactNode;
  className?: string;
  onClick?: () => void;
  delay?: number;
  icon?: React.ReactNode;
  variant?: "primary" | "secondary";
  isMobile?: boolean;
  href?: string;
}) => {
  const buttonRef = useRef<HTMLAnchorElement>(null);
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);
  const prefersReducedMotion = useReducedMotion();
  const { resolvedTheme } = useTheme();
  const isDark = resolvedTheme === "dark";

  // Refined mouse tracking
  const handleMouseMove = (e: React.MouseEvent<HTMLAnchorElement>) => {
    if (!buttonRef.current || prefersReducedMotion || isMobile) return;

    const rect = buttonRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    mouseX.set(x);
    mouseY.set(y);
  };

  // Touch support
  const handleTouchMove = (e: React.TouchEvent<HTMLAnchorElement>) => {
    if (!buttonRef.current || prefersReducedMotion || e.touches.length === 0) return;

    const rect = buttonRef.current.getBoundingClientRect();
    const touch = e.touches[0];
    const x = touch.clientX - rect.left;
    const y = touch.clientY - rect.top;

    mouseX.set(x);
    mouseY.set(y);
  };

  const resetMouse = () => {
    if (!buttonRef.current || prefersReducedMotion) return;
    mouseX.set(buttonRef.current.offsetWidth / 2);
    mouseY.set(buttonRef.current.offsetHeight / 2);
  };

  useEffect(() => {
    resetMouse();
  }, []);

  // Refined button transformations
  const dampen = isMobile ? 25 : 15;

  const rotateX = useTransform(mouseY, (value) => {
    if (!buttonRef.current) return 0;
    const height = buttonRef.current.offsetHeight;
    return (height / 2 - value) / dampen;
  });

  const rotateY = useTransform(mouseX, (value) => {
    if (!buttonRef.current) return 0;
    const width = buttonRef.current.offsetWidth;
    return -(width / 2 - value) / dampen;
  });

  // Enhanced gradient effect
  const gradientSize = useTransform(mouseX, (value) => (isHovered ? "150%" : "100%"));

  const background = useMotionTemplate`radial-gradient(
    ${gradientSize} circle at ${mouseX}px ${mouseY}px,
    var(--button-highlight) 0%,
    var(--button-bg) 60%
  )`;

  // Refined spring physics
  const springConfig = { stiffness: 400, damping: 30 };
  const smoothRotateX = useSpring(rotateX, springConfig);
  const smoothRotateY = useSpring(rotateY, springConfig);

  // Determine button colors based on variant and theme
  const getButtonVars = () => {
    if (variant === "primary") {
      return {
        bg: isDark ? "rgba(30, 30, 30, 0.95)" : "rgba(0, 0, 0, 0.95)",
        highlight: isDark ? "rgba(70, 70, 70, 0.95)" : "rgba(50, 50, 50, 0.95)",
        text: "white",
        border: "transparent",
        focusRing: isDark ? "rgba(100, 100, 255, 0.5)" : "rgba(0, 0, 200, 0.3)",
      };
    } else {
      return {
        bg: "transparent",
        highlight: isDark ? "rgba(50, 50, 50, 0.1)" : "rgba(0, 0, 0, 0.05)",
        text: isDark ? "rgba(255, 255, 255, 0.9)" : "rgba(0, 0, 0, 0.8)",
        border: isDark ? "rgba(70, 70, 70, 0.3)" : "rgba(0, 0, 0, 0.1)",
        focusRing: isDark ? "rgba(100, 100, 255, 0.5)" : "rgba(0, 0, 200, 0.3)",
      };
    }
  };

  const buttonVars = getButtonVars();

  const calculatedRotateX = (isHovered || isFocused) && !prefersReducedMotion && !isMobile ? smoothRotateX : 0;
  const calculatedRotateY = (isHovered || isFocused) && !prefersReducedMotion && !isMobile ? smoothRotateY : 0;
  const calculatedBackground =
    (isHovered || isFocused) && !prefersReducedMotion && variant === "primary" ? background
    : variant === "primary" ? buttonVars.bg
    : "transparent";

  // Enhanced shadow effect
  const shadowOpacity = useTransform(mouseY, (value) => {
    if (!buttonRef.current) return 0;
    const height = buttonRef.current.offsetHeight;
    const normalized = Math.abs(height / 2 - value) / height;
    return isHovered || isFocused ? 0.2 - normalized * 0.1 : 0;
  });

  const shadow = useMotionTemplate`0 ${isPressed ? "2px" : "8px"} 20px rgba(0, 0, 0, ${shadowOpacity})`;

  return (
    <motion.a
      ref={buttonRef}
      href={href}
      className={`relative overflow-hidden cursor-pointer ${className}`}
      onMouseMove={handleMouseMove}
      onTouchMove={handleTouchMove}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => {
        setIsHovered(false);
        resetMouse();
      }}
      onMouseDown={() => setIsPressed(true)}
      onMouseUp={() => setIsPressed(false)}
      onTouchStart={() => setIsPressed(true)}
      onTouchEnd={() => setIsPressed(false)}
      onFocus={() => setIsFocused(true)}
      onBlur={() => setIsFocused(false)}
      onClick={onClick}
      style={
        {
          transformStyle: "preserve-3d",
          rotateX: calculatedRotateX,
          rotateY: calculatedRotateY,
          boxShadow: shadow,
          outline: isFocused ? `2px solid ${buttonVars.focusRing}` : "none",
          outlineOffset: "2px",
          "--button-bg": buttonVars.bg,
          "--button-highlight": buttonVars.highlight,
          "--button-text": buttonVars.text,
          "--button-border": buttonVars.border,
        } as any
      }
      initial={{ opacity: 0, y: 20 }}
      animate={{
        opacity: 1,
        y: 0,
        transition: {
          duration: 0.8,
          ease: cubicBezier(0.16, 1, 0.3, 1),
          delay,
        },
      }}
      whileHover={{
        scale: prefersReducedMotion ? 1.02 : 1.03,
        transition: { duration: 0.2 },
      }}
      whileTap={{
        scale: 0.98,
        transition: { duration: 0.1 },
      }}
      role="button"
      aria-label={typeof children === "string" ? children : "Button"}
    >
      <motion.div
        className="absolute inset-0 rounded-full"
        style={{
          background: calculatedBackground,
          border: `1px solid ${buttonVars.border}`,
          borderRadius: "9999px",
        }}
      />
      <motion.div
        className="relative px-8 py-4 flex items-center justify-center gap-2"
        style={{
          transformStyle: "preserve-3d",
          transform:
            (isHovered || isFocused) && !prefersReducedMotion && !isMobile ? "translateZ(2px)" : "translateZ(0)",
          color: isHovered || isFocused ? "black" : buttonVars.text,
          fontWeight: 500,
          fontSize: "0.9rem",
          letterSpacing: "0.01em",
        }}
      >
        <span>{children}</span>
        {icon && (
          <motion.span
            initial={{ x: 0 }}
            animate={{
              x: isHovered || isFocused ? 3 : 0,
              transition: { duration: 0.2 },
            }}
          >
            {icon}
          </motion.span>
        )}
      </motion.div>
    </motion.a>
  );
};

// Enhanced particle effect with better performance
const Particles = ({ count = 20, isDark = false }: { count?: number; isDark?: boolean }) => {
  const prefersReducedMotion = useReducedMotion();

  // Skip rendering for reduced motion
  if (prefersReducedMotion) return null;

  // Memoize particles to prevent re-renders
  const particles = useMemo(() => {
    return Array.from({ length: count }).map((_, i) => {
      const size = Math.random() * 3 + 1;
      const duration = Math.random() * 20 + 10;
      const initialX = Math.random() * 100;
      const initialY = Math.random() * 100;
      const delay = Math.random() * 5;

      return { id: i, size, duration, initialX, initialY, delay };
    });
  }, [count]);

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {particles.map(({ id, size, duration, initialX, initialY, delay }) => (
        <motion.div
          key={id}
          className={`absolute rounded-full ${isDark ? "bg-white/10" : "bg-black/5"}`}
          style={{
            width: size,
            height: size,
            x: `${initialX}%`,
            y: `${initialY}%`,
            willChange: "transform, opacity",
          }}
          animate={{
            x: [`${initialX}%`, `${initialX + (Math.random() * 20 - 10)}%`],
            y: [`${initialY}%`, `${initialY - Math.random() * 30}`],
            opacity: [0, 0.4, 0],
          }}
          transition={{
            duration,
            ease: "linear",
            repeat: Number.POSITIVE_INFINITY,
            delay,
          }}
        />
      ))}
    </div>
  );
};

// Enhanced 3D grid component with better performance
const PerspectiveGrid = ({
  isDark,
  scrollYProgress,
  prefersReducedMotion,
  isMobile,
}: {
  isDark: boolean;
  scrollYProgress: MotionValue<number>;
  prefersReducedMotion: boolean | null;
  isMobile: boolean;
}) => {
  // Skip rendering for reduced motion
  if (prefersReducedMotion) return null;

  // Refined grid animations
  const rotateXGrid = useTransform(scrollYProgress, [0, 1], [isMobile ? 60 : 65, isMobile ? 50 : 55]);
  const yGrid = useTransform(scrollYProgress, [0, 1], [0, -50]);
  const opacityGrid = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 0.4, 0]);
  const scaleGrid = useTransform(scrollYProgress, [0, 0.5, 1], [1, 1.1, 1.05]);

  // Grid size based on device
  const gridSize = isMobile ? "30px" : "40px";

  return (
    <motion.div
      className="absolute inset-0 z-0"
      style={{
        perspective: 1000,
        transformStyle: "preserve-3d",
        willChange: "transform",
      }}
    >
      <motion.div
        className="absolute inset-x-0 bottom-0 h-[500px]"
        style={{
          transformStyle: "preserve-3d",
          rotateX: rotateXGrid,
          y: yGrid,
          opacity: opacityGrid,
          scale: scaleGrid,
          transformOrigin: "center bottom",
        }}
      >
        <div
          className="w-full h-full"
          style={{
            backgroundSize: `${gridSize} ${gridSize}`,
            backgroundImage:
              isDark ?
                "linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)"
              : "linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px)",
          }}
        />
      </motion.div>
    </motion.div>
  );
};

// Subtle noise texture overlay for premium feel
const NoiseTexture = ({ opacity = 0.03, isDark = false }: { opacity?: number; isDark?: boolean }) => {
  const prefersReducedMotion = useReducedMotion();

  // Skip for reduced motion
  if (prefersReducedMotion) return null;

  return (
    <motion.div
      className="absolute inset-0 pointer-events-none z-10 mix-blend-overlay"
      initial={{ opacity: 0 }}
      animate={{ opacity }}
      transition={{ duration: 1 }}
      style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`,
        backgroundRepeat: "repeat",
        backgroundSize: "200px 200px",
        opacity: isDark ? 0.05 : 0.03,
      }}
      aria-hidden="true"
    />
  );
};

// User avatar component for social proof
const UserAvatar = ({ index, delay, isDark }: { index: number; delay: number; isDark: boolean }) => {
  // Generate consistent but random colors based on index
  const getColor = (index: number) => {
    const colors = [
      "bg-blue-500",
      "bg-green-500",
      "bg-purple-500",
      "bg-amber-500",
      "bg-rose-500",
      "bg-cyan-500",
      "bg-indigo-500",
      "bg-emerald-500",
    ];
    return colors[index % colors.length];
  };

  return (
    <motion.div
      className={`w-8 h-8 rounded-full border-2 flex items-center justify-center text-xs font-medium text-white
        ${getColor(index)}
        ${isDark ? "border-gray-900" : "border-white"}
      `}
      initial={{ opacity: 0, x: -10 }}
      animate={{
        opacity: 1,
        x: 0,
        transition: {
          duration: 0.3,
          delay,
        },
      }}
    >
      {String.fromCharCode(65 + index)}
    </motion.div>
  );
};

export default function CTASection() {
  const prefersReducedMotion = useReducedMotion();
  const { resolvedTheme } = useTheme();
  const isDark = resolvedTheme === "dark";
  const { x: mouseX, y: mouseY } = useMousePosition();
  const { width: windowWidth, height: windowHeight } = useWindowSize();
  const [isTextActive, setIsTextActive] = useState(false);
  const [isLoaded, setIsLoaded] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const isMobile = useMobileDetect();

  // Activate text effect after initial animation
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsTextActive(true);
    }, 1500);

    // Mark as loaded after all animations complete
    const loadedTimer = setTimeout(() => {
      setIsLoaded(true);
    }, 3000);

    return () => {
      clearTimeout(timer);
      clearTimeout(loadedTimer);
    };
  }, []);

  // Scroll-based animations
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"],
  });

  // Refined perspective animation
  const perspective = useTransform(scrollYProgress, [0, 0.5, 1], [1000, 1200, 1000]);

  // Subtle background color animation
  const bgColor =
    isDark ?
      useMotionTemplate`rgb(5, 5, ${useTransform(scrollYProgress, [0, 1], [5, 10])})`
    : useMotionTemplate`rgb(255, 255, ${useTransform(scrollYProgress, [0, 1], [255, 250])})`;

  return (
    <motion.div
      ref={containerRef}
      className="relative min-h-screen flex items-center justify-center overflow-hidden"
      style={{
        perspective: prefersReducedMotion ? "none" : perspective,
        backgroundColor: bgColor,
      }}
    >
      <Particles count={isMobile ? 15 : 25} isDark={isDark} />
      <NoiseTexture opacity={0.03} isDark={isDark} />

      <PerspectiveGrid
        isDark={isDark}
        scrollYProgress={scrollYProgress}
        prefersReducedMotion={prefersReducedMotion}
        isMobile={isMobile}
      />

      <div className="max-w-5xl mx-auto px-6 py-24 md:py-32 relative z-10">
        <div className="flex flex-col items-center text-center">
          <div className="space-y-8 mb-10 md:mb-14">
            <h2
              className={`text-4xl sm:text-5xl md:text-7xl font-light tracking-tight ${isDark ? "text-white" : "text-black"}`}
            >
              <KineticText
                text="Experience"
                mouseX={mouseX}
                mouseY={mouseY}
                windowWidth={windowWidth}
                windowHeight={windowHeight}
                isActive={isTextActive}
                delay={0.2}
                weight={0.8}
                letterClassName="mr-[0.01em]"
                isMobile={isMobile}
              />
              <br />
              <KineticText
                text="the future"
                className="font-medium"
                mouseX={mouseX}
                mouseY={mouseY}
                windowWidth={windowWidth}
                windowHeight={windowHeight}
                isActive={isTextActive}
                delay={0.4}
                weight={1}
                letterClassName="mr-[0.01em]"
                isMobile={isMobile}
              />
            </h2>

            <motion.p
              className={`text-lg md:text-xl max-w-2xl mx-auto ${isDark ? "text-gray-400" : "text-gray-600"}`}
              initial={{ opacity: 0, y: 20 }}
              animate={{
                opacity: 1,
                y: 0,
                transition: {
                  duration: 0.8,
                  ease: cubicBezier(0.16, 1, 0.3, 1),
                  delay: 0.6,
                },
              }}
            >
              Join the pioneers who are already shaping tomorrow's digital landscape with our revolutionary platform.
            </motion.p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6">
            <MagneticButton3D
              className="rounded-full"
              delay={0.8}
              variant="primary"
              icon={<ArrowRight size={16} />}
              isMobile={isMobile}
              href="#get-started"
            >
              Begin your journey
            </MagneticButton3D>

            <MagneticButton3D
              className="rounded-full"
              delay={0.9}
              variant="secondary"
              isMobile={isMobile}
              href="#features"
            >
              Explore features
            </MagneticButton3D>
          </div>

          {/* Social proof */}
          <motion.div
            className="mt-12 md:mt-16 pt-8"
            initial={{ opacity: 0 }}
            animate={{
              opacity: 1,
              transition: {
                duration: 1,
                delay: 1.2,
              },
            }}
          >
            <div className="flex flex-col items-center">
              <div className="flex -space-x-2 mb-3">
                {[1, 2, 3, 4, 5].map((i) => (
                  <UserAvatar key={i} index={i - 1} delay={1.2 + i * 0.1} isDark={isDark} />
                ))}
              </div>
              <motion.p
                className={`text-sm ${isDark ? "text-gray-500" : "text-gray-500"}`}
                initial={{ opacity: 0, y: 10 }}
                animate={{
                  opacity: 1,
                  y: 0,
                  transition: {
                    duration: 0.5,
                    delay: 1.7,
                  },
                }}
              >
                Trusted by 10,000+ companies worldwide
              </motion.p>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Accessibility skip link (visually hidden) */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-white focus:text-black focus:outline-none focus:ring-2 focus:ring-primary"
      >
        Skip to main content
      </a>
    </motion.div>
  );
}