import Link from "next/link";
import { Phone, MessageCircle, FileText } from "lucide-react";

export function MobileCtaBar({
  phoneRaw,
  whatsappRaw,
  whatsappMessage,
}: {
  phoneRaw: string;
  whatsappRaw: string;
  whatsappMessage?: string | null;
}) {
  const wa = whatsappRaw.replace(/[^\d]/g, "");
  const waHref = `https://wa.me/${wa}${
    whatsappMessage ? `?text=${encodeURIComponent(whatsappMessage)}` : ""
  }`;

  return (
    <div className="fixed inset-x-0 bottom-0 z-30 grid grid-cols-3 border-t border-[var(--border)] bg-white shadow-[0_-4px_20px_rgba(15,44,92,0.1)] sm:hidden">
      <a
        href={`tel:${phoneRaw}`}
        className="flex flex-col items-center gap-1 px-2 py-3 text-[11px] font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
      >
        <Phone className="size-5" />
        Ara
      </a>
      <a
        href={waHref}
        target="_blank"
        rel="noopener noreferrer"
        className="flex flex-col items-center gap-1 border-x border-[var(--border)] bg-[#25D366] px-2 py-3 text-[11px] font-medium text-white"
      >
        <MessageCircle className="size-5" />
        WhatsApp
      </a>
      <Link
        href="/iletisim"
        className="flex flex-col items-center gap-1 px-2 py-3 text-[11px] font-medium text-[var(--navy)] hover:bg-[var(--navy-50)]"
      >
        <FileText className="size-5" />
        Teklif Al
      </Link>
    </div>
  );
}