

<!--

    Author: Yong Jun
    Template Version: 1.0.9
    Created At: Jan 8 2026
    Last Updated: 2026-07-06
    changelog:
    - v1.0.9 (2026-07-06, in-place): showMessage() icon centering — render the injected Material Symbol
      as a block with line-height:1 (was inline, sitting on the baseline and appearing high in the
      cream badge). Pairs with the same fix in head_v1.0.6. Visual-only.
    - v1.0.9 (2026-07-02, in-place): #canvasMessage overlay z-[1050] -> z-[2000] — page modals
      (addresses #addressModal/#deleteModal, my-orders pay chooser) also sit at z-[1050] and appear
      LATER in the DOM, so an equal-z showMessage rendered BEHIND an open modal (same fix as
      head_v1.0.6). Alert layer must top everything.
    - v1.0.9 (2026-06-22): i18n the #canvasMessage CLOSE button — static "Close" -> server-side
      OK (active-language, CSS still uppercases). Dropped the
      dead data-lang="M00111" (legacy translations[] applier no longer wired on these pages). Pairs
      with sharejs_v1.0.6 (window.t bridge) + general_v3.0.3.js (modal title via window.t). Markup
      otherwise byte-identical to v1.0.8.
    - v1.0.8 (2026-06-18, in-place): Themed the #canvasMessage success/error modal to the MrFlower
      brand (was generic): card -> rounded-[20px] + token border/bg + soft shadow; Close button
      gray -> olive var(--signin-btn-bg-color) square uppercase; close-icon hover blue -> var(--primary-color).
      Pairs with general_v3.0.2.js showMessage() icon colors now reading --success-color/--warning-color
      (token + hex soft-fallback). Modal is what verify-otp shows on verify success/failure.
      STANDARDIZED (3rd pass, /ui-ux-pro-max): tightened to a centered max-w-[420px] alert card (was
      40vw), brand ink scrim rgba(42,40,32,0.55) (was black/80), spring entrance (vo-modal-pop, 0.24s,
      reduced-motion guarded), consistent px-8 spacing, comfortable min-w-[160px] CLOSE, focus-visible
      olive rings on both close affordances + cursor-pointer. All showMessage hooks preserved.
      CONTENT brand idiom (2nd pass): #canvasIcon is now a cream circular badge (60px, #F0EDD0) with
      the injected Material Symbol shrunk 54px->30px via scoped !important to fit; #canvasTitle is
      serif Quinstory olive (was bold-black); message uses --primary-text-color. Matches the
      verify-otp / reset-password modal badges.
    - v1.0.8 (2026-06-18): Redesigned the #toast-container .toast to the MrFlower brand (replaces the
      bootstrap-green toast). success accent -> var(--color-brand-primary) #6B6437 (olive); error ->
      var(--error-color); warning amber. Icon now sits in a soft CREAM circular badge
      (.toast-left = 34px round, --color-bg-cream-subtle bg). Width is CONTENT-FIT and capped to
      min(400px, 100vw-40px) so it can NEVER overflow the viewport right edge (fixes the prior
      off-alignment). Radius 14px, warm olive-tinted shadow, msg weight 500. Spring entry
      (translateY/X+scale, cubic-bezier), exit faster than enter, prefers-reduced-motion honored.
      Container gets role=status aria-live=polite (a11y). STRUCTURE UNCHANGED
      (.toast/.toast-left/center/right/progress + .show/.hide/.success/.error/.warning) so
      general_v3.0.2 showToast() is unaffected. Forked from head_v1.0.7. Consumers: product-detail.php,
      favourite.php (others remain on v1.0.7 until rolled forward).
      [2026-06-18 follow-up] Toast repositioned + recolored (operator request). Position:
      TOP-RIGHT (top:20px; align-items:flex-end), slides in from the top-right. Color: now
      GREEN-dominant — solid --color-brand-primary (#6B6437 olive) field, white text/close,
      translucent-white icon badge, white progress bar. error/warning override the field
      (red / amber) to stay semantic. CSS-only; structure + showToast() contract unchanged.
      Applies to both consumers identically.
    - v1.0.7 (2026-06-15): SEO meta block reads FLAT $seoData['key'] instead of the legacy nested
      $seoData['key'][0]['text']. Aligns member with the centralized SEO pipeline
      (class.general_v2.0.x loadSeoData + build-seo.php generated seo.php both emit flat strings)
      and the seller head (flat since head_v1.0.3). Forked from head_v1.0.6 — ONLY the 28 SEO echoes
      changed; canvasMessage modal, toast mount + styles, and CSS links are byte-identical. Consumers
      must set $seoData['key'] as flat scalars (e.g. product-detail.php v1.0.17). reset-password.php
      stays on head_v1.0.6 (no $seoData assignment → renders empty either way).
    - v1.0.6 (2026-06-10): showToast() mount point. Adds a pre-rendered
      <div id="toast-container"> after #canvasMessage + a scoped <style> with the
      .toast component rules (ported from seller/css/main_v1.0.1.css — member's
      main.min.css only carries the legacy toastr classes, not this component).
      Fixes: general_v3.0.2 showToast() does document.getElementById('toast-container')
      .appendChild() with NO null guard — on member pages the container never existed,
      so any success callback calling showToast() (e.g. reset-password sendResetCode)
      THREW, which also skipped jQuery's complete handler, leaving every <button>
      disabled (ajaxSend disables all buttons during a request and re-enables them in
      complete). Forked from head_v1.0.5 (otherwise unchanged).
    - v1.0.5 (2026-06-05): centered the #canvasMessage modal — overlay gains items-center
      justify-center (active once showMessage adds `flex`); top offsets (pt-10 / mt-10) dropped,
      so the popup sits dead-center instead of top-aligned. Forked from head_v1.0.4 (otherwise
      unchanged). Pairs with general_v3.0.2 (Tailwind showMessage) via sharejs_v1.0.4.
    - Use tailwind.ss
    - Not using bootstrap, custom_v1.0.0.css and general_v1.0.0.css
    - Updated canvas message
    - 2026-05-21: Wired theme_member_v1.0.0.css (V6 brand tokens + Tier-2/Tier-3
                  helpers including .si-* for sign-in) + Inter Google Fonts
                  (weights 400-900). Affects consumers: index.php, product.php,
                  index-shop.php, index-new.php, sign-in.php. Pages on the older
                  member/head.php chain (homepage.php, sign-up.php, checkout.php,
                  etc.) still load the legacy theme_v1.0.0.css and are NOT yet
                  on the new palette.
    - 2026-05-28: Added <link> to /css/theme_v1.0.0.css so pages on the
                  Tailwind+tokens paradigm can read project-wide palette
                  tokens (--primary-text-color, --btn-primary-bg-color,
                  --input-bg-color, etc.) via arbitrary-value syntax:
                      bg-[var(--btn-primary-bg-color)]
                      text-[var(--primary-text-color)]
                  theme_member_v1.0.0.css still loads (after theme_v1.0.0)
                  for pages still on the .si-* / .gs-* class system. Editing
                  theme_v1.0.0.css now changes the palette for any page on
                  the new paradigm. In-place edit (no version bump) —
                  sign-in.php is the first page on the new paradigm and
                  fresh project means no other live consumer is on a newer
                  head version.
    - 2026-05-28: Removed <link> to /css/theme_member_v1.0.0.css and deleted
                  the file. Audit showed all .si-* / .gs-* classes and
                  --gs-* tokens are unreferenced across the 5 pages on
                  head_v1.0.4 (index, index-shop, product, index-new,
                  sign-in). The only living dependency was the global
                  html/body baseline (cream bg + ink text + Inter font),
                  reproduced here via Tailwind utility classes on the
                  <html> tag (bg/color/font cascade down to body).
                  Values stay V6-design-hex for now; can be promoted to
                  theme_v1.0.0.css tokens later if a wider palette flip
                  is wanted.
-->
<!DOCTYPE html>

<html lang="en" class="bg-[#F4F1EA] text-[#1B1F2A] font-sans">
<!-- begin::Head -->
<head>

	<meta charset="utf-8"/>
    <title>Contact Us — Mr Flower</title>
    <link rel="shortcut icon" href="/images/project/MF-Logo-tm-ori-fav.webp" />
    <meta name="description" content="Get in touch with Mr Flower — find our address, phone and email, or send us a message and we'll be in touch soon.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr Flower">
    <link rel="canonical" href="https://www.mrflower.com.my/contact-us">
    <meta property="og:title" content="Contact Us — Mr Flower">
    <meta property="og:description" content="Get in touch with Mr Flower — find our address, phone and email, or send us a message and we'll be in touch soon.">
    <meta property="og:url" content="https://www.mrflower.com.my/contact-us">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Mr Flower">
    <meta property="og:locale" content="en_MY">
    <meta property="og:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:video" content="">
    <meta property="og:video:width" content="">
    <meta property="og:video:height" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mr Flower — Same-Day Flower Delivery in Klang Valley">
    <meta name="twitter:description" content="Fresh, handcrafted flower bouquets with same-day delivery across the Klang Valley. Mr Flower — crafted with love and care for every moment.">
    <meta name="twitter:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta name="twitter:site" content="">
    <meta name="twitter:creator" content="">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="">
    <meta name="robots" content="">
    <!-- SEO Meta - End -->

   <link href="/css/style.css?v=1783607734" rel="stylesheet" type="text/css" />
   <link rel="preload" href="/css/fonts/googleIcon.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/css/main_v1.0.0.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript>
      <link rel="stylesheet" href="/css/main_v1.0.0.css">
   </noscript>

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <!--
     theme_v1.0.0.css — project-wide palette tokens (--primary-text-color,
     --btn-*-color, --input-*-color, …). Pages on the Tailwind+tokens paradigm
     read these via arbitrary values: bg-[var(--btn-primary-bg-color)]
   -->
   <link href="/css/theme_v1.0.0.css?v=1783479160" rel="stylesheet" type="text/css">
</head>
<!-- end::Head -->
<div id="canvasLoader" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-50">
    <div id="canvasLoaderContainer" class="flex items-center justify-center">
        <span class="material-symbols-outlined animate-spin text-9xl text-white" style="font-size:70px;">
            progress_activity
        </span>
    </div>
</div>

<div class="fixed inset-0 z-[2000] hidden items-center justify-center p-5 bg-[rgba(42,40,32,0.55)] outline-none transition-opacity duration-300" id="canvasMessage" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-modal="true" data-keyboard="false" data-backdrop="static">
   <div class="relative mx-auto w-full max-w-[420px] pointer-events-none">
      <div class="vo-modal-pop relative flex w-full flex-col pointer-events-auto rounded-[20px] border border-[color:var(--primary-border-color)] bg-[color:var(--default-bg-color)] shadow-[0_24px_60px_rgba(0,0,0,0.25)] outline-none overflow-hidden">
         <div class="flex items-start justify-end px-4 pt-4">
               <button type="button" class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent text-gray-300 hover:text-[color:var(--primary-color)] hover:bg-black/[0.04] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" id="canvasCloseIconBtn" onclick="closeCanvasModal()" aria-label="Close">
                  <span class="sr-only">Close</span>
                  <i class="material-symbols-outlined" aria-hidden="true">close</i>
               </button>
         </div>
         <div class="relative flex-auto px-8 pb-2 flex flex-col items-center text-center">
               <div id="canvasIcon" class="w-[60px] h-[60px] mx-auto rounded-full bg-[#F0EDD0] flex items-center justify-center"></div>
               <div id="canvasTitle" class="mt-4 text-[length:var(--fs-22,22px)] leading-none font-normal text-[color:var(--primary-color)] font-['Quinstory',Georgia,serif] w-full"></div>
               <div id="canvasAlertMessage" class="mt-2 text-[length:var(--md-text-size,14px)] leading-relaxed text-[color:var(--primary-text-color)]"></div>
         </div>
         <div class="flex flex-wrap items-center justify-center gap-2.5 px-8 pt-5 pb-8 modal-footer">
               <button id="canvasCloseBtn" type="button" class="min-w-[160px] inline-flex items-center justify-center rounded-[6px] bg-[color:var(--signin-btn-bg-color)] px-6 h-12 text-[length:var(--btn-font-size,13px)] font-bold uppercase tracking-[0.06em] text-white hover:bg-[color:var(--signin-btn-hover-bg-color)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" onclick="closeCanvasModal()">
                  OK               </button>
         </div>
      </div>
   </div>
</div>

<!-- showToast() mount point (general_v3.0.2 appendChild's into this with no null guard —
     it must exist on first paint). Component styles scoped here because member's
     main.min.css only carries the legacy toastr classes, not this .toast component
     (rules ported verbatim from seller/css/main_v1.0.1.css / admin_ui_v1.0.2.css). -->
<div id="toast-container" role="status" aria-live="polite" aria-atomic="true"></div>
<style>
/* #canvasMessage icon: showMessage() injects a 54px Material Symbol with an inline font-size.
   Shrink it to sit inside the cream circular badge (#canvasIcon), matching the brand modal idiom
   (verify-otp / reset-password badges). !important overrides the inline style.
   Render the glyph as a block with line-height:1 so it centres geometrically in the flex badge
   instead of sitting on the text baseline (which pushed it visibly high). */
#canvasMessage #canvasIcon { line-height:1; }
#canvasMessage #canvasIcon .material-symbols-outlined { font-size:30px !important; line-height:1 !important; display:block; }

/* #canvasMessage entrance — spring pop+fade, runs each time the modal is shown (showMessage adds
   .flex). Exit is the existing opacity transition. Respects reduced-motion. */
@keyframes vo-modal-pop { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:none; } }
#canvasMessage.flex .vo-modal-pop { animation: vo-modal-pop 0.24s cubic-bezier(0.34,1.3,0.64,1); }
@media (prefers-reduced-motion: reduce) { #canvasMessage.flex .vo-modal-pop { animation: none; } }

/* Toast — MrFlower brand. Content-fit width capped to the viewport so it can
   never overflow the right edge (the old off-alignment bug). Icon sits in a soft
   cream circular badge; spring entry; exit faster than enter. */
/* Container SPANS the full viewport (left:0; right:0) with 20px gutters and
   right-aligns the toast at the TOP edge. Full-width padded box guarantees no
   overflow — the toast physically cannot pass either edge. z-index 9999 keeps
   it above the sticky header. */
#toast-container {
    position: fixed; top: 20px; left: 0; right: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 0 20px; pointer-events: none;
}
/* ID-scoped (#toast-container ...) so these always beat any legacy .toast /
   .toast-success rule (e.g. Metronic main.min.css #1dc9b7 teal) regardless of
   load order — the toast can never render teal or overflow again. */
