import { useLang } from "@/lib/language";
import { Phone } from "lucide-react";

export function StickyCallBar() {
  const { t } = useLang();
  return (
    <div
      id="support"
      className="fixed inset-x-0 bottom-0 z-50 border-t-2 border-ink bg-sand/95 p-3 backdrop-blur-md md:p-4"
    >
      <div className="mx-auto flex max-w-6xl items-center gap-3 md:gap-6">
        <div className="hidden flex-col md:flex">
          <span className="text-[10px] font-bold uppercase tracking-widest text-ink/50">
            {t("Assistance 24/7", "النجدة 24/7")}
          </span>
          <span className="text-sm font-bold text-ink">
            {t("Un opérateur vous répond immédiatement", "مشغل يرد عليك فورًا")}
          </span>
        </div>
        <div className="ms-auto flex items-center gap-2">
          <span className="inline-block size-2 animate-pulse rounded-full bg-terracotta" />
          <span className="text-[10px] font-bold uppercase tracking-widest text-ink/60 md:hidden">
            {t("24 / 7", "24/7")}
          </span>
        </div>
        <a
          href="tel:+213555000000"
          className="flex flex-1 items-center justify-center gap-3 bg-ink px-4 py-3 font-display text-xl tracking-wider text-brand shadow-[4px_4px_0_0_hsl(45_95%_50%)] transition-transform active:translate-x-[2px] active:translate-y-[2px] active:shadow-none md:flex-none md:px-8 md:text-2xl"
        >
          <Phone className="size-5" />
          <span>0555 00 00 00</span>
        </a>
      </div>
    </div>
  );
}