"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, useMotionValue, useSpring, useTransform, AnimatePresence } from "framer-motion"; import { Quote, Star, MousePointer2, ExternalLink } from "lucide-react"; const TESTIMONIALS = [ { id: 1, content: "The V3 component architecture didn't just solve our UI problems—it redefined our entire development workflow. The performance gains are measurable and the aesthetic is unmatched.", author: "Julian Vance", role: "CTO @ Quantum", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=300&h=300", }, { id: 2, content: "Design consistency at scale is a nightmare. This suite is the first time our engineering and design teams have spoken the exact same language without friction.", author: "Sarah Jenkins", role: "Lead Designer @ Studio", avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=300&h=300", }, { id: 3, content: "Accessibility and high-end animations rarely go hand-in-hand. This library manages to deliver both with surgical precision. It's truly enterprise-grade.", author: "Marcus Thorne", role: "Senior Engineer @ Tech", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=300&h=300", } ]; export default function MagneticNarrativeReveal() { const [active, setActive] = useState(0); const [isMounted, setIsMounted] = useState(false); const containerRef = useRef(null); // 1. Mouse Tracking Hooks (SIEMPRE al inicio) const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const springX = useSpring(mouseX, { stiffness: 100, damping: 25 }); const springY = useSpring(mouseY, { stiffness: 100, damping: 25 }); // 2. Transform Hooks (Declarados fuera del JSX para cumplir las reglas) const rotateX = useTransform(springY, [-0.5, 0.5], ["10deg", "-10deg"]); const rotateY = useTransform(springX, [-0.5, 0.5], ["-10deg", "10deg"]); const bgX1 = useTransform(springX, [-0.5, 0.5], [-50, 50]); const bgY1 = useTransform(springY, [-0.5, 0.5], [-50, 50]); const bgX2 = useTransform(springX, [-0.5, 0.5], [50, -50]); const bgY2 = useTransform(springY, [-0.5, 0.5], [50, -50]); useEffect(() => { setIsMounted(true); }, []); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const { left, top, width, height } = containerRef.current.getBoundingClientRect(); const x = (e.clientX - left) / width; const y = (e.clientY - top) / height; mouseX.set(x - 0.5); mouseY.set(y - 0.5); }; // 3. Return condicional después de todos los Hooks if (!isMounted) return

; return (

{/* BACKGROUND DECORATIVE ELEMENTS */}

{/* INTERACTIVE AVATAR STACK */}

{TESTIMONIALS.map((item, idx) => ( setActive(idx)} className={`relative flex items-center gap-6 p-6 rounded-[2rem] border transition-all duration-500 group ${ active === idx ? "bg-zinc-900 dark:bg-white border-zinc-900 dark:border-white shadow-2xl scale-105 z-20" : "bg-white/50 dark:bg-zinc-900/30 border-zinc-200 dark:border-white/5 hover:border-zinc-300 dark:hover:border-white/10 grayscale hover:grayscale-0" }`} whileHover={{ x: 10 }} >

{item.author} {item.role}

{active === idx && ( )} ))}

Select Narrative to Focus

{/* DYNAMIC TEXT CANVAS */}

{TESTIMONIALS[active].content.split(" ").map((word, i) => ( {word} ))}

{[...Array(5)].map((_, i) => ( ))}

Source Verified

{/* HUD FOOTER */}

Interactive Model PHYSICS: MAGNETIC_REVEAL_V3

); }