"use client";

import { CalendarCheck, MessageCircle, Phone } from "lucide-react";
import { useSiteProfile } from "@/components/layout/useSiteProfile";

export function FloatingContact() {
  const profile = useSiteProfile();
  const whatsAppNumber = (profile.primaryPhone || "").replace("+", "");

  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 sm:bottom-6 sm:right-6">
      <a
        href={`tel:${profile.primaryPhone}`}
        aria-label="Call primary number"
        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-primary text-white shadow-soft transition hover:bg-primary-deep"
      >
        <Phone className="h-5 w-5" />
      </a>
      <a
        href={`tel:${profile.secondaryPhone}`}
        aria-label="Call secondary number"
        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-navy-deep text-white shadow-soft transition hover:bg-navy"
      >
        <Phone className="h-5 w-5" />
      </a>
      <a
        href={`https://wa.me/${whatsAppNumber}`}
        aria-label="Message on WhatsApp"
        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-ev text-white shadow-soft transition hover:bg-ev-deep"
      >
        <MessageCircle className="h-5 w-5" />
      </a>
      <a
        href="/book-test-ride"
        aria-label="Book test ride"
        className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-white text-primary shadow-card ring-1 ring-border transition hover:bg-primary-soft"
      >
        <CalendarCheck className="h-5 w-5" />
      </a>
    </div>
  );
}