computer-repair/src/app/components/MobileCallBar.js

import { MessageSquare, Phone } from "lucide-react";
import { links } from "@/lib/site";

// Sticky Call/Text bar on small screens. Layout adds bottom padding to match.
export default function MobileCallBar() {
  return (
    <div className="fixed inset-x-0 bottom-0 z-50 grid grid-cols-2 border-t bg-white md:hidden">
      <a
        href={links.tel}
        className="flex items-center justify-center gap-2 bg-primary py-3 font-semibold text-primary-foreground"
      >
        <Phone aria-hidden="true" className="size-4" />
        Call
      </a>
      <a
        href={links.sms}
        className="flex items-center justify-center gap-2 py-3 font-semibold text-primary"
      >
        <MessageSquare aria-hidden="true" className="size-4" />
        Text
      </a>
    </div>
  );
}