#toast-container .toast {
    position: relative; display: flex; align-items: center; gap: 2px;
    background: var(--color-brand-primary, #6B6437);
    width: auto; min-width: 0; max-width: min(400px, 100%); box-sizing: border-box;
    padding: 13px 14px; pointer-events: auto; font-size: 14px;
    border: 1px solid var(--color-brand-primary-dark, #4E4A28);
    border-radius: 14px; box-shadow: 0 14px 34px -10px rgba(78,74,40,.45); margin-bottom: 12px;
    overflow: hidden; opacity: 0; transform: translateY(-10px) translateX(14px) scale(.97);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
    backdrop-filter: none; color: #fff;
}
#toast-container .toast.show { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
#toast-container .toast.hide { opacity: 0; transform: translateX(14px) scale(.97); transition: opacity .2s ease, transform .2s ease; }
#toast-container .toast-left  { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 18px; }
#toast-container .toast-center { flex: 1; padding: 0 10px; line-height: 1.45; word-break: break-word; font-size: 14px; font-weight: 500; color: #fff; }
#toast-container .toast-right { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#toast-container .toast-close { cursor: pointer; font-size: 18px; line-height: 1; color: rgba(255,255,255,.7); transition: color .2s; }
#toast-container .toast-close:hover { color: #fff; }
#toast-container .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; opacity: .9; }
/* Green-dominant by default (success). Icon sits in a translucent-white badge on the
   green field; progress bar is white. error/warning override the field to stay semantic. */
#toast-container .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.error   { background: var(--error-color, #FD397A); border-color: #d62a64; }
#toast-container .toast.error   .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.error   .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.warning { background: #B7791F; border-color: #9c6717; }
#toast-container .toast.warning .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.warning .toast-progress { background: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) {
    #toast-container .toast { transition: opacity .2s ease; transform: none; }
    #toast-container .toast.show { transform: none; }
    #toast-container .toast.hide { transform: none; }
}
</style>
<body class="min-h-screen bg-[color:var(--color-bg-white)] text-[color:var(--primary-text-color)] overflow-x-hidden">


<style>
    /* Header promo strip — running/marquee ticker (mirrors the live mrflower.com.my behavior;
       previously rendered static, see v1.0.2/v1.0.13 changelog). Two copies of the message render
       side by side in an inline-flex track (auto-sized to content, so its width is exactly 2x one
       copy); scrolling translateX(-50%) lands exactly on the seam between the two copies, so the
       loop is gapless. */
    .gs-marquee-track { display: inline-flex; white-space: nowrap; animation: gs-marquee 18s linear infinite; }
    .gs-marquee-item { display: inline-block; padding-right: 3rem; }
    @keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .gs-marquee-track:hover { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .gs-marquee-track { animation: none; } }
</style>

