/* ============================================================
   YUZU YATAI — Nav, mobile menu, bottom CTA bar, Footer
   ============================================================ */

function useNarrow(bp = 860) {
  const [n, setN] = React.useState(
    typeof window !== "undefined" ? window.innerWidth < bp : false,
  );
  React.useEffect(() => {
    const f = () => setN(window.innerWidth < bp);
    window.addEventListener("resize", f);
    return () => window.removeEventListener("resize", f);
  }, [bp]);
  return n;
}

function useScrolled(y = 24) {
  const [s, setS] = React.useState(false);
  React.useEffect(() => {
    const f = () => setS(window.scrollY > y);
    f();
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, [y]);
  return s;
}

const NAV_LINKS = [
  { id: "inicio", label: "Inicio" },
  { id: "menu", label: "Menú" },
  { id: "nosotros", label: "Nosotros" },
  { id: "locales", label: "Nuestro Local" },
  { id: "contacto", label: "Contacto" },
];

// Streamlined header: only the links that move someone toward ordering.
const HEADER_LINKS = [
  { id: "menu", label: "Menú" },
  { id: "locales", label: "Nuestro Local" },
];

const PHONE_DISPLAY = "+56 2 2871 4500";
const PHONE_TEL = "+56228714500";

function Nav({ route, go, cartCount, onCart }) {
  const narrow = useNarrow();
  const scrolled = useScrolled();
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    setOpen(false);
  }, [route]);

  return (
    <React.Fragment>
      <header
        style={{
          position: "sticky",
          top: 0,
          zIndex: 60,
          background: scrolled ? "rgba(244,239,231,.86)" : "transparent",
          backdropFilter: scrolled ? "saturate(140%) blur(12px)" : "none",
          borderBottom: scrolled
            ? "1px solid var(--rice-3)"
            : "1px solid transparent",
          transition: "background .3s, border-color .3s",
        }}
      >
        <div
          className="wrap"
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            height: 76,
            gap: 20,
          }}
        >
          <a
            href="#inicio"
            onClick={(e) => {
              e.preventDefault();
              go("inicio");
            }}
            aria-label="Yuzu Yatai inicio"
          >
            <LogoMark size={narrow ? 30 : 34} />
          </a>

          {!narrow && (
            <nav style={{ display: "flex", alignItems: "center", gap: 30 }}>
              {HEADER_LINKS.map((l) => (
                <a
                  key={l.id}
                  href={"#" + l.id}
                  onClick={(e) => {
                    e.preventDefault();
                    go(l.id);
                  }}
                  style={{
                    position: "relative",
                    fontWeight: 600,
                    fontSize: 13,
                    letterSpacing: ".04em",
                    textTransform: "uppercase",
                    color: route === l.id ? "var(--saffron)" : "var(--ink)",
                    paddingBottom: 3,
                  }}
                >
                  {l.label}
                  <span
                    style={{
                      position: "absolute",
                      left: 0,
                      right: 0,
                      bottom: -2,
                      height: 2,
                      background: "var(--saffron)",
                      transform: `scaleX(${route === l.id ? 1 : 0})`,
                      transformOrigin: "left",
                      transition: "transform .25s",
                    }}
                  ></span>
                </a>
              ))}
            </nav>
          )}

          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            {!narrow && (
              <a
                href={"tel:" + PHONE_TEL}
                aria-label={"Llámanos al " + PHONE_DISPLAY}
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: 10,
                  padding: "6px 14px 6px 6px",
                  borderRadius: "14px 3px 14px 3px",
                  background: "var(--rice-2)",
                  border: "1px solid var(--rice-3)",
                  transition: "border-color .2s, background .2s",
                }}
              >
                <span
                  style={{
                    display: "grid",
                    placeItems: "center",
                    width: 32,
                    height: 32,
                    borderRadius: "10px 2px 10px 2px",
                    background: "var(--saffron)",
                    color: "var(--rice)",
                    flexShrink: 0,
                  }}
                >
                  <IcPhone size={17} />
                </span>
                <span style={{ lineHeight: 1.15 }}>
                  <span
                    style={{
                      display: "block",
                      fontSize: 9.5,
                      fontWeight: 600,
                      letterSpacing: ".14em",
                      textTransform: "uppercase",
                      color: "rgba(30,27,24,.5)",
                    }}
                  >
                    Llámanos
                  </span>
                  <span style={{ fontWeight: 600, fontSize: 13.5 }}>
                    {PHONE_DISPLAY}
                  </span>
                </span>
              </a>
            )}
            <button
              onClick={onCart}
              aria-label="Carrito"
              style={{
                position: "relative",
                display: "grid",
                placeItems: "center",
                width: 44,
                height: 44,
                borderRadius: "12px 3px 12px 3px",
                background: "var(--rice-2)",
              }}
            >
              <IcCart size={22} />
              {cartCount > 0 && (
                <span
                  style={{
                    position: "absolute",
                    top: -4,
                    right: -4,
                    minWidth: 20,
                    height: 20,
                    padding: "0 5px",
                    background: "var(--saffron)",
                    color: "var(--rice)",
                    borderRadius: 10,
                    fontSize: 11.5,
                    fontWeight: 700,
                    display: "grid",
                    placeItems: "center",
                    border: "2px solid var(--rice)",
                  }}
                >
                  {cartCount}
                </span>
              )}
            </button>
            {!narrow && (
              <Button size="sm" onClick={() => go("menu")}>
                Pedir ahora
              </Button>
            )}
            {narrow && (
              <button
                onClick={() => setOpen((o) => !o)}
                aria-label="Menú"
                style={{
                  display: "grid",
                  placeItems: "center",
                  width: 44,
                  height: 44,
                  borderRadius: "12px 3px 12px 3px",
                  background: "var(--rice-2)",
                }}
              >
                {open ? <IcClose size={22} /> : <IcMenu size={22} />}
              </button>
            )}
          </div>
        </div>
      </header>

      {/* mobile drawer */}
      {narrow && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 55,
            pointerEvents: open ? "auto" : "none",
          }}
        >
          <div
            onClick={() => setOpen(false)}
            style={{
              position: "absolute",
              inset: 0,
              background: "rgba(30,27,24,.5)",
              opacity: open ? 1 : 0,
              transition: "opacity .3s",
            }}
          ></div>
          <nav
            style={{
              position: "absolute",
              top: 0,
              right: 0,
              bottom: 0,
              width: "min(82vw,340px)",
              background: "var(--rice)",
              boxShadow: "var(--shadow-card)",
              padding: "92px 30px 30px",
              transform: open ? "none" : "translateX(105%)",
              transition: "transform .35s cubic-bezier(.2,.7,.2,1)",
              display: "flex",
              flexDirection: "column",
              gap: 4,
            }}
          >
            {HEADER_LINKS.map((l) => (
              <a
                key={l.id}
                href={"#" + l.id}
                onClick={(e) => {
                  e.preventDefault();
                  go(l.id);
                }}
                style={{
                  fontFamily: "var(--display)",
                  fontSize: 30,
                  fontWeight: 600,
                  padding: "10px 0",
                  color: route === l.id ? "var(--saffron)" : "var(--ink)",
                  borderBottom: "1px solid var(--rice-3)",
                }}
              >
                {l.label}
              </a>
            ))}
            <a
              href={"tel:" + PHONE_TEL}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 12,
                marginTop: 18,
                padding: "13px 16px",
                borderRadius: "14px 3px 14px 3px",
                background: "var(--rice-2)",
              }}
            >
              <span
                style={{
                  display: "grid",
                  placeItems: "center",
                  width: 38,
                  height: 38,
                  borderRadius: "11px 2px 11px 2px",
                  background: "var(--saffron)",
                  color: "var(--rice)",
                  flexShrink: 0,
                }}
              >
                <IcPhone size={19} />
              </span>
              <span style={{ lineHeight: 1.2 }}>
                <span
                  style={{
                    display: "block",
                    fontSize: 10,
                    fontWeight: 600,
                    letterSpacing: ".14em",
                    textTransform: "uppercase",
                    color: "rgba(30,27,24,.5)",
                  }}
                >
                  Llámanos
                </span>
                <span style={{ fontWeight: 600, fontSize: 15.5 }}>
                  {PHONE_DISPLAY}
                </span>
              </span>
            </a>
            <div style={{ marginTop: 16 }}>
              <Button full size="lg" onClick={() => go("menu")}>
                Pedir ahora
              </Button>
            </div>
          </nav>
        </div>
      )}
    </React.Fragment>
  );
}

