122 lines
5.2 KiB
TypeScript
122 lines
5.2 KiB
TypeScript
'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>
|
|
</>
|
|
);
|
|
};
|