<section class="sticky top-0 z-30 w-full bg-[color:var(--default-bg-color)] shadow-[0_2px_6px_rgba(0,0,0,0.06)]">

    <!-- Announcement / promo strip — CONFIGURABLE SLOT (no hardcoded/time-bound copy).
         Renders whenever header.promo.text is non-empty. (Was ALSO gated on
         $pageSetting['header_promo_enabled'] — removed in v1.0.13: that check compared a flat
         key against $pageSetting, which is actually shaped {microservice => [setting rows]}
         (class.general_v2.0.4's absorbMsSettingResults()), so it could never be true, and no
         setting named header_promo_enabled exists in any settings source file either — the gate
         was structurally broken from day one, not an unset toggle. To hide the strip now, blank
         out header.promo.text in lang/en.php.)
         Copy -> lang/en.php (header.promo.text). -->
        <div class="w-full overflow-hidden bg-[color:var(--header-promo-bg-color,#007514)] text-[color:var(--header-promo-text-color,#fff)] text-[length:var(--sm-text-size)] py-2 leading-snug">
        <div class="gs-marquee-track">
            <span class="gs-marquee-item">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
            <span class="gs-marquee-item" aria-hidden="true">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
        </div>
    </div>
    
    <div class="max-w-[1380px] mx-auto px-4 sm:px-6 md:px-12 h-[72px] flex items-center gap-3 lg:gap-4">

        <!-- Logo -->
        <a href="/" class="flex-shrink-0 inline-flex items-center no-underline mr-auto lg:mr-0" aria-label="Mr Flower homepage">
            <img src="/images/project/MF-Logo-tm-ori.webp" width="200" height="66" class="h-9 lg:h-[58px] w-auto block" alt="Mr Flower" fetchpriority="high">
        </a>

        <!-- Desktop nav (centered) -->
        <nav class="hidden lg:flex items-center gap-7 mx-auto">
            <a href="/" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Home</a>
            <a href="/products" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
            <a href="/about-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
            <a href="/contact-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
            <a href="/track-order" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        </nav>

        <!-- Right icons -->
        <div class="flex items-center gap-1 lg:gap-2 flex-shrink-0">

            <!-- Search (icon toggles the input row below) -->
            <button type="button" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Search products"
                    aria-controls="headerSearch" onclick="toggleHeaderSearch(event)">
                <span class="material-symbols-outlined" aria-hidden="true">search</span>
            </button>

            <!-- Account: profile dropdown when logged in, Sign In + Sign Up when anon (master auth/anon pattern) -->
                            <a href="/sign-in" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Sign In">
                    <span class="material-symbols-outlined" aria-hidden="true">person</span>
                </a>
            
            <!-- Favourite (before Cart — per design action order). Wrapped in a hidden/lg:flex
                 container (NOT a class on the <a>, because $gsIconBtn carries inline-flex which
                 would override `hidden`) so it leaves the mobile action row entirely, keeping the
                 44px controls inside a 360px viewport. Surfaced as a drawer row instead (below). -->
            <span class="hidden lg:flex">
                <a href="/favourite" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="View favourite products">
                    <span class="material-symbols-outlined" aria-hidden="true">favorite_border</span>
                </a>
            </span>

            <!-- Cart -->
                        <a href="/cart" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0 relative" aria-label="View shopping cart">
                <span class="material-symbols-outlined" aria-hidden="true">shopping_cart</span>
                <span id="headerCartBadge" data-cart-badge class="absolute -top-0.5 -right-0.5 bg-[color:var(--btn-primary-bg-color)] text-white rounded-full w-4 h-4 text-[length:var(--fs-10)] flex items-center justify-center font-bold hidden" aria-hidden="true">0</span>
            </a>

            <!-- Mobile hamburger — LAST action icon (per design); toggles the dropdown panel below. -->
            <button type="button" class="lg:hidden inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" onclick="toggleMobileNavPublic(event)"
                    aria-label="Menu" aria-expanded="false" aria-controls="mobileNavPanel">
                <span class="material-symbols-outlined" aria-hidden="true">menu</span>
            </button>
        </div>
    </div>

    <!-- Search input row (toggled by the search icon) -->
    <!-- Search overlay (design Wa9KQo5O .mf-search-*): drops full-width below the header, pill field
         + arrow submit + close ×; slide-down via data-[open]; closes on backdrop / Esc / × . -->
    <div id="headerSearch" data-open="false" role="dialog" aria-label="Search products"
         class="absolute top-full left-0 right-0 z-30 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_18px_40px_rgba(42,40,32,0.13)] -translate-y-full opacity-0 invisible transition-all duration-300 ease-out data-[open=true]:translate-y-0 data-[open=true]:opacity-100 data-[open=true]:visible">
        <div class="max-w-[1280px] mx-auto px-4 lg:px-8 py-6 lg:py-8">
            <div class="flex items-center gap-4">
                <form action="/products" method="get" class="flex-1 min-w-0 flex items-center gap-3 rounded-full border border-[color:var(--primary-border-color)] bg-[color:var(--default-secondary-bg-color)] px-5 py-3 transition-colors focus-within:border-[color:var(--primary-color)]">
                    <span class="material-symbols-outlined text-[color:var(--primary-color)]" aria-hidden="true">search</span>
                    <input type="text" name="q" id="headerSearchInput" autocomplete="off"
                           class="flex-1 min-w-0 bg-transparent border-0 outline-none text-[length:var(--md-text-size)] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                           placeholder="Search for flowers, bouquets…" value="">
                    <button type="submit" class="flex items-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-color)] hover:opacity-70" aria-label="Search products">
                        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
                    </button>
                </form>
                <button type="button" onclick="closeHeaderSearch()" aria-label="Close search"
                        class="shrink-0 w-10 h-10 inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-text-color)] hover:text-[color:var(--primary-color)] hover:rotate-90 transition-transform">
                    <span class="material-symbols-outlined" aria-hidden="true">close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile nav dropdown (design pattern): full-width panel dropping below the header,
         toggled by the hamburger, closed on outside-click / Esc. Hidden by default + always
         hidden at lg (desktop uses the inline nav). Replaces the v1.0.7 left slide-in drawer. -->
    <nav id="mobileNavPanel" aria-label="Menu"
         class="hidden lg:!hidden absolute top-full left-0 right-0 z-40 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_10px_28px_rgba(0,0,0,0.10)] px-6 pb-1">
        <a href="/"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Home</a>
        <a href="/products"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
        <a href="/about-us"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
        <a href="/contact-us"   class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
        <a href="/track-order"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        <!-- Favourite kept in the menu (not the mobile action row) — operator decision (44px touch / no 360 overflow). -->
        <a href="/favourite"    class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Favourite</a>
        <!-- Cart removed from the drawer (v1.0.13f) — redundant: the cart icon is always visible in the
             mobile action row. Favourite stays: its icon is hidden < lg, so the drawer is its only access. -->
        <!-- Logged-in profile block intentionally NOT repeated here: the account-icon dropdown
             (#topBarDropdown, shown on mobile too) already carries name + Account/Orders/Rewards/Sign Out. -->
    </nav>
</section>

<!-- Search backdrop (dims the page below the header while the search overlay is open). -->
<div id="headerSearchBackdrop" onclick="closeHeaderSearch()" class="hidden fixed inset-0 z-20 bg-black/30"></div>

<script>
// Search overlay (v1.0.10) — drops below the header, closes on backdrop / Esc / × .
function openHeaderSearch(e){ if(e) e.preventDefault();
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='true'; if(b) b.classList.remove('hidden'); if(t) t.setAttribute('aria-expanded','true');
  var i=document.getElementById('headerSearchInput'); if(i) setTimeout(function(){ i.focus(); }, 220);
}
function closeHeaderSearch(){
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='false'; if(b) b.classList.add('hidden'); if(t) t.setAttribute('aria-expanded','false');
}
function toggleHeaderSearch(e){ if(e){ e.preventDefault(); e.stopPropagation(); } var o=document.getElementById('headerSearch'); if(!o) return; o.dataset.open==='true' ? closeHeaderSearch() : openHeaderSearch(); }
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeHeaderSearch(); });

// Self-contained mobile-nav toggle (v1.0.8). The legacy openMobileMenuPublic/closeMobileMenuPublic
// were undefined on the live page (general_v1.0.2.js no longer loaded), so define them here +
// keep the names. They drive #mobileNavPanel (show = remove 'hidden').
function openMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.remove('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','true'); } }
function closeMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.add('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','false'); } }
function toggleMobileNavPublic(e){ if(e) e.stopPropagation(); var p=document.getElementById('mobileNavPanel'); if(!p) return; p.classList.contains('hidden') ? openMobileMenuPublic() : closeMobileMenuPublic(); }
document.addEventListener('click', function(e){
    var p=document.getElementById('mobileNavPanel');
    if(!p || p.classList.contains('hidden')) return;
    var hdr=p.parentElement;                       // the sticky <section>
    if(hdr && !hdr.contains(e.target)) closeMobileMenuPublic();
});
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeMobileMenuPublic(); });