/* sticky bottom CTA on mobile */
function BottomBar({ route, go, cartCount, cartTotal, onCart }) {
  const narrow = useNarrow();
  if (!narrow) return null;
  const onMenu = route === "menu";
  return (
    <div
      style={{
        position: "fixed",
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 50,
        padding: "12px 16px calc(12px + env(safe-area-inset-bottom))",
        background: "rgba(244,239,231,.92)",
        backdropFilter: "blur(12px)",
        borderTop: "1px solid var(--rice-3)",
      }}
    >
      {onMenu && cartCount > 0 ? (
        <Button full size="lg" onClick={onCart}>
          <IcCart size={19} /> Ver carrito · {cartCount}{" "}
          <span style={{ opacity: 0.7 }}>·</span> {YY.CLP(cartTotal)}
        </Button>
      ) : (
        <Button full size="lg" onClick={() => go("menu")}>
          Pedir ahora
        </Button>
      )}
    </div>
  );
}

function Footer({ go }) {
  const cols = [
    {
      h: "Navegar",
      items: NAV_LINKS.map((l) => ({ label: l.label, go: l.id })),
    },
    {
      h: "Pedidos",
      items: [
        { label: "Pedir en línea", go: "menu" },
        { label: "Retiro en local", go: "menu" },
        { label: "Delivery propio", go: "menu" },
        { label: "Rappi · Uber Eats · PedidosYa" },
      ],
    },
  ];
  return (
    <footer
      className="on-ink"
      style={{ background: "var(--ink)", color: "var(--rice)", paddingTop: 72 }}
    >
      <div
        className="wrap footer-grid"
        style={{
          display: "grid",
          gap: 48,
          gridTemplateColumns:
            "minmax(240px,1.4fr) repeat(2,1fr) minmax(200px,1.2fr)",
          paddingBottom: 56,
        }}
      >
        <div>
          <LogoMark tone="cream" size={36} />
          <p
            style={{
              marginTop: 18,
              maxWidth: 280,
              color: "rgba(244,239,231,.66)",
              fontSize: 15,
            }}
          >
            Sushi japonés y comida callejera tailandesa. Del yatai a tu mesa, en
            Chile.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 20 }}>
            {[IcInsta, IcWhats].map((I, i) => (
              <a
                key={i}
                href="#"
                style={{
                  display: "grid",
                  placeItems: "center",
                  width: 42,
                  height: 42,
                  borderRadius: "12px 3px 12px 3px",
                  border: "1px solid rgba(244,239,231,.25)",
                  color: "var(--rice)",
                }}
              >
                <I size={20} />
              </a>
            ))}
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div
              className="eyebrow"
              style={{ color: "rgba(244,239,231,.5)", marginBottom: 16 }}
            >
              {c.h}
            </div>
            <ul
              style={{
                listStyle: "none",
                margin: 0,
                padding: 0,
                display: "flex",
                flexDirection: "column",
                gap: 11,
              }}
            >
              {c.items.map((it, i) => (
                <li key={i}>
                  <a
                    href="#"
                    onClick={(e) => {
                      e.preventDefault();
                      it.go && go(it.go);
                    }}
                    style={{ color: "rgba(244,239,231,.78)", fontSize: 15 }}
                  >
                    {it.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
        <div>
          <div
            className="eyebrow"
            style={{ color: "rgba(244,239,231,.5)", marginBottom: 16 }}
          >
            Visítanos
          </div>
          <p
            style={{
              color: "rgba(244,239,231,.78)",
              fontSize: 15,
              lineHeight: 1.7,
            }}
          >
            Av. Concha y Toro 1450
            <br />
            Puente Alto, Santiago
            <br />
            <span style={{ color: "rgba(244,239,231,.55)" }}>
              Lun a Dom · 12:30 – 23:00
            </span>
          </p>
        </div>
      </div>
      <div style={{ borderTop: "1px solid rgba(244,239,231,.14)" }}>
        <div
          className="wrap"
          style={{
            display: "flex",
            flexWrap: "wrap",
            gap: 18,
            alignItems: "center",
            justifyContent: "space-between",
            padding: "20px clamp(20px,5vw,56px) 26px",
          }}
        >
          <span style={{ fontSize: 13.5, color: "rgba(244,239,231,.5)" }}>
            © 2026 Yuzu Yatai · Precios en pesos chilenos (CLP)
          </span>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            {["Webpay", "Mercado Pago", "MACH"].map((p) => (
              <span
                key={p}
                style={{
                  fontSize: 12,
                  fontWeight: 600,
                  letterSpacing: ".04em",
                  color: "rgba(244,239,231,.8)",
                  border: "1px solid rgba(244,239,231,.22)",
                  padding: "6px 12px",
                  borderRadius: "9px 2px 9px 2px",
                }}
              >
                {p}
              </span>
            ))}
            <span
              style={{
                fontSize: 13.5,
                color: "rgba(244,239,231,.65)",
                marginLeft: 4,
              }}
            >
              Hecho en Chile 🇨🇱
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav,
  BottomBar,
  Footer,
  useNarrow,
  useScrolled,
  NAV_LINKS,
});