

<!--

    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>About Us — Mr Flower | Premium Florist in Klang Valley</title>
    <link rel="shortcut icon" href="/images/project/MF-Logo-tm-ori-fav.webp" />
    <meta name="description" content="Mr Flower — founded by Mr. Ooi with 20+ years of floral artistry. Fresh, premium, on-time custom bouquets, crafted with passion and delivered across the Klang Valley.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr Flower Sdn Bhd">
    <link rel="canonical" href="https://mrflower.com.my/about-us">
    <meta property="og:title" content="About Us — Mr Flower">
    <meta property="og:description" content="The story behind Mr Flower: a male floral expert bringing fresh, confident artistry to premium flower delivery in Malaysia.">
    <meta property="og:url" content="http://mrflower.com.my/about-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="http://mrflower.com.my/images/project/bg-flowers-hero.webp">
    <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="About Us — Mr Flower">
    <meta name="twitter:description" content="The story behind Mr Flower — premium floral artistry, crafted with passion.">
    <meta name="twitter:image" content="http://mrflower.com.my/images/project/bg-flowers-hero.webp">
    <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="index,follow">
    <!-- 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>

<!--------------------------------------------------------Start of HTML block (start)-------------------------------------------------------->
<body>
    
<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 class="font-['Inter',system-ui,sans-serif] bg-[color:var(--default-bg-color)]">

        <!-- Page title -->
        <div class="text-center px-6 pt-9 pb-7 bg-[color:var(--default-bg-color)]">
            <h1 class="m-0 font-['Quinstory',Georgia,serif] font-normal text-[length:var(--fs-34)] sm:text-[length:var(--fs-46)] leading-none text-[color:var(--primary-color)]">About Us</h1>
        </div>

        <!-- Our Story -->
        <section class="relative overflow-hidden flex items-center justify-center min-h-[420px] max-sm:min-h-0">
            <img src="/images/project/bg-flowers-hero.webp" alt="" aria-hidden="true" width="1600" height="900"
                 class="absolute inset-0 w-full h-full object-cover object-top" />
            <div class="absolute inset-0 bg-white/80" aria-hidden="true"></div>
            <div class="relative z-10 max-w-[720px] mx-auto px-12 py-14 max-sm:px-6 max-sm:py-11 text-center">
                <h2 class="m-0 mb-6 font-['Quinstory',Georgia,serif] font-normal text-[length:var(--fs-30)] sm:text-[length:var(--fs-40)] leading-tight text-[color:var(--primary-color)]">Our Story</h2>
                <p class="mb-[18px] text-[length:var(--default-text-size)] font-light leading-[1.85] text-[color:var(--primary-text-color)]">The name Mr Flower breaks convention in the floral industry, where most florist brands are traditionally female-led. This name boldly highlights the &ldquo;Mr&rdquo;, representing a male floral expert who brings a fresh, confident perspective to the world of flowers.</p>
                <p class="mb-[18px] text-[length:var(--default-text-size)] font-light leading-[1.85] text-[color:var(--primary-text-color)]">More than just a name, Mr Flower embodies the spirit of its founder, Mr. Ooi, renowned for his professionalism, creativity, and emotional intelligence. With over 20 years of experience in the floral industry, he not only masters the art of floral aesthetics but also understands the unspoken language of love and emotion that each bouquet conveys.</p>
                <p class="mb-8 text-[length:var(--default-text-size)] font-light leading-[1.85] text-[color:var(--primary-text-color)]">With a deep passion for floral artistry and a reputation for reliable, personalised service, Mr Flower delivers arrangements that are both beautiful and meaningful &mdash; earning the trust and admiration of every customer.</p>
                <a href="/" class="inline-flex items-center justify-center px-8 py-[11px] rounded-[6px] text-[length:var(--default-text-size)] font-semibold text-white bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] transition-colors no-underline">Shop Now</a>
            </div>
        </section>

        <!-- Vision & Mission -->
        <section class="bg-[color:var(--default-bg-color)]">
            <div class="grid grid-cols-1 md:grid-cols-2 min-h-[560px] max-md:min-h-0">
                <div class="relative overflow-hidden max-md:min-h-[340px]">
                    <img src="/images/project/about-bouquet-bottom.webp" alt="A Mr Flower bouquet" width="800" height="1000" loading="lazy" decoding="async"
                         class="w-full h-full object-cover block" />
                </div>
                <div class="bg-[#fdf8f4] px-[60px] py-[72px] max-md:px-8 max-md:py-14 max-sm:px-5 max-sm:py-8 flex flex-col justify-center">
                    <p class="mb-4 text-[length:var(--xs-text-size)] font-semibold tracking-[0.18em] uppercase text-[color:var(--primary-color)] opacity-70">Who We Are</p>
                    <h2 class="m-0 mb-12 max-md:mb-9 font-['Quinstory',Georgia,serif] font-normal text-[length:var(--fs-44)] max-md:text-[length:var(--fs-34)] max-sm:text-[length:var(--fs-28)] leading-[1.15] text-[color:var(--primary-color)]">Vision &amp;<br>Mission</h2>
                    <div class="w-12 h-0.5 mb-10 bg-[color:var(--primary-color)] opacity-25"></div>
                    <div class="flex gap-5 items-start mb-8">
                        <div class="font-['Quinstory',Georgia,serif] text-[length:var(--lg-text-size)] font-normal text-[color:var(--primary-color)] min-w-20 pt-0.5">Vision</div>
                        <div class="text-[length:var(--default-text-size)] font-light leading-[1.85] text-[color:var(--primary-text-color)] border-l border-[color:var(--color-pink-soft)] pl-5">To be Malaysia's most trusted florist, creating meaningful experiences with every bouquet.</div>
                    </div>
                    <div class="flex gap-5 items-start">
                        <div class="font-['Quinstory',Georgia,serif] text-[length:var(--lg-text-size)] font-normal text-[color:var(--primary-color)] min-w-20 pt-0.5">Mission</div>
                        <div class="text-[length:var(--default-text-size)] font-light leading-[1.85] text-[color:var(--primary-text-color)] border-l border-[color:var(--color-pink-soft)] pl-5">Fresh. Premium. On Time. We craft custom floral moments that impress and last.</div>
                    </div>
                </div>
            </div>
        </section>

    </main>

    <!-- JSON-LD structured data (AboutPage + Organization) -->
    <script type="application/ld+json">
    {"@context":"https://schema.org","@type":"AboutPage","name":"About Us — Mr Flower","url":"http://mrflower.com.my/about-us","mainEntity":{"@type":"Organization","name":"Mr Flower Sdn Bhd","alternateName":"Mr Flower","url":"http://mrflower.com.my/","logo":"http://mrflower.com.my/images/logo.webp","description":"Premium florist and flower delivery service in Klang Valley, Malaysia. Crafted with passion. Designed for you.","foundingDate":"2024","areaServed":"Klang Valley, Malaysia"}}
    </script>

    