// Cart badge live-update — single source of truth for #headerCartBadge. Pages call
// applyHeaderCartBadge(n) after a cart mutation (PDP add, cart.php qty/remove) so the
// count updates without a reload. Hidden when 0. Mirrors the favourite-heart pattern.
window.applyHeaderCartBadge = function(count){
    var el = document.getElementById('headerCartBadge');
    if(!el) return;
    var n = parseInt(count, 10); if(isNaN(n) || n < 0) n = 0;
    el.textContent = n;
    el.classList.toggle('hidden', n <= 0);
};
</script>

<!-- (v1.0.8) The left slide-in drawer + overlay were removed — replaced by #mobileNavPanel inside
     the header section above. $gsMobileLink retained in the bundle list in case other pages reference it. -->

<main id="main-content">

<!-- ============================ Page Title ============================ -->
<div class="text-center bg-[color:var(--color-bg-white)] px-6 pt-9 pb-7">
    <h1 class="font-['Quinstory'] font-normal text-[34px] sm:text-[46px] text-[color:var(--primary-color)]">Contact Us</h1>
</div>

<!-- ============================ Contact Section ============================ -->
<section class="bg-[color:var(--color-bg-white)] pt-12 pb-20">
    <div class="max-w-[1280px] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-start px-[18px] sm:px-8 lg:px-12">

        <!-- Left: Contact form -->
        <div id="contactForm">
            <form onsubmit="return false;">
                <h2 class="font-['Quinstory'] font-normal text-[34px] text-[color:var(--primary-text-color)] mb-7 text-center sm:text-left">Send Us A Message</h2>

                <div class="mb-3.5" data-error-anchor>
                    <div class="flex items-center h-[50px] overflow-hidden rounded-[6px] border border-[color:var(--color-border-warm)] bg-white transition-all focus-within:border-[color:var(--primary-color)]">
                        <input id="name" name="name" type="text" dataType="alphanumericExtend"
                               class="form-control required flex-1 min-w-0 h-full px-4 border-0 outline-none bg-transparent text-[14px] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                               placeholder="Name"
                               errormsg="Full Name cannot be empty">
                    </div>
                </div>

                <!-- Phone — plain number input (no dial-code dropdown) -->
                <div class="mb-3.5" data-error-anchor>
                    <div class="flex items-center h-[50px] overflow-hidden rounded-[6px] border border-[color:var(--color-border-warm)] bg-white transition-all focus-within:border-[color:var(--primary-color)]">
                        <input id="phoneNumber" name="phoneNumber" type="tel" dataType="numeric"
                            class="form-control required flex-1 min-w-0 h-full px-4 border-0 outline-none bg-transparent text-[14px] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                            placeholder="Phone Number"
                            errormsg="Phone Number cannot be empty">
                    </div>
                </div>

                <div class="mb-3.5" data-error-anchor>
                    <div class="flex items-center h-[50px] overflow-hidden rounded-[6px] border border-[color:var(--color-border-warm)] bg-white transition-all focus-within:border-[color:var(--primary-color)]">
                        <input id="email" name="email" type="email" dataType="email"
                               class="form-control required flex-1 min-w-0 h-full px-4 border-0 outline-none bg-transparent text-[14px] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                               placeholder="Email"
                               errormsg="Email Address cannot be empty">
                    </div>
                </div>

                <div class="mb-6" data-error-anchor>
                    <textarea id="message" name="message" rows="4" dataType="text"
                        class="form-control required w-full bg-white border border-[color:var(--color-border-warm)] rounded-[6px] py-[13px] px-4 text-[14px] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)] outline-none resize-y min-h-[110px] focus:border-[color:var(--primary-color)] transition-all"
                        placeholder="Message"
                        errormsg="Message cannot be empty"></textarea>
                </div>

                <button type="button" onclick="verifyContactUs()" aria-label="Send"
                    class="w-full sm:w-auto bg-[color:var(--signin-btn-bg-color)] text-white border-none rounded-[6px] py-3 px-9 text-[14px] font-semibold cursor-pointer transition-colors duration-200 hover:bg-[color:var(--signin-btn-hover-bg-color)]">Send</button>
            </form>
        </div>

        <!-- Right: Contact info card — florist photo (shared sign-in background) + dark overlay -->
        <div class="relative overflow-hidden rounded-[32px_0px_32px_0px] sm:rounded-[120px_0px_120px_0px] min-h-[380px] bg-cover bg-center" style="background-image:url('/images/project/bg-flowers-hero.webp');">
            <div class="absolute inset-0 bg-[color:var(--color-bg-dark)] opacity-[0.62]"></div>
            <div class="relative z-[2] text-white px-7 py-9 sm:px-11 sm:py-12">
                <h3 class="font-['Quinstory'] font-normal text-[34px] text-white mb-8">Contact Info</h3>

                <div class="mb-[22px]">
                    <div class="text-[length:var(--md-text-size)] font-bold text-white/90 mb-[5px]">Address</div>
                    <a href="https://maps.app.goo.gl/FvJDWtvKT3mVR63B7" target="_blank" rel="noopener noreferrer" class="block text-[length:var(--md-text-size)] font-light leading-[1.7] text-white/[0.78] whitespace-pre-line no-underline hover:text-white">22, Jalan Sentosa,
Taman Chi Leong,
42000 Pelabuhan Klang,
Selangor.</a>
                </div>

                <div class="mb-[22px]">
                    <div class="text-[length:var(--md-text-size)] font-bold text-white/90 mb-[5px]">Phone Number</div>
                    <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" class="block text-[length:var(--md-text-size)] font-light leading-[1.7] text-white/[0.78] no-underline hover:text-white">+6016-203 9516</a>
                </div>

                <div class="mb-[22px]">
                    <div class="text-[length:var(--md-text-size)] font-bold text-white/90 mb-[5px]">Email</div>
                    <a href="/cdn-cgi/l/email-protection#b3d0dcddc7d2d0c7f3dec1d5dfdcc4d6c19dd0dcde9ddeca" class="block text-[length:var(--md-text-size)] font-light leading-[1.7] text-white/[0.78] no-underline hover:text-white"><span class="__cf_email__" data-cfemail="a3c0cccdd7c2c0d7e3ced1c5cfccd4c6d18dc0ccce8dceda">[email&#160;protected]</span></a>
                </div>
            </div>
        </div>

    </div>
</section>

</main>


<footer class="w-full bg-[color:var(--footer-bg-color)] text-[color:var(--footer-text-color)]">
    <div class="max-w-[1380px] mx-auto px-6 md:px-12 py-10 md:py-12">

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

            <!-- Brand + social + language switcher -->
            <div>
                <a href="/" class="inline-block no-underline" aria-label="Mr Flower">
                    <img src="/images/project/MF-Logo-tm-ori-white.webp" alt="Mr Flower" width="250" height="82" class="h-[67px] w-auto block">
                </a>
                <div class="flex items-center gap-3 mt-4">
                    <a href="https://www.facebook.com/mrflowermy" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07z"/></svg>
                    </a>
                    <a href="https://www.instagram.com/mrflower_my/?hl=en" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zm0 2.76a5.46 5.46 0 1 0 0 10.92 5.46 5.46 0 0 0 0-10.92zm0 9a3.54 3.54 0 1 1 0-7.08 3.54 3.54 0 0 1 0 7.08zm6.95-9.22a1.27 1.27 0 1 1-2.55 0 1.27 1.27 0 0 1 2.55 0z"/></svg>
                    </a>
                    <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
                    </a>
                </div>

                <!-- Language switcher (globe + EN/中文/BM; ?lang= resolved by entry_v*.php) -->
                <div class="relative inline-block" data-footer-lang>
                    <button type="button" data-footer-lang-trigger class="inline-flex items-center gap-2 mt-6 px-3.5 py-2 rounded-full border border-white/25 bg-transparent cursor-pointer text-[length:var(--sm-text-size)] font-medium text-[color:var(--footer-text-color)] hover:border-white/50"
                            aria-label="Change language" aria-haspopup="true">
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">language</span>
                        <span>EN</span>
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">expand_more</span>
                    </button>
                    <div class="hidden absolute bottom-[calc(100%_+_10px)] left-0 min-w-[184px] bg-[color:var(--default-bg-color)] rounded-xl shadow-[0_-8px_32px_rgba(0,0,0,0.28)] overflow-hidden py-2 z-[9999]" data-footer-lang-menu>
                                                    <a href="/contact-us?lang=en" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] font-bold">EN</a>
                                                    <a href="/contact-us?lang=zh-cn" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] ">中文</a>
                                            </div>
                </div>
            </div>

            <!-- Our Store -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Our Store</h2>
                <a href="/" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Home</a>
                <a href="/products" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Shop</a>
                <a href="/about-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">About Us</a>
            </div>

            <!-- Quick Links -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Quick Links</h2>
                <a href="/contact-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Contact Us</a>
                <a href="/track-order" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Track Order</a>
                <a href="/terms-and-conditions" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Terms &amp; Conditions</a>
                <a href="/privacy-policy" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Privacy Policy</a>
            </div>

            <!-- Get In Touch -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Get In Touch</h2>
                <a href="https://maps.app.goo.gl/FvJDWtvKT3mVR63B7" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">location_on</i>
                    <span class="whitespace-pre-line">22, Jalan Sentosa,
