import Link from "next/link";
import type { TopBarData, HeaderData } from "@/types/navigation";

interface MobileBottomBarProps {
  topBarData: TopBarData;
  ctaData: HeaderData["cta"];
}

/**
 * The live site's `ul.f-fixed` — a 5-icon bar fixed to the bottom of the
 * viewport on every page, mobile/tablet only (`display:none` above the
 * same breakpoint the desktop nav takes over at). Verified against the
 * live install's own rendered markup/`common.css` (`.f-fixed li{width:20%}`
 * for the 5 real icons; `.Order_Now i` is a raised circle via
 * `margin-top:-22px` + white border, not a separate asset).
 *
 * Two of the five real targets aren't reproducible honestly: `Call Back`
 * opens a callback-request modal (`#callback-form`) this app has no real
 * backend for, and `Live Chat` opens a Zopim widget this app doesn't
 * integrate. Both link to the same real contact channels this app already
 * uses elsewhere for the equivalent action (`tel:` and the real WhatsApp
 * chat link) instead of wiring up a fake modal/widget.
 */
export function MobileBottomBar({ topBarData, ctaData }: MobileBottomBarProps) {
  return (
    <nav
      className="lg:hidden fixed bottom-0 left-0 right-0 z-40 flex items-end justify-between bg-white"
      style={{ boxShadow: "0px -1px 10px -1px rgba(0,0,0,0.35)" }}
      aria-label="Quick actions"
    >
      <Link href="/plagiarism-checker" className="w-1/5 flex flex-col items-center gap-0.5 pt-2 pb-1.5 text-[9px] uppercase text-black">
        <svg width="22" height="19" viewBox="0 0 18.421 17.999" fill="#636363">
          <path d="M17.948,6.777a.479.479,0,0,0-.477.477v12.67a2.429,2.429,0,0,1-2.427,2.427H3.381A2.429,2.429,0,0,1,.955,19.924V6.256H14.929V18.547a.478.478,0,0,0,.955,0V5.778a.479.479,0,0,0-.477-.477H.477A.479.479,0,0,0,0,5.778V19.92A3.383,3.383,0,0,0,3.381,23.3H15.04a3.383,3.383,0,0,0,3.381-3.381V7.254a.473.473,0,0,0-.473-.477Z" transform="translate(0 -5.14)" />
          <path d="M10.407,4.335a.478.478,0,1,0,0-.955H0a.478.478,0,0,0,0,.955Z" transform="translate(3.661 -2.87)" />
          <path d="M10.407,.955H0a.477.477,0,1,1,0-.955h10.4a.478.478,0,0,1,0,.955Z" transform="translate(3.661 12)" />
        </svg>
        <span>Plagiarism</span>
      </Link>

      <Link href="/pricing" className="w-1/5 flex flex-col items-center gap-0.5 pt-2 pb-1.5 text-[9px] uppercase text-black">
        <svg width="19" height="19" viewBox="0 0 17.746 17.746" fill="#636363">
          <path d="M19.024,20.873H12a.366.366,0,0,0,.37-.37v-.37h6.655a1.108,1.108,0,0,0,1.109-1.109V12.37h.37a.366.366,0,0,0,.37-.37v7.024A1.849,1.849,0,0,1,19.024,20.873Z" transform="translate(-3.127 -3.127)" />
          <path d="M20.873,1.849V8.873a.366.366,0,0,0-.37-.37h-.37V1.849A1.108,1.108,0,0,0,19.024.739H12.37V.37A.366.366,0,0,0,12,0h7.024A1.849,1.849,0,0,1,20.873,1.849Z" transform="translate(-3.127)" />
          <path d="M0,1.849A1.849,1.849,0,0,1,1.849,0H8.873A.366.366,0,0,0,8.5.37v.37H1.849A1.108,1.108,0,0,0,.739,1.849V8.5H.37a.366.366,0,0,0-.37.37Z" />
          <path d="M.739,19.024a1.108,1.108,0,0,0,1.109,1.109H8.5v.37a.366.366,0,0,0,.37.37H1.849A1.849,1.849,0,0,1,0,19.024V12a.366.366,0,0,0,.37.37h.37Z" transform="translate(0 -3.127)" />
          <rect x="3" y="3" width="12" height="12" rx="1" fill="none" stroke="#636363" strokeWidth="1" />
        </svg>
        <span>Pricing</span>
      </Link>

      <a
        href={ctaData.orderNowUrl}
        className="w-1/5 flex flex-col items-center gap-0.5 pt-2 pb-1.5 text-[9px] uppercase text-[#3180f5] font-semibold"
      >
        <svg width="30" height="30" viewBox="0 0 38 38" className="-mt-[22px] rounded-full border-[7px] border-white" style={{ boxShadow: "0 -5px 7px -5px #797979" }}>
          <path
            d="M19,0A19,19,0,1,0,38,19,19,19,0,0,0,19,0Zm9.135,20.462H20.462V28.5a1.462,1.462,0,1,1-2.923,0V20.462H9.865a1.462,1.462,0,1,1,0-2.923h7.673V10.231a1.462,1.462,0,1,1,2.923,0v7.308h7.673a1.462,1.462,0,0,1,0,2.923Z"
            fill="#3180f5"
          />
        </svg>
        <span>Order Now</span>
      </a>

      <a href={`tel:${topBarData.phone}`} className="w-1/5 flex flex-col items-center gap-0.5 pt-2 pb-1.5 text-[9px] uppercase text-black">
        <svg width="19" height="19" viewBox="0 0 17.821 17.754" fill="#636363">
          <path d="M4.5,11.8a18.833,18.833,0,0,0,6.265,4.907,9.75,9.75,0,0,0,3.505,1.038c.089,0,.165.007.25.007a2.9,2.9,0,0,0,2.251-.968.08.08,0,0,0,.015-.019,9.477,9.477,0,0,1,.71-.736c.173-.165.35-.338.518-.515A1.775,1.775,0,0,0,18,12.87l-2.211-2.21a1.789,1.789,0,0,0-1.3-.6,1.85,1.85,0,0,0-1.309.592l-1.317,1.317c-.122-.07-.247-.132-.364-.191a4.548,4.548,0,0,1-.4-.221A13.936,13.936,0,0,1,7.774,8.53,8.026,8.026,0,0,1,6.649,6.735c.346-.312.669-.64.983-.96.11-.114.225-.228.338-.342A1.886,1.886,0,0,0,8.58,4.109a1.871,1.871,0,0,0-.611-1.324l-1.1-1.1c-.129-.129-.25-.254-.375-.383C6.255,1.055,6,.8,5.75.566A1.834,1.834,0,0,0,4.453,0,1.888,1.888,0,0,0,3.146.57L1.77,1.946a2.827,2.827,0,0,0-.842,1.81A6.808,6.808,0,0,0,1.439,6.7,17.12,17.12,0,0,0,4.5,11.8Z" transform="translate(-0.92)" />
        </svg>
        <span>Call Back</span>
      </a>

      <a
        href={topBarData.whatsappUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="w-1/5 flex flex-col items-center gap-0.5 pt-2 pb-1.5 text-[9px] uppercase text-black"
      >
        <svg width="19" height="19" viewBox="0 0 17.751 17.751" fill="#636363">
          <path d="M15.192,2.608A8.89,8.89,0,0,0,2.061,14.561,3.4,3.4,0,0,1,.638,16.14a.834.834,0,0,0,.238,1.572,4.594,4.594,0,0,0,.7.052,5.307,5.307,0,0,0,3.128-1.037A8.89,8.89,0,0,0,15.192,2.608ZM14.474,14.46a7.874,7.874,0,0,1-9.556,1.226.506.506,0,0,0-.617.079.167.167,0,0,0-.042.03,4.34,4.34,0,0,1-2.68.955h0a4.978,4.978,0,0,0,1.526-2.026.519.519,0,0,0,.027-.327.528.528,0,0,0-.124-.285,7.874,7.874,0,1,1,11.468.349Z" transform="translate(-0.039 0.161)" />
        </svg>
        <span>Live Chat</span>
      </a>
    </nav>
  );
}