<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="/about-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="/about-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#25464a4b5144465165485743494a5240570b464a480b485c" 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="51323e3f25303225113c23373d3e2634237f323e3c7f3c28">[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>
</body>
<!--------------------------------------------------------Start of HTML block (end)-------------------------------------------------------->

<!--
 @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 = "about-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 = 'About 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.041049999999999996,"count":1,"lastExecuted":"2026-07-11 03:21:54"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":41.05,"executionTimeSec":0.0411,"accumulatedTimeMs":41.05,"accumulatedTimeSec":0.0411,"timestamp":"2026-07-11 03:21:54"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":232.94,"executionTimeSec":0.2329,"accumulatedTimeMs":273.99,"accumulatedTimeSec":0.274,"timestamp":"2026-07-11 03:21:55"}],"accumulatedTimeMs":273.99,"bootstrapSession":{"totalTime":0.23294,"count":1,"lastExecuted":"2026-07-11 03:21:55"}};
//         var phpLoadTime = queryTime['accumulatedTimeMs']/1000;

//         if(totalPageLoadTime > 3){
//         //if(true){
//             var url = '/about-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 = 'About 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 = '/about-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 = 'About Us';
        var phpStartTime = '';
        var jsStartTime = '';
        var jsEndTime = new Date().getTime() / 1000;
        var jsLoadTime = jsEndTime - jsStartTime;
        var totalPageLoadTime = jsEndTime - phpStartTime;
        var queryTime = {"getClientIpInfo":{"totalTime":0.041049999999999996,"count":1,"lastExecuted":"2026-07-11 03:21:54"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":41.05,"executionTimeSec":0.0411,"accumulatedTimeMs":41.05,"accumulatedTimeSec":0.0411,"timestamp":"2026-07-11 03:21:54"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":232.94,"executionTimeSec":0.2329,"accumulatedTimeMs":273.99,"accumulatedTimeSec":0.274,"timestamp":"2026-07-11 03:21:55"}],"accumulatedTimeMs":273.99,"bootstrapSession":{"totalTime":0.23294,"count":1,"lastExecuted":"2026-07-11 03:21:55"}};
        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 = '/about-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 = '/about-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 = '/about-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>
</html>