export function TopUtilityBar() {
  return (
    <div className="w-full bg-[#f5f5f5] border-b border-[#e8e8e8]">
      <div className="mx-auto flex max-w-[1400px] items-center justify-between px-6 py-1.5 text-xs">
        {/* Domain */}
        <span className="tracking-wide text-[#3d5554]">www.thepetloft.com</span>

        {/* Promo */}
        <div className="flex items-center gap-1.5 font-medium text-[#f2705a]">
          <span><strong className="text-[13px]">☞ 10%  </strong>
           off your first order</span>
           <span>★</span>
           <span><strong className="text-[13px]">☞ 5%  </strong>
           off on all Re-orders over <strong>£30</strong></span>
          <span>★</span>
          <span>Free shipping on orders over <strong>£40</strong></span>
        </div>

        {/* Utility links */}
        <div className="flex items-center gap-5 text-[#3d5554]">
          <button className="flex items-center gap-1.5 transition-colors hover:text-[#1a2e2d]">
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
              <path d="M14.05 2a9 9 0 0 1 8 7.94" />
              <path d="M14.05 6A5 5 0 0 1 18 10" />
            </svg>
            <span>Contact</span>
          </button>

          <div className="h-3 w-px bg-[#ccc]" />

          <button className="flex items-center gap-1.5 transition-colors hover:text-[#1a2e2d]">
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <circle cx="12" cy="12" r="10" />
              <line x1="2" y1="12" x2="22" y2="12" />
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
            </svg>
            <span>EN</span>
            <svg
              width="10"
              height="10"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}
