/* Yan's Cakes desktop site — chrome: header + mega-menu, footer, back-to-top. */

function DHeader({ onNav, cartCount, cartTotal, onCart, route, overlay, scrollRef }) {
  const { categories, fmt } = window.YANS;
  const [open, setOpen] = React.useState(false);
  const [drop, setDrop] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const el = scrollRef && scrollRef.current; if (!el) return;
    const f = () => setScrolled(el.scrollTop > 140);
    f(); el.addEventListener("scroll", f); return () => el.removeEventListener("scroll", f);
  }, [scrollRef, route]);
  const transp = overlay && !scrolled && !open && !drop;
  const ink = transp ? "#fff" : "var(--text-primary)";
  const dropItems = [
    ["Delivery Details", "ph-truck", "Delivery"],
    ["Storage & Care", "ph-snowflake", "Storage & Care"],
  ];
  const nav = [
    { label: "Home", go: () => onNav({ s: "home" }) },
    { label: "Shop", mega: true },
    { label: "Our Story", go: () => onNav({ s: "info", topic: "Our Story" }) },
    { label: "Catering", go: () => onNav({ s: "info", topic: "Events" }) },
    { label: "Orders", go: () => onNav({ s: "info", topic: "Check Order" }) },
    { label: "Delivery & Storage", drop: true },
    { label: "Contact Us", go: () => onNav({ s: "info", topic: "Contact" }) },
  ];
  return (
    <header style={{ position: overlay ? "fixed" : "sticky", top: 0, left: 0, right: 0, zIndex: 200, background: transp ? "transparent" : "rgba(248,243,234,0.95)", backdropFilter: transp ? "none" : "blur(10px)", WebkitBackdropFilter: transp ? "none" : "blur(10px)", borderBottom: `1px solid ${transp ? "transparent" : "var(--border-subtle)"}`, transition: "background .25s var(--ease-standard), border-color .25s" }}
      onMouseLeave={() => { setOpen(false); setDrop(false); }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px", height: 78, display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 18 }}>
        <nav style={{ display: "flex", gap: 20, alignItems: "center", justifyContent: "flex-start" }}>
          {nav.slice(0, 5).map((n) => (
            <button key={n.label} onClick={n.go} onMouseEnter={() => { setOpen(!!n.mega); setDrop(!!n.drop); }}
              style={{ border: 0, background: "transparent", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13.5, fontWeight: 700, color: ink, padding: "6px 0", display: "flex", alignItems: "center", gap: 5, whiteSpace: "nowrap", textShadow: transp ? "0 1px 6px rgba(0,0,0,.4)" : "none" }}>
              {n.label}{(n.mega || n.drop) && <i className="ph-light ph-caret-down" style={{ fontSize: 13 }} />}
            </button>
          ))}
        </nav>
        <button onClick={() => onNav({ s: "home" })} style={{ border: 0, background: "transparent", cursor: "pointer", textAlign: "center", lineHeight: 1 }}>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 600, fontSize: 30, whiteSpace: "nowrap", color: transp ? "#fff" : "var(--accent)", textShadow: transp ? "0 1px 8px rgba(0,0,0,.4)" : "none" }}>Yan&rsquo;s Cakes</div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 13, color: transp ? "var(--gold-light)" : "var(--gold-deep)", marginTop: 1, textShadow: transp ? "0 1px 6px rgba(0,0,0,.4)" : "none" }}>delicious to the last bite</div>
        </button>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 20 }}>
          {nav.slice(5).map((n) => (
            <button key={n.label} onClick={n.go} onMouseEnter={() => { setOpen(!!n.mega); setDrop(!!n.drop); }}
              style={{ border: 0, background: "transparent", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13.5, fontWeight: 700, color: ink, padding: "6px 0", display: "flex", alignItems: "center", gap: 5, whiteSpace: "nowrap", textShadow: transp ? "0 1px 6px rgba(0,0,0,.4)" : "none" }}>
              {n.label}{(n.mega || n.drop) && <i className="ph-light ph-caret-down" style={{ fontSize: 13 }} />}
            </button>
          ))}
          <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <button onClick={() => onNav({ s: "search" })} aria-label="Search" style={{ ...dIcon, color: ink }}><i className="ph-light ph-magnifying-glass" style={{ fontSize: 20 }} /></button>
          <button onClick={onCart} aria-label="Cart" style={{ ...dIcon, width: "auto", padding: "0 14px", gap: 8, background: cartCount > 0 ? "var(--gold)" : "transparent", color: cartCount > 0 ? "#fff" : ink, borderRadius: 999, height: 42 }}>
            <i className="ph-light ph-shopping-bag" style={{ fontSize: 20 }} />
            {cartCount > 0 && <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, fontWeight: 700 }}>{fmt(Math.round(cartTotal * 100) / 100)}</span>}
          </button>
          </div>
        </div>
      </div>
      {/* mega-menu */}
      <div style={{ position: "absolute", left: 0, right: 0, top: "100%", background: "var(--surface-card)", borderBottom: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-lg)", overflow: "hidden", maxHeight: open ? 360 : 0, transition: "max-height .28s var(--ease-standard)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: open ? "26px 32px" : "0 32px", display: "grid", gridTemplateColumns: "repeat(6,1fr)", gap: 18 }}>
          {categories.map((c) => (
            <button key={c.name} onClick={() => { setOpen(false); onNav({ s: "category", cat: c.name }); }} style={{ border: 0, background: "transparent", cursor: "pointer", textAlign: "center", padding: 0 }}>
              <div style={{ aspectRatio: "1", borderRadius: "var(--radius-md)", overflow: "hidden", marginBottom: 10, boxShadow: "var(--shadow-sm)" }}>
                <img src={catThumb(c.name)} alt={c.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--text-primary)" }}>{c.name}</div>
            </button>
          ))}
        </div>
      </div>
      {/* Delivery & Storage dropdown */}
      <div style={{ position: "absolute", left: 0, right: 0, top: "100%", background: "var(--surface-card)", borderBottom: `1px solid ${drop ? "var(--border-subtle)" : "transparent"}`, boxShadow: drop ? "var(--shadow-lg)" : "none", overflow: "hidden", maxHeight: drop ? 260 : 0, transition: "max-height .26s var(--ease-standard)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: drop ? "18px 32px" : "0 32px", display: "flex", gap: 14 }}>
          {dropItems.map(([label, ic, topic]) => (
            <button key={label} onClick={() => { setDrop(false); onNav({ s: "info", topic: topic || label }); }} style={{ flex: 1, display: "flex", alignItems: "center", gap: 12, border: "1px solid var(--border-subtle)", background: "var(--surface-card)", borderRadius: "var(--radius-md)", padding: "14px 16px", cursor: "pointer", textAlign: "left", boxShadow: "var(--shadow-xs)" }}>
              <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}><i className={"ph-light " + ic} style={{ fontSize: 20, color: "var(--accent)" }} /></span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 19, color: "var(--text-primary)" }}>{label}</span>
            </button>
          ))}
        </div>
      </div>
    </header>
  );
}
const dIcon = { width: 42, height: 42, border: 0, background: "transparent", color: "var(--text-primary)", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", borderRadius: 10 };
const socialLink = { width: 40, height: 40, borderRadius: "50%", border: "1px solid rgba(255,255,255,0.4)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", textDecoration: "none" };
function catThumb(name) {
  return ({ "Swiss Rolls": "photos/swiss-rolls.jpg", "Tarts": "photos/fruit-tart.jpg", "Cheesecakes": "photos/cheesecake.jpg", "High Tea Sets": "photos/high-tea-set.jpg", "Seasonal": "photos/pineapple-tart.jpg", "Bites & Cookies": "photos/rum-raisin-ball.jpg" })[name];
}

function DFooter({ onNav }) {
  const cols = [
    { h: "Shop", l: [["Swiss Rolls", { s: "category", cat: "Swiss Rolls" }], ["Tarts", { s: "category", cat: "Tarts" }], ["Cheesecakes", { s: "category", cat: "Cheesecakes" }], ["High Tea Sets", { s: "category", cat: "High Tea Sets" }], ["Seasonal", { s: "category", cat: "Seasonal" }]] },
    { h: "Visit", l: [["Events & Catering", { s: "info", topic: "Events" }], ["Delivery", { s: "info", topic: "Delivery" }], ["Storage & Care", { s: "info", topic: "Storage & Care" }], ["Contact", { s: "info", topic: "Contact" }]] },
    { h: "About", l: [["Our Story", { s: "info", topic: "Our Story" }], ["Staff Login", null, "/admin"]] },
  ];
  return (
    <footer style={{ background: "#9e2b22", color: "#fff" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 32px 32px", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 32 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 600, fontSize: 28, color: "#fff" }}>Yan&rsquo;s Cakes</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(255,255,255,0.82)", lineHeight: 1.7, margin: "14px 0 0", maxWidth: "34ch" }}>Handcrafted Swiss rolls, tarts and festive treats since 1992. Delicious to the very last bite.</p>
          <div style={{ display: "flex", gap: 12, marginTop: 18, fontSize: 20 }}>
            <a href="https://www.instagram.com/yans_cakes_ubi/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" style={socialLink}><i className="ph-light ph-instagram-logo" /></a>
            <a href="https://www.facebook.com/yanscakes" target="_blank" rel="noopener noreferrer" aria-label="Facebook" style={socialLink}><i className="ph-light ph-facebook-logo" /></a>
            <a href="https://wa.me/94751266" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" style={socialLink}><i className="ph-light ph-whatsapp-logo" /></a>
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: "var(--font-body)", fontSize: 11, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "#fff", marginBottom: 14 }}>{c.h}</div>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {c.l.map(([label, route, href]) => (
                <li key={label}>{href
                  ? <a href={href} style={{ border: 0, background: "transparent", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(255,255,255,0.82)", padding: 0, textAlign: "left", textDecoration: "none" }}>{label}</a>
                  : <button onClick={() => onNav(route)} style={{ border: 0, background: "transparent", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 13.5, color: "rgba(255,255,255,0.82)", padding: 0, textAlign: "left" }}>{label}</button>}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.2)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "16px 32px", fontFamily: "var(--font-body)", fontSize: 12, color: "rgba(255,255,255,0.82)" }}>© 2026 Yan&rsquo;s Cakes. All rights reserved.</div>
      </div>
    </footer>
  );
}

function BackToTop({ scrollRef }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const el = scrollRef.current; if (!el) return;
    const f = () => setShow(el.scrollTop > 400);
    el.addEventListener("scroll", f); return () => el.removeEventListener("scroll", f);
  }, [scrollRef]);
  return (
    <button onClick={() => scrollRef.current && scrollRef.current.scrollTo({ top: 0, behavior: "smooth" })} aria-label="Back to top"
      style={{ position: "fixed", right: 28, bottom: 104, zIndex: 79, width: 56, height: 56, borderRadius: "50%", border: "1px solid var(--border-default)", background: "var(--surface-raised)", color: "var(--text-primary)", boxShadow: "var(--shadow-lg)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", opacity: show ? 1 : 0, transform: show ? "translateY(0)" : "translateY(10px)", pointerEvents: show ? "auto" : "none", transition: "opacity .2s, transform .2s" }}>
      <i className="ph-light ph-arrow-up" style={{ fontSize: 24 }} />
    </button>
  );
}

function DToast({ msg }) {
  if (!msg) return null;
  return <div style={{ position: "fixed", bottom: 30, left: "50%", transform: "translateX(-50%)", zIndex: 70, background: "var(--chocolate)", color: "var(--ivory)", padding: "12px 22px", borderRadius: 999, fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, boxShadow: "var(--shadow-lg)", display: "flex", alignItems: "center", gap: 9 }}><i className="ph-light ph-check-circle" style={{ fontSize: 19, color: "var(--gold-light)" }} /> {msg}</div>;
}

/* Floating WhatsApp contact button — fixed bottom-right on every page. */
function WhatsAppFab() {
  const [h, setH] = React.useState(false);
  return (
    <a href="https://wa.me/94751266" target="_blank" rel="noopener noreferrer" aria-label="Contact us on WhatsApp"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "fixed", right: 28, bottom: 28, zIndex: 80, display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }}>
      <span style={{ background: "var(--chocolate)", color: "var(--ivory)", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600, padding: "8px 14px", borderRadius: 999, whiteSpace: "nowrap", boxShadow: "var(--shadow-md)", opacity: h ? 1 : 0, transform: h ? "translateX(0)" : "translateX(8px)", pointerEvents: "none", transition: "opacity .18s, transform .18s" }}>Contact us</span>
      <span style={{ width: 56, height: 56, borderRadius: "50%", background: "#25D366", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 10px 26px rgba(37,211,102,.5)", transition: "transform .18s", transform: h ? "scale(1.06)" : "scale(1)" }}>
        <i className="ph-light ph-whatsapp-logo" style={{ fontSize: 30 }} />
      </span>
    </a>
  );
}

Object.assign(window, { DHeader, DFooter, BackToTop, DToast, WhatsAppFab, catThumb });