Taman Chi Leong,
42000 Pelabuhan Klang,
Selangor.</span>
                </a>
                <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">call</i>
                    <span>+6016-203 9516</span>
                </a>
                <a href="/cdn-cgi/l/email-protection#096a66677d686a7d49647b6f65667e6c7b276a6664276470" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">mail</i>
                    <span><span class="__cf_email__" data-cfemail="dbb8b4b5afbab8af9bb6a9bdb7b4acbea9f5b8b4b6f5b6a2">[email&#160;protected]</span></span>
                </a>
            </div>

        </div>

        <!-- Bottom bar: copyright + powered-by -->
        <div class="mt-10 pt-5 border-t border-[color:var(--footer-border-color,rgba(255,255,255,.2))] text-center">
            <p class="m-0 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Copyright &copy; 2026 Mr Flower Sdn Bhd (1015322 T). All Rights Reserved.            </p>
            <p class="m-0 mt-1 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Powered by                <a href="https://365production.net/" target="_blank" rel="noopener noreferrer" class="font-bold no-underline text-[color:var(--footer-text-color)] hover:opacity-80">365Production.net</a>
            </p>
        </div>

    </div>

    <!-- Footer language-switcher dropdown: toggle + click-outside (scoped) -->
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    (function () {
        var wrap = document.querySelector('[data-footer-lang]');
        if (!wrap) return;
        var trigger = wrap.querySelector('[data-footer-lang-trigger]');
        var menu    = wrap.querySelector('[data-footer-lang-menu]');
        if (!trigger || !menu) return;
        trigger.addEventListener('click', function (e) { e.stopPropagation(); menu.classList.toggle('hidden'); });
        document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) menu.classList.add('hidden'); });
    })();
    </script>
</footer>

<!-- Floating WhatsApp CTA — matches the live production site (mrflower.com.my): fixed bottom-right,
     opens a WhatsApp chat with the same prefilled message as the footer's own WhatsApp icon/contact
     row above ($_gs_whatsapp, already computed). WhatsApp's brand green (#25D366) is a fixed
     third-party mark, not a themeable design-system color, so it's intentionally hardcoded here
     rather than mapped to a --color-* token. -->
<a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer"
   aria-label="Contact us on WhatsApp"
   class="fixed right-5 bottom-6 z-50 w-14 h-14 rounded-2xl bg-[#25D366] text-white shadow-lg flex items-center justify-center transition-transform hover:scale-105">
    <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
</a>
<!-- Slider captcha (shown only to over-cap submitters). Styles from /css/main_v1.0.0.css (preloaded in head). -->
<div id="overlay" class="fixed inset-0 bg-black/50 hidden z-[9999]" onclick="hideContactCaptcha()"></div>
<div id="showCaptcha" class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 hidden z-[9999] w-full max-w-md px-4">
    <div class="justify-center">
        <div class="slidercaptcha card bg-white">
            <div class="flex justify-between items-center mb-6 bg-transparent">
                <div class="close top-[8px] width-0"></div>
            </div>
            <div class="card-body">
                <div id="captcha"></div>
            </div>
        </div>
    </div>
</div>


<!--
 @author Evan
@version 1.0.4
@created Jan 14 2026

Changelog:
- v1.0.4 (2026-06-11 in-place patch): library.min.js src made absolute (/js/library.min.js). The
  relative path broke on pages served at a deep URL (e.g. product-detail/<slug>/<pid>), resolving
  against the page dir instead of root -> 404. Absolute is correct for all paths. (Same fix
  goshopping applied to its sharejs_v1.0.3 on 2026-06-08.)
- v1.0.4 (2026-06-05): bumped the general loader /share_js/general_v3.0.0.js -> general_v3.0.2.js
  (the Tailwind-modal general for member: closeCanvasModal + Tailwind showMessage/Material Symbols
  + catalog-driven validateInput + error-color). The window.__validationRules block below now
  actually drives field validation (v3.0.2 reads it; v3.0.0 did not). Pair with head_v1.0.5
  (centered Tailwind modal) + member/sign-in.php.
- v1.0.3 (2026-05-28): migrated general.js loader from legacy /js/general_v1.0.2.js
  to canonical /share_js/general_v3.0.0.js. Added filemtime-based ?v= cache busting
  so the browser re-fetches the JS whenever its mtime changes, but reuses the
  cached copy across page refreshes when unchanged. v1.0.2 line kept commented
  out for rollback reference. NOTE: path appears twice on the script line (once
  in src URL, once in filemtime call) — when bumping general_v*.js, update BOTH
  literals. The static URL form is required so the bump-includes skill can
  statically detect the dependency.
