// ModuFoodService — shared UI components
const { useState, useEffect, useMemo, useRef } = React;

// Format a price that may be numeric ("189.00") or free text ("Contact Us").
function fmtPrice(price) {
  if (price == null || price === "") return "";
  const n = Number(price);
  return Number.isFinite(n) && String(price).trim() !== "" && !isNaN(n)
    ? "$" + n.toFixed(2)
    : String(price);
}

function BrandMark() {
  return (
    <img className="brand-mark" src="https://res.cloudinary.com/djutbfvfz/image/upload/v1779397900/MFS_CIRCLE_cbhmvn.png" alt="ModuFoodService" />
  );
}

function Brand({ sub = "FOOD SVC // EST. 2017" }) {
  return (
    <div className="brand">
      <BrandMark />
      <div>
        <div className="brand-name">ModuFood<b>Service</b></div>
        <div className="brand-sub">{sub}</div>
      </div>
    </div>
  );
}

function Ticker({ lang }) {
  const items = (window.MFS_I18N[lang] || window.MFS_I18N.en).ticker;
  return (
    <div className="topbar-ticker">
      <div className="track">
        {items.concat(items).map((t, i) => (
          <span key={i}><span className="dot" />{t}</span>
        ))}
      </div>
    </div>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle">
      <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
      <span className="sep">/</span>
      <button className={lang === "ko" ? "active" : ""} onClick={() => setLang("ko")}>KO</button>
    </div>
  );
}

function Topbar({ view, setView, lang, setLang, T }) {
  const navT = T.nav;
  const [menuOpen, setMenuOpen] = React.useState(false);
  const tabs = [
    ["home", navT.home],
    ["products", navT.products],
    ["services", navT.services],
    ["about", navT.about],
    ["locations", navT.locations],
  ];

  function go(id) {
    setView(id);
    setMenuOpen(false);
    window.scrollTo({ top: 0, behavior: "instant" });
  }

  return (
    <div className="topbar-wrap">
      <Ticker lang={lang} />
      <div className="topbar">
        <button onClick={() => go("home")} style={{ background: "none", border: "none", padding: 0 }}>
          <Brand />
        </button>
        <nav className="navlinks desktop-only">
          {tabs.map(([id, label]) => (
            <button
              key={id}
              className={view === id ? "active" : ""}
              onClick={() => go(id)}
            >
              {label}
            </button>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <LangToggle lang={lang} setLang={setLang} />
          <button className="cta desktop-only" onClick={() => go("products")}>
            {navT.cta} <span className="arr">→</span>
          </button>
          <button
            className="hamburger"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
          >
            <span className={"bar" + (menuOpen ? " open" : "")} />
            <span className={"bar" + (menuOpen ? " open" : "")} />
            <span className={"bar" + (menuOpen ? " open" : "")} />
          </button>
        </div>
      </div>

      <div className={"mobile-menu" + (menuOpen ? " open" : "")}>
        <nav className="mobile-nav">
          {tabs.map(([id, label]) => (
            <button
              key={id}
              className={view === id ? "active" : ""}
              onClick={() => go(id)}
            >
              {label}
            </button>
          ))}
        </nav>
        <button className="cta mobile-cta" onClick={() => go("products")}>
          {navT.cta} <span className="arr">→</span>
        </button>
      </div>
    </div>
  );
}

function Kicker({ children }) {
  return <div className="kicker">{children}</div>;
}

function ImgSlot({ label = "Product photography", aspect = "1.1", src = "" }) {
  return (
    <div className={"img" + (src ? " has-photo" : "")} style={{ aspectRatio: aspect }}>
      {src
        ? <img src={src} alt={label} loading="lazy" />
        : <div className="lbl">[ {label} ]</div>}
    </div>
  );
}

function Footer({ setView, lang, T }) {
  const F = T.footer;
  return (
    <footer className="foot">
      <div className="foot-grid">
        <div>
          <Brand sub="FOOD SVC // EST. 2017" />
          <p style={{ marginTop: 18 }}>{F.desc}</p>
          <div style={{ marginTop: 24, display: "flex", gap: 10 }}>
            <button className="cta" onClick={() => setView("products")}>{F.cta} →</button>
          </div>
        </div>
        <div>
          <h5>{F.col_product}</h5>
          <ul>
            <li><a onClick={() => setView("products")}>{F.catalog}</a></li>
          </ul>
        </div>
        <div>
          <h5>{F.col_company}</h5>
          <ul>
            <li><a onClick={() => setView("services")}>{F.services}</a></li>
            <li><a onClick={() => setView("about")}>{F.about}</a></li>
            <li><a onClick={() => setView("locations")}>{F.locations}</a></li>
          </ul>
        </div>
        <div>
          <h5>{F.col_follow}</h5>
          <ul>
            <li><a href="https://www.instagram.com/modufoodservice/" target="_blank" rel="noopener">Instagram</a></li>
          </ul>
        </div>
        <div>
          <h5>{F.col_contact}</h5>
          <ul>
            <li><a href="mailto:info@modufoodservice.com">info@modufoodservice.com</a></li>
            <li><a href="tel:+13233213570">+1 (323) 321-3570</a></li>
            <li><a>5050 Everett Ct.</a></li>
            <li><a>Vernon, CA 90058</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bot">
        <span>{F.copyright}</span>
        <span>{F.tagline}</span>
        <a href="/admin.html" style={{ cursor: "pointer" }}>{F.motto}</a>
      </div>
    </footer>
  );
}

Object.assign(window, { BrandMark, Brand, Ticker, LangToggle, Topbar, Kicker, ImgSlot, Footer, fmtPrice });