50 lines
2.5 KiB
TypeScript
50 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { BARTENDER_PROFILE } from "@/data/portfolio-data";
|
|
|
|
interface WhatsAppFloatingButtonProps {
|
|
conceptName?: string;
|
|
theme?: "kalkbrenner" | "speakeasy" | "alchemist" | "editorial" | "tropical";
|
|
}
|
|
|
|
export function WhatsAppFloatingButton({
|
|
conceptName = "General",
|
|
theme = "kalkbrenner",
|
|
}: WhatsAppFloatingButtonProps) {
|
|
const message = encodeURIComponent(
|
|
`¡Hola John Caiza! Vi tu portafolio (${conceptName}) y me gustaría consultar disponibilidad y cotización para un evento de coctelería.`
|
|
);
|
|
const waUrl = `https://wa.me/${BARTENDER_PROFILE.whatsapp.replace(/[^0-9]/g, "")}?text=${message}`;
|
|
|
|
const themeClasses = {
|
|
kalkbrenner:
|
|
"hidden sm:flex bg-[#0a0a0a]/95 text-white border border-white/20 hover:border-white hover:bg-white hover:text-black font-mono text-[11px] uppercase tracking-[0.2em] shadow-[0_10px_30px_rgba(0,0,0,0.8)] backdrop-blur-md rounded-none px-4 py-3",
|
|
speakeasy:
|
|
"bg-[#0d0905]/95 text-[#f59e0b] border border-[#f59e0b]/30 hover:border-[#f59e0b] hover:bg-[#f59e0b] hover:text-black font-serif text-xs uppercase tracking-wider shadow-[0_10px_30px_rgba(0,0,0,0.8)] backdrop-blur-md rounded-xl px-4 py-3",
|
|
alchemist:
|
|
"bg-[#02050e]/95 text-[#00f0ff] border border-[#00f0ff]/30 hover:border-[#a3e635] hover:text-[#a3e635] font-mono text-xs uppercase tracking-widest shadow-[0_0_25px_rgba(0,240,255,0.15)] backdrop-blur-md rounded-lg px-4 py-3",
|
|
editorial:
|
|
"hidden sm:flex bg-white/95 text-black border border-black hover:bg-black hover:text-white font-mono text-xs shadow-xl backdrop-blur-md rounded-full px-5 py-3 tracking-wider font-bold",
|
|
tropical:
|
|
"bg-black/80 text-white border border-pink-500/40 hover:border-[#00f2fe] font-mono text-xs uppercase tracking-wider shadow-[0_0_25px_rgba(255,0,122,0.3)] backdrop-blur-md rounded-full px-5 py-3",
|
|
}[theme];
|
|
|
|
return (
|
|
<aside aria-label="Contacto por WhatsApp">
|
|
<a
|
|
href={waUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={`fixed bottom-6 right-6 z-[999] flex items-center gap-2.5 active:scale-[0.97] transition-all duration-200 group ${themeClasses}`}
|
|
title="Consultar disponibilidad con John Caiza"
|
|
>
|
|
<span className="w-1.5 h-1.5 bg-emerald-400 rounded-full shrink-0 group-hover:scale-125 transition-transform" />
|
|
<span className="font-bold">WhatsApp Direct // John Caiza</span>
|
|
<span className="opacity-40 group-hover:opacity-100 group-hover:translate-x-1 transition-all">
|
|
→
|
|
</span>
|
|
</a>
|
|
</aside>
|
|
);
|
|
}
|