- v1.0.2 (2026-05-14 in-place patch): slow-page reporting upgraded to LCP trigger,
  matching seller/sharejs_v1.0.5 mechanism.
  • Bot detection ($isBot) skips Telegram alerts for bot/crawler traffic.
  • PerformanceObserver(__vmLcp) captures Largest Contentful Paint early.
  • collectPerfBreakdown() packs nav/paint/resource summary + top-5-slowest into
    queryTime.perfBreakdown. Backend reads this when simpleDebugLoadTime=0.
  • window.onload trigger changed from `totalPageLoadTime > 3` to LCP/TTFB-based:
      - $pageConfig['slowLcpMs']  default 3000 (Web Vitals "needs improvement")
      - $pageConfig['slowTtfbMs'] default 1500 (backend-regression safety net)
  • val993 header value = LCP-with-fallback (was onload totalPageLoadTime, noisy
    due to slow async resources users don't perceive).
  • Pair with entry_v1.0.2.php's existing `simpleNotification` wiring — set
    `$pageConfig['simpleDebugLoadTime'] => 0` per page for the full breakdown.
- v1.0.1: change the page url to use origin + path name instead of full url for slow page
-->


<!-- begin::Global Config(global config for global JS sciprts) -->
<!--begin:: Standard Member Platform JS -->
<script src="/js/library.min.js?v=2" type="text/javascript"></script>
<!-- <script src="js/general_v1.0.0.js" type="text/javascript"></script> -->
<!-- <script src="js/general_v1.0.2.js" type="text/javascript"></script> --> <!-- v1.0.3: superseded by /share_js/general_v3.0.2.js below -->
<!-- Shared input-validation catalog (window.__validationRules) — same source class.validator.php
     reads, so JS + PHP can't drift. MUST load before general.js. Defensive: {} if file absent.
     (general.js is v3.0.2 here, which READS this catalog to drive validateInput.) -->
<script>
window.__validationRules = {"types":{"text":{"pattern":"^[\\s\\S]*$","check":null,"messageKey":"validation.text","message":"Invalid input."},"alphabet":{"pattern":"^[a-zA-Z]*$","check":null,"messageKey":"validation.alphabet","message":"Please enter letters only."},"alphabetWithSpace":{"pattern":"^[a-zA-Z ]*$","check":null,"messageKey":"validation.alphabetWithSpace","message":"Please enter letters and spaces only."},"alphanumeric":{"pattern":"^[a-zA-Z0-9 ]*$","check":null,"messageKey":"validation.alphanumeric","message":"Please enter letters, numbers and spaces only."},"alphanumericExtend":{"pattern":"^[a-zA-Z0-9&@*._,!?\\-:;\\/\\\\+~^|$%#\"(){}`§¶…†‡•·°™®©€£¥ \\n]*$","check":null,"messageKey":"validation.alphanumericExtend","message":"Only letters, numbers, and common symbols are allowed."},"bcrypt":{"pattern":"^\\$2[aby]\\$\\d{2}\\$[./A-Za-z0-9]{53}$","check":null,"messageKey":"validation.bcrypt","message":"Please enter a valid bcrypt hash (starts with $2y$, $2a$ or $2b$)."},"numeric":{"pattern":"^[-+]?\\d+$","check":null,"messageKey":"validation.numeric","message":"Please enter a whole number."},"decimal":{"pattern":"^[-+]?\\d*\\.?\\d*$","check":null,"messageKey":"validation.decimal","message":"Please enter a valid number."},"email":{"pattern":"^[a-zA-Z0-9_.\\-@]+$","check":"email","messageKey":"validation.email","message":"Please enter a valid email address."},"url":{"pattern":"^[a-zA-Z0-9_~:\\/?\\#.\\[\\]@$&()*+,;=%!'-]*$","check":"url","messageKey":"validation.url","message":"Please enter a valid URL."},"phone":{"pattern":"^[0-9+\\-() ]{0,15}$","check":null,"messageKey":"validation.phone","message":"Please enter a valid phone number."},"emailOrPhone":{"pattern":"^[a-zA-Z0-9_.\\-@+]+$","check":"emailOrPhone","messageKey":"validation.emailOrPhone","message":"Please enter a valid email or phone number."},"date":{"pattern":"^\\d{4}-\\d{2}-\\d{2}$","check":"date","messageKey":"validation.date","message":"Please enter a valid date (YYYY-MM-DD)."},"datetime":{"pattern":"^\\d{4}-\\d{2}-\\d{2}[ T]\\d{2}:\\d{2}(:\\d{2})?$","check":"datetime","messageKey":"validation.datetime","message":"Please enter a valid date and time."}},"constraints":{"required":{"messageKey":"validation.required","message":"This field is required."},"min":{"messageKey":"validation.min","message":"Please enter at least :min characters."},"max":{"messageKey":"validation.max","message":"Please enter no more than :max characters."},"range":{"messageKey":"validation.range","message":"Please enter a value between :min and :max."}}};
</script>
<script src="/share_js/general_v3.0.2.js?v=1782988382" type="text/javascript"></script>
<!-- <script src="/js/responsive-table.js?" type="text/javascript"></script> -->

<script type="text/javascript">

  function changeLanguage(newLanguage) {
    document.cookie = `langCode=${newLanguage}; path=/`;
    window.location.reload();
  }
  
  var pageName = "contact-us.php";
  var isBot    = true;

  // ─── Slow-page debug: LCP observer + perf breakdown ─────────────────────
  // LCP requires PerformanceObserver — not available retroactively. Set up
  // early so we capture the LCP element before window.onload.
  var __vmLcp = 0;
  if (typeof PerformanceObserver !== 'undefined') {
      try {
          new PerformanceObserver(function (list) {
              list.getEntries().forEach(function (e) { __vmLcp = Math.round(e.startTime); });
          }).observe({ type: 'largest-contentful-paint', buffered: true });
      } catch (ex) { /* unsupported — skip */ }
  }

  // Aggregates everything the W3C Performance API tells us about the page load
  // into a compact JSON suitable for inclusion in the slow-page Telegram report.
  function collectPerfBreakdown() {
      try {
          var nav = (performance.getEntriesByType && performance.getEntriesByType('navigation') || [])[0] || {};
          var paint = {};
          (performance.getEntriesByType && performance.getEntriesByType('paint') || []).forEach(function (p) {
              if (p.name === 'first-paint')            paint.fp  = Math.round(p.startTime);
              if (p.name === 'first-contentful-paint') paint.fcp = Math.round(p.startTime);
          });
          if (__vmLcp) paint.lcp = __vmLcp;

          var resourceEntries = (performance.getEntriesByType && performance.getEntriesByType('resource')) || [];
          var byType = {};
          // Dedupe slowest by URL: multiple PerformanceResourceTiming entries for
          // the same URL keep only the entry with the largest duration. byType
          // totals still count every entry.
          var slowestByUrl = {};
          resourceEntries.forEach(function (r) {
              var type = r.initiatorType || 'other';
              if (!byType[type]) byType[type] = { count: 0, durationMs: 0, transferKB: 0 };
              byType[type].count++;
              byType[type].durationMs += r.duration;
              byType[type].transferKB += (r.transferSize || 0) / 1024;

              var prev = slowestByUrl[r.name];
              if (!prev || r.duration > prev.duration) {
                  slowestByUrl[r.name] = { url: r.name, duration: r.duration, type: type };
              }
          });
          var slowest = Object.keys(slowestByUrl).map(function (k) { return slowestByUrl[k]; });
          Object.keys(byType).forEach(function (k) {
              byType[k].durationMs = Math.round(byType[k].durationMs);
              byType[k].transferKB = Math.round(byType[k].transferKB);
          });
          slowest.sort(function (a, b) { return b.duration - a.duration; });

          return {
              nav: {
                  dns:      Math.round((nav.domainLookupEnd      || 0) - (nav.domainLookupStart   || 0)),
                  tcp:      Math.round((nav.connectEnd           || 0) - (nav.connectStart        || 0)),
                  tls:      nav.secureConnectionStart ? Math.round((nav.connectEnd || 0) - nav.secureConnectionStart) : 0,
                  ttfb:     Math.round((nav.responseStart        || 0) - (nav.requestStart        || 0)),
                  download: Math.round((nav.responseEnd          || 0) - (nav.responseStart       || 0)),
                  domParse: Math.round((nav.domInteractive       || 0) - (nav.responseEnd         || 0)),
                  domReady: Math.round( nav.domContentLoadedEventEnd || 0),
                  load:     Math.round((nav.loadEventEnd > 0) ? nav.loadEventEnd : performance.now())
              },
              paint: paint,
              resources: {
                  totalCount: resourceEntries.length,
                  byType:     byType
              },
              slowestResources: slowest.slice(0, 5).map(function (r) {
                  var url = String(r.url || '');
                  if (url.length > 200) url = url.substring(0, 200) + '...';
                  return { url: url, durationMs: Math.round(r.duration), type: r.type };
              })
          };
      } catch (ex) {
          return { error: String(ex) };
      }
  }

  $(document).ready(function() {

    if(pageName == '404') {
      return true
    }
    
    $(".changeLanguage").click(function(){
      changeLanguage($(this).attr("language"));
    });
    
    window.ajaxEnabled = true;
  });

// window.onload = function () { 
//         var pageName = 'contact-us';
//         var phpStartTime = '';
//         var jsStartTime = '';
//         var jsEndTime = new Date().getTime() / 1000;
//         var jsLoadTime = jsEndTime - jsStartTime;
//         var totalPageLoadTime = jsEndTime - phpStartTime;
//         //var phpEndTime = '';
//         //var phpLoadTime = ''; 
//         var queryTime = {"getClientIpInfo":{"totalTime":0.038700000000000005,"count":1,"lastExecuted":"2026-07-11 03:25:43"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":38.7,"executionTimeSec":0.0387,"accumulatedTimeMs":38.7,"accumulatedTimeSec":0.0387,"timestamp":"2026-07-11 03:25:43"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":226.86,"executionTimeSec":0.2269,"accumulatedTimeMs":265.56,"accumulatedTimeSec":0.2656,"timestamp":"2026-07-11 03:25:44"}],"accumulatedTimeMs":265.56,"bootstrapSession":{"totalTime":0.22686,"count":1,"lastExecuted":"2026-07-11 03:25:44"}};
//         var phpLoadTime = queryTime['accumulatedTimeMs']/1000;

//         if(totalPageLoadTime > 3){
//         //if(true){
//             var url = '/contact-us'; 
//             var method = 'POST';
//             var debug = 0; 
//             var bypassBlocking = 0; 
//             var bypassLoading = 0; 
//             var fCallback = '';
//             var formData = {
//                 predefined992: null,
//                 predefined993: null,
//                 val993: [pageName, window.location.origin + window.location.pathname, totalPageLoadTime, queryTime, '216.73.216.193', 'United States'] 
//             };   

//             ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
//         }    
//     };  
  
    window.onload = function () {
        window.ajaxEnabled = true;
        var pageName = 'contact-us';
        // 2026-05-21: auto-fire of `command: 'checkPickup'` disabled.
        // entry_v1.0.2.php's case "checkPickup" branch tries $general->checkPickup()
        // but class.general_v1.0.1.php (the General version v1.0.2 loads) doesn't
        // define that method, causing a PHP fatal 500 on every page load. Until
        // either (a) checkPickup() is re-added to class.general_v1.0.1.php or
        // (b) the case branch in entry_v1.0.2.php is removed, this auto-fire is
        // gated off with `false &&` so the block stays as code (not commented
        // out / deleted) and can be re-enabled by flipping the guard back.
        if(false && pageName != 'Collect Item' && pageName != 'Thank You'){
              var url = '/contact-us' + window.location.search;;
              var method = 'POST';
              var debug = 0;
              var bypassBlocking = 0;
              var bypassLoading = 0;
              var fCallback = promptPickup;
              var formData = {
                  command: 'checkPickup',
                  params: {
                        'storageID': ''
                    }
              };
              ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
	}
	// ─── Slow-page reporting: LCP-based trigger ─────────────────────────
	// Skip bots so Telegram alerts don't spam from Google Ads / crawlers.
	if (isBot) {
	    return;
	}

	var pageName = 'contact-us';
        var phpStartTime = '';
        var jsStartTime = '';
        var jsEndTime = new Date().getTime() / 1000;
        var jsLoadTime = jsEndTime - jsStartTime;
        var totalPageLoadTime = jsEndTime - phpStartTime;
        var queryTime = {"getClientIpInfo":{"totalTime":0.038700000000000005,"count":1,"lastExecuted":"2026-07-11 03:25:43"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":38.7,"executionTimeSec":0.0387,"accumulatedTimeMs":38.7,"accumulatedTimeSec":0.0387,"timestamp":"2026-07-11 03:25:43"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":226.86,"executionTimeSec":0.2269,"accumulatedTimeMs":265.56,"accumulatedTimeSec":0.2656,"timestamp":"2026-07-11 03:25:44"}],"accumulatedTimeMs":265.56,"bootstrapSession":{"totalTime":0.22686,"count":1,"lastExecuted":"2026-07-11 03:25:44"}};
        var phpLoadTime = queryTime['accumulatedTimeMs']/1000;
        // Attach browser-side perf breakdown. Backend reads queryTime.perfBreakdown
        // when simpleDebugLoadTime=0 to render the "Slow Page Load Debug" template.
        try { queryTime.perfBreakdown = collectPerfBreakdown(); } catch (ex) {}

        var debugLoadTime = 0 == 1;
        // ─── Trigger thresholds ─────────────────────────────────────────
        // Primary: LCP (user-perceived page-loaded). Safety: TTFB (catches
        // backend-only regressions). Both overridable per page via
        // $pageConfig['slowLcpMs'] / ['slowTtfbMs'].
        var slowLcpMs  = 3000;
        var slowTtfbMs = 1500;
        var lcpMs      = (queryTime.perfBreakdown && queryTime.perfBreakdown.paint && queryTime.perfBreakdown.paint.lcp)  || 0;
        var ttfbMs     = (queryTime.perfBreakdown && queryTime.perfBreakdown.nav   && queryTime.perfBreakdown.nav.ttfb)   || 0;
        var shouldReport = debugLoadTime && (
            (lcpMs  > 0 && lcpMs  > slowLcpMs)  ||
            (ttfbMs > 0 && ttfbMs > slowTtfbMs)
        );

        if (shouldReport) {
            var url = '/contact-us';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = '';
            // Header "Total Load Time" value = LCP (user-perceived "page loaded")
            // with fallback to totalPageLoadTime. onload is dominated by slow
            // async resources users never wait for.
            var headerLoadTimeSec = (lcpMs > 0) ? (lcpMs / 1000) : totalPageLoadTime;
            var formData = {
                predefined992: null,
                predefined993: null,
                val993: [pageName, window.location.href, headerLoadTimeSec, queryTime, '216.73.216.193', 'United States']
            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
        }

    };

    function promptPickup(data, message){
       if(data.needPickup == '1'){
           showMessage('There is item in the machine, please remove the item before proceed.', 'info', 'info', '', '', '')
           $("#canvasMessage").on("hidden.bs.modal", function () {
               window.location.href=`/collect-item?so_id=${data.so_id}&unlockdoortime=3000`
            });

        }
    }

  // Logout function
  function beforeLogout() {
    // console.log('here');
        // var yes     = 'Yes' /* Yes */
        // var message =  'Are you sure you want to logout?'; /* Are you sure you want to logout */
        // var title   = 'Logout'; /* Logout */
        // var alert   = 'Error!'; /* Error */
        // var canvasBtnArray = Array(yes);

        // showMessage(message, 'info', title, 'sign-out', '', canvasBtnArray);
        // $('#canvas'+yes+'Btn').click(function() {

            var url = '/contact-us';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = successLogout;
            var formData = {
                predefined995: null            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
            
        // });
    }

  function successLogout(){
      window.location.href = '/';
  }
  function verifyIsLoggedIn() {
    const isLoggedIn = "0";

    if (isLoggedIn == "1") {
      return true;
    } else {
      return false;
    }
  }

  function insertUID(){
    var url = '/contact-us';
    var method = 'POST';
    var debug = 0;
    var bypassBlocking = 0;
    var bypassLoading = 0;
    var fCallback = setMemberUIDCookie;
    var formData = {
        predefined991: null,
    };
    window.ajaxEnabled = true;
    ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
  }
    
  function handleSearch(query, done){
      console.log(query, 'query')
      let sortParams = query.sortData;
      const filterQuery = query.filters.filter(item => item?.type != 'dateRange')
      const searchQuery = query.searchTerms
      const pageQuery = query.page ?? 1;

      // filter for dateRange
      let dateRangeArr = [];
      const dateRangeType = query.filters.filter(item => item.type == 'dateRange')
      
      if(dateRangeType.length > 0){
          dateRangeArr = handleDateRangeArr(dateRangeType)
      }

      
      const convert = arr => arr.map(({ field, query }) => ({
          dataName: field,
          dataValue: query
      }));

      const finalArray = [
          ...convert(filterQuery),
          ...convert(searchQuery),
          ...(dateRangeArr.length ? dateRangeArr : [])
      ];
      // console.log(finalArray,'finalArray')

      var formData   = {
          predefined : null,
          predefined1 : null,
          predefined2 : null,
          predefined3 : null,
          val1 : pageQuery,
          val2 : JSON.stringify(finalArray) ?? [],
          val3 : sortParams ?? []
      };

      fCallback = function(data, message) {
          if (typeof done === 'function') {
              done(data, message);
          }
      };

      ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);

  }

  function handleDateRangeArr(dateRange){
      const tsFromObj = dateRange.find(f => f.field === "tsFrom");
      const tsToObj = dateRange.find(f => f.field === "tsTo");
      
      if (!tsFromObj || !tsToObj) return [];

      const tsFromUnix = dateToUnix(tsFromObj.query)
      const tsToUnix = dateToUnix(tsToObj.query)


      return [
          {
              dataName: tsFromObj.identifier,
              dataType: "dateRange",
              dataValue: "custom",
              tsFrom: tsFromUnix.toString(),
              tsTo: tsToUnix.toString()
          }
      ];
  }

  document.addEventListener("DOMContentLoaded", function () {
    // Smooth scroll on anchor click
    const anchors = document.querySelectorAll('a[href^="#"]:not([href="#"])');

    anchors.forEach(anchor => {
      anchor.addEventListener("click", function (e) {
        const hash = this.getAttribute("href");
        const target = document.querySelector(hash);
        if (target) {
          e.preventDefault(); // prevent default anchor jump
          target.scrollIntoView({ behavior: "smooth" });

          // Update the URL without jumping
          history.pushState(null, null, hash);
          const menuToggle = document.getElementById("menuToggle");
            if (menuToggle.checked) {
              menuToggle.checked = false;
            }
        }
      });
    });

    // Smooth scroll on page load (if hash exists)
    const hash = window.location.hash;
    if (hash) {
      const target = document.querySelector(hash);
      if (target) {
        setTimeout(() => {
          target.scrollIntoView({ behavior: "smooth" });
        }, 300); // Delay ensures layout is rendered
      }
    }
  });
  
  function openDeliveryModal() {
    var deliveryModal = $('#deliveryModal');
    var deliveryModalContent = $('#deliveryModalContent');
    
    if (deliveryModal.length) {
        deliveryModal.removeClass('invisible');
        // $('body').css('overflow', 'hidden');
        
        setTimeout(function() {
            deliveryModal.removeClass('opacity-0').addClass('opacity-100');
            deliveryModalContent.removeClass('scale-95').addClass('scale-100');
        }, 10);
    }
  }

  function closeDeliveryModal() {
      var deliveryModal = $('#deliveryModal');
      var deliveryModalContent = $('#deliveryModalContent');
      
      if (deliveryModal.length) {
          deliveryModal.removeClass('opacity-100').addClass('opacity-0');
          deliveryModalContent.removeClass('scale-100').addClass('scale-95');

          setTimeout(function() {
              deliveryModal.addClass('invisible');
              // $('body').css('overflow', '');
          }, 300);
      }
  }

  function selectDeliveryOption(type) {
      var selfPickupOption = $('#selfPickupOption');
      var deliveryOption = $('#deliveryOption');
      
      deliveryModalState.selectedDeliveryType = type;

      if (type === 'self-pickup') {
          selfPickupOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          selfPickupOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          deliveryOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      } else {
          deliveryOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          deliveryOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          selfPickupOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      }
  }

  function saveDeliverySelection() {
      var locationSelect = $('#locationSelect');
      var selectedLocationText = $('#selectedLocation');
      var location = locationSelect.val();

      if (!location || location === '') {
          alert('Please select a location');
          return false;
      }

      // Update header display
      if (selectedLocationText.length) {
          selectedLocationText.text(location);
      }

      // Save to state
      deliveryModalState.selectedLocation = location;

      // Save to localStorage
      saveDeliveryPreferences({
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: location
      });

      // Close modal
      closeDeliveryModal();

      // Trigger callback
      onDeliverySelectionSaved(deliveryModalState.selectedDeliveryType, location);

      return true;
  }

  function saveDeliveryPreferences(preferences) {
      try {
          if (typeof(Storage) !== "undefined") {
              localStorage.setItem('deliveryPreferences', JSON.stringify(preferences));
          }
      } catch (e) {
          console.warn('Could not save to localStorage:', e);
      }
  }

  function loadDeliveryPreferences() {
      try {
          if (typeof(Storage) !== "undefined") {
              var saved = localStorage.getItem('deliveryPreferences');
              if (saved) {
                  var preferences = JSON.parse(saved);
                  
                  // Set delivery type
                  if (preferences.deliveryType) {
                      selectDeliveryOption(preferences.deliveryType);
                  }
                  
                  // Set location
                  if (preferences.location) {
                      $('#locationSelect').val(preferences.location);
                      $('#selectedLocation').text(preferences.location);
                      deliveryModalState.selectedLocation = preferences.location;
                  }
              }
          }
      } catch (e) {
          console.warn('Could not load from localStorage:', e);
      }
  }

  function onDeliverySelectionSaved(deliveryType, location) {
      console.log('Delivery selection saved:', { deliveryType: deliveryType, location: location });
      
      // Add custom logic here:
      // - Update cart
      // - Recalculate shipping
      // - Update UI elements
      // - Send to analytics
  }

  function getDeliverySelection() {
      return {
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: deliveryModalState.selectedLocation
      };
  }

  function setDeliveryLocation(location) {
      $('#locationSelect').val(location);
      $('#selectedLocation').text(location);
      deliveryModalState.selectedLocation = location;
  }

  function setDeliveryType(type) {
      if (type === 'self-pickup' || type === 'delivery') {
          selectDeliveryOption(type);
      }
  }

function onDropdownMenuClick(button, menu) {
    if (typeof button === 'string') button = document.querySelector(button);
    if (typeof menu === 'string') menu = document.querySelector(menu);
    if (!button || !menu) return;

    // switch menu state
    const isOpen = menu.dataset.open === 'true';
    menu.dataset.open = isOpen ? 'false' : 'true';

    // close when click outside the menu
    function handleClickOutside(event) {
        if (!menu.contains(event.target) && !button.contains(event.target)) {
            menu.dataset.open = 'false';
            document.removeEventListener('click', handleClickOutside); // remove listener itself
        }
    }

    if (menu.dataset.open === 'true') {
        // bind a document click event once
        document.addEventListener('click', handleClickOutside);
    }
}

</script>

<script>
var url            = '/contact-us';
var method         = 'POST';
var debug          = 0;
var bypassBlocking = 0;
var bypassLoading  = 0;
var spamFlag       = false;  // over today's cap hint; refreshed from each success response
window.contactCaptchaToken = "";  // one-time token; sent on the over-cap submit, refreshed by each success

// Contact form — required validation, then submit directly, or (when over today's cap)
// gate the submit behind a slider captcha instead of hard-blocking.
// Validate required fields + email format. Renders inline field errors and returns
// false when invalid, true when the form is safe to submit. Pure check — NO captcha
// logic — so both verifyContactUs() and submitContactUs() can call it without looping.
function validateContactFields() {
    var ids = ['name', 'phoneNumber', 'email', 'message'];

    // Clear prior error state (messages + is-invalid class).
    $('#contactForm .invalid-feedback').remove();
    ids.forEach(function (id) {
        var el = document.getElementById(id);
        if (el) el.classList.remove('is-invalid');
    });

    var errorFieldArr = [];
    $('#contactForm .form-control.required').each(function () {
        if ($(this).val().trim() === '') {
            errorFieldArr.push({ id: $(this).attr('id'), msg: $(this).attr('errormsg') });
        }
    });

    // Email format (matches the server-side 'email' rule) — only when non-empty.
    var emailEl = document.getElementById('email');
    if (emailEl && emailEl.value.trim() !== '' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailEl.value.trim())) {
        errorFieldArr.push({ id: 'email', msg: 'Please enter a valid email address.' });
    }

    if (errorFieldArr.length > 0) {
        showCustomErrorField(errorFieldArr, '');
        var first = document.getElementById(errorFieldArr[0].id);
        if (first) first.focus();
        return false;
    }
    return true;
}

