// Octopak website — shared chrome (header + mobile nav + footer).
const { Button, Logo } = window.OctopakDesignSystem_bc06ed;
const { WhatsAppGlyph, Icon, waLink, WA_DEFAULT, routeToHref } = window;
const { useState } = React;
// Standalone-bundle aware asset paths (falls back to relative path on the live site).
const R = (id, path) => (window.__resources && window.__resources[id]) || path;

// Nav order: Guide inserted between Process and Work.
const NAV = [
  { id: "products", label: "Products" },
  { id: "process", label: "Process" },
  { id: "guide", label: "Guide" },
  { id: "work", label: "Work" },
  { id: "compare", label: "Compare" },
  { id: "faq", label: "FAQ" },
  { id: "about", label: "About" },
  { id: "contact", label: "Contact" },
];

// "Cake, pastry & corrugated boxes" and "Tote bags" are temporarily
// hidden here too (kept out of nav until real photos are shot) — see the
// matching `hidden: true` families in Data.jsx.
const PRODUCT_LINKS = [
  { id: "products/coffee-cups", label: "Coffee cups" },
  { id: "products/paper-bags", label: "Paper bags" },
  { id: "products/wrappers-and-paper", label: "Wrappers & greaseproof paper" },
  { id: "products/pouches", label: "Pouches" },
  { id: "products/vacuum-bags", label: "Vacuum bags" },
];

function baseRoute(route) {
  return (route || "home").split("?")[0].split("/")[0];
}

function Header({ route, onNavigate }) {
  const [open, setOpen] = useState(false);
  const base = baseRoute(route);
  const go = (r) => { setOpen(false); onNavigate(r); };
  return (
    <header className="site-header">
      <div className="site-header__inner octo-container">
        <a className="site-header__brand" href={routeToHref("home")} onClick={(e) => { e.preventDefault(); go("home"); }}>
          <Logo src={R("logoDark", "assets/octopak-logo.svg")} size={26} alt="Octopak" />
        </a>
        <nav className="site-nav">
          {NAV.map((n) => (
            <a key={n.id} href={routeToHref(n.id)}
              className={`site-nav__link ${base === n.id ? "is-active" : ""}`}
              onClick={(e) => { e.preventDefault(); go(n.id); }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div className="site-header__actions">
          <Button size="sm" variant="primary" onClick={() => go("contact")}>Start an enquiry</Button>
          <a className="wa-btn" href={waLink(WA_DEFAULT)} target="_blank" rel="noreferrer" aria-label="Talk to us on WhatsApp">
            <WhatsAppGlyph size={22} />
          </a>
          <button className="site-header__burger" aria-label="Menu" onClick={() => setOpen((v) => !v)}>
            <Icon name={open ? "x" : "menu"} />
          </button>
        </div>
      </div>
      <div className={`mobile-nav ${open ? "is-open" : ""}`}>
        {NAV.map((n) => (
          <a key={n.id} href={routeToHref(n.id)} className={base === n.id ? "is-active" : ""}
            onClick={(e) => { e.preventDefault(); go(n.id); }}>{n.label}</a>
        ))}
        <div className="mobile-nav__cta">
          <Button size="lg" variant="primary" onClick={() => go("contact")}>Start an enquiry</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ onNavigate }) {
  const link = (id, label) => (
    <a href={routeToHref(id)} onClick={(e) => { e.preventDefault(); onNavigate(id); }}>{label}</a>
  );
  return (
    <footer className="site-footer">
      <div className="octo-container">
        <div className="site-footer__inner">
          <div className="site-footer__brand">
            <Logo src={R("logoLight", "assets/octopak-logo-light.svg")} size={30} alt="Octopak" />
            <p className="site-footer__tag">Customised packaging for serious F&amp;B brands.</p>
          </div>
          <div className="site-footer__cols">
            <div>
              <h5>Products</h5>
              {PRODUCT_LINKS.map((p) => <React.Fragment key={p.id}>{link(p.id, p.label)}</React.Fragment>)}
            </div>
            <div>
              <h5>Company</h5>
              {link("about", "About")}
              {link("process", "Process")}
              {link("guide", "Print & Materials Guide")}
              {link("work", "Work")}
              {link("compare", "Compare")}
              {link("faq", "FAQ")}
              {link("contact", "Contact")}
            </div>
            <div>
              <h5>Reach us</h5>
              <a href={waLink(WA_DEFAULT)} target="_blank" rel="noreferrer">WhatsApp</a>
              <a href="mailto:hello@octopak.com">hello@octopak.com</a>
              <a href="https://t.me/octopak" target="_blank" rel="noreferrer">Telegram</a>
              <p className="site-footer__muted">22 Sin Ming Lane, Singapore 573969</p>
            </div>
          </div>
        </div>
        <div className="site-footer__legal">
          <span>© Octopak.com {new Date().getFullYear()}. All rights reserved.</span>
          <span>
            <a href={routeToHref("legal/privacy")} onClick={(e) => { e.preventDefault(); onNavigate("legal/privacy"); }}>Privacy</a>
            {"  ·  "}
            <a href={routeToHref("legal/terms")} onClick={(e) => { e.preventDefault(); onNavigate("legal/terms"); }}>Terms</a>
            {"  ·  "}
            <a href="https://www.instagram.com/octo.pak/" target="_blank" rel="noreferrer">Instagram</a>
            {"  ·  "}
            <a href="https://www.facebook.com/octo.pak/" target="_blank" rel="noreferrer">Facebook</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Footer, NAV, PRODUCT_LINKS, baseRoute });