"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>
  );
}