function verifyContactUs() {
    if (!validateContactFields()) return;

    // Over today's enquiry cap → require a slider captcha; otherwise submit straight away.
    if (spamFlag) {
        showContactCaptcha();
    } else {
        submitContactUs();
    }
}

// Actual submit — runs after validation (and after the captcha, when one was required).
function submitContactUs() {
    // Re-validate before sending. The slider-captcha onSuccess calls us directly (and
    // showContactCaptcha() can be invoked out of band), so without this a captcha solved
    // on a blank form would post an empty enquiry. Bad input → re-show field errors, abort.
    if (!validateContactFields()) { hideContactCaptcha(); return; }

    // val6 order MUST match the empty slots of predefined6.insertValue:
    //   [name, ref(=email), value1(=phone), value(=message)]
    // Phone ships as the entered number as-is (no dial-code prefix).
    var phoneFull = document.getElementById('phoneNumber').value.trim();

    var formData = {
        predefined5: "HoE9f\/+Z\/rp23MR6MTVg9NkV63dP8IV5nwgEwMyDgozWlDialuocVWq8BJDys63JXbk7UAjcdhGHQKwERdvnXeY73+x53yYUFFmIp6AQVR16zTvaK0\/vwOXCXI7UdO\/oA1vxiF2pxTT\/TXdlk4HtJ8qiBwvIB5PXyHuqMxlwtl\/3HeCnD4CQIgG\/SgE88bHgCsPlNefNQCJiEBp8uaS0pksnJHAGQ1apMzixqxd5UUeHvyCrnjh31uKBctowBXUHPPEH7XvuuxqsbIKEX8k5ent8J\/PKoVTVXJuBbAsEIO6P5\/p9LsCH7jRhOQXWB+bXVLu2XCH7MLRGHGhXYSf8rw==",
        predefined6: "HNImauwsyBAJXfgD6\/OwDei3TKhVkmLXzVjC3ieTFKHdUKmNniHrXbj8zM43VcOslt1kTbSL7THmX7ulCNWdGJlOWJ9zm0te3ZlG9srBKsRHN4Es\/voIqbzpCAlPeLkvxZcuaPaZfKupUhIs5ZayOZFuT8JRdns2I\/kG0wf1Ook92\/baspA1D9u78xCstTLmrOpjlYcZOFP6nhmh8mBiw54mKIUknfnEMNdHyuj1LzT2AZMhq\/qxBvuBfhjFxtBlfiFSe1lANd31\/OHNU0KfrUZ05zIr3pY7O5cwyaMgkYo+hNG+1qhRHbq8xDxnAWFAZTPaNreXgYoxKqmzy38ZWA==",
        // One-time captcha token (empty unless the slider was just solved). The server only
        // requires it when this IP is over today's cap; otherwise it's ignored.
        captchaToken: window.contactCaptchaToken || '',
        val6: [
            document.getElementById('name').value.trim(),
            document.getElementById('email').value.trim(),
            phoneFull,
            document.getElementById('message').value.trim()
        ]
    };
    window.contactCaptchaToken = '';  // one-time on the client too

    ajaxSend(url, formData, method, successContactUs, debug, bypassBlocking, bypassLoading, 0);
}

