cambios

2026-10-06 02:00:11 -05:00
1 parent 794a659369
commit 5f99b65611
@@ -0,0 +1,121 @@
+'use client';
+import { Icon } from '@iconify/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import type { ThemeProps } from '@/app/(landing)/types/ui';
+import { type Dispatch, type SetStateAction, useState, useEffect } from 'react';
+
+const WHATSAPP_NUMBER = '529984814889';
+const WHATSAPP_MSG = encodeURIComponent('¡Hola!');
+
+interface FloatingButtonsProps extends ThemeProps {
+  setIsNavyBg: Dispatch<SetStateAction<boolean>>;
+}
+
+export const FloatingButtons = ({ setIsNavyBg: _setIsNavyBg }: FloatingButtonsProps) => {
+  const [showTop, setShowTop] = useState(false);
+  const [showBubble, setShowBubble] = useState(false);
+  const toggleBg     = 'color-mix(in srgb, var(--card) 85%, transparent)';
+  const toggleBorder = 'var(--border)';
+  const toggleColor  = '#3b82f6';
+
+  useEffect(() => {
+    const onScroll = () => setShowTop(window.scrollY > 400);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    const t = setTimeout(() => setShowBubble(true), 3000);
+    return () => { window.removeEventListener('scroll', onScroll); clearTimeout(t); };
+  }, []);
+
+  return (
+    <>
+    {/* Scroll to top — izquierda */}
+    {showTop && (
+      <button
+        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        aria-label="Volver arriba"
+        className="fixed bottom-24 left-6 z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
+        style={{
+          background: toggleBg,
+          border: `1px solid ${toggleBorder}`,
+          backdropFilter: 'blur(8px)',
+          cursor: 'pointer',
+          color: toggleColor,
+        }}
+      >
+        <Icon icon="ph:arrow-up" width={16} />
+      </button>
+    )}
+
+    <div
+      className="fixed bottom-6 right-6 z-50 flex flex-col items-center gap-3"
+      aria-label="Acciones rápidas"
+    >
+      {/* WhatsApp + bubble wrapper */}
+      <div style={{ position: 'relative' }}>
+        <AnimatePresence>
+        {showBubble && (
+          <motion.div
+            initial={{ opacity: 0, y: 10, scale: 0.92 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 6, scale: 0.95 }}
+            transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
+            style={{
+              position: 'absolute',
+              bottom: 'calc(100% + 10px)',
+              right: 0,
+              filter: 'drop-shadow(0 4px 16px rgba(0,0,0,0.12))',
+            }}>
+            <div style={{
+              background: '#fff',
+              borderRadius: 16,
+              padding: '12px 36px 12px 16px',
+              fontSize: 14,
+              fontWeight: 500,
+              color: '#1a1a2e',
+              whiteSpace: 'nowrap',
+              position: 'relative',
+            }}>
+              ¡Hola! ¿En qué podemos ayudarte?
+              <button
+                onClick={() => setShowBubble(false)}
+                aria-label="Cerrar"
+                style={{
+                  position: 'absolute', top: 6, right: 8,
+                  width: 20, height: 20, cursor: 'pointer', fontSize: 10,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  color: '#888',
+                }}
+              >✕</button>
+            </div>
+            {/* tail apuntando al botón */}
+            <div style={{
+              width: 14, height: 10,
+              background: '#fff',
+              clipPath: 'polygon(0 0, 100% 0, 100% 100%)',
+              position: 'absolute',
+              bottom: -9,
+              right: 16,
+            }} />
+          </motion.div>
+        )}
+        </AnimatePresence>
+
+        {/* WhatsApp */}
+        <a
+          href={`https://wa.me/${WHATSAPP_NUMBER}?text=${WHATSAPP_MSG}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Contactar por WhatsApp"
+          className="flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95"
+          style={{ background: '#25D366' }}
+        >
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="white" aria-hidden="true">
+            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
+            <path d="M12 0C5.373 0 0 5.373 0 12c0 2.122.554 4.112 1.523 5.837L.057 23.882a.5.5 0 0 0 .611.61l6.109-1.457A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.75a9.721 9.721 0 0 1-4.965-1.362l-.356-.211-3.687.88.897-3.583-.231-.369A9.718 9.718 0 0 1 2.25 12C2.25 6.615 6.615 2.25 12 2.25S21.75 6.615 21.75 12 17.385 21.75 12 21.75z"/>
+          </svg>
+        </a>
+      </div>
+
+    </div>
+    </>
+  );
+};