// On success: success toast + confirm + clear. (Server errors → ajaxSend's errorHandler.)
function successContactUs(data, message) {
    // Refresh the over-cap hint from the server's authoritative recount, so the NEXT submit in
    // this same session gates behind the captcha without needing a page reload.
    if (data && typeof data === 'object' && 'overCap' in data) {
        spamFlag = !!data.overCap;
        window.contactCaptchaToken = data.captchaToken || '';  // fresh token for the next over-cap submit
    }

    // Clear form + error state
    $('#contactForm .invalid-feedback').remove();
    ['name', 'phoneNumber', 'email', 'message'].forEach(function (id) {
        var el = document.getElementById(id);
        if (el) { el.value = ''; el.classList.remove('is-invalid'); }
    });

    showMessage(
        'Your message has been sent successfully. We will get back to you as soon as possible.',
        'success',
        'Message Sent',
        '',
        ''
    );
}

// ── Slider captcha (shown only when this IP is over the daily cap) ───────────
function showContactCaptcha() {
    $('#overlay').css('display', 'block');
    $('#showCaptcha').css('display', 'block');
    $('body').addClass('overflow-hidden');
}
function hideContactCaptcha() {
    $('#overlay').css('display', 'none');
    $('#showCaptcha').css('display', 'none');
    $('body').removeClass('overflow-hidden');
}
var contactCaptcha = sliderCaptcha({
    id: 'captcha',
    loadingText: 'Loading...',
    failedText: 'Try Again',
    barText: 'Slide to Verify',
    repeatIcon: 'material-repeat-icon',
    onSuccess: function () {
        contactCaptcha.reset();
        hideContactCaptcha();
        submitContactUs();  // token was pre-issued (GET render / previous success) — submit straight away
    },
    onFail: function () {
        var handler = setTimeout(function () { window.clearTimeout(handler); contactCaptcha.reset(); }, 500);
    }
});
</script>

</body>
</html>