/* ============================================================
   YUZU YATAI — UI primitives
   ============================================================ */

/* Button — saffron primary / outline secondary, yatai radius, dark-section aware */
function Button({
  children,
  variant = "primary",
  size = "md",
  tone = "light",
  full,
  onClick,
  type,
  style,
  iconRight,
}) {
  const pad =
    size === "lg" ? "16px 30px" : size === "sm" ? "9px 16px" : "13px 24px";
  const fs = size === "lg" ? 16 : size === "sm" ? 13 : 14.5;
  const base = {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 9,
    fontFamily: "var(--body)",
    fontWeight: 600,
    fontSize: fs,
    letterSpacing: ".02em",
    padding: pad,
    borderRadius: "var(--r-sm)",
    width: full ? "100%" : "auto",
    transition:
      "transform .18s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, box-shadow .2s",
    whiteSpace: "nowrap",
    lineHeight: 1.1,
    ...style,
  };
  const skin =
    variant === "primary"
      ? {
          background: "var(--saffron)",
          color: "var(--rice)",
          boxShadow: "0 12px 26px -14px rgba(160,46,46,.7)",
        }
      : variant === "secondary"
        ? {
            background: "transparent",
            color: tone === "dark" ? "var(--rice)" : "var(--ink)",
            boxShadow: `inset 0 0 0 1.5px ${tone === "dark" ? "rgba(244,239,231,.55)" : "var(--ink)"}`,
          }
        : {
            background:
              tone === "dark" ? "rgba(244,239,231,.08)" : "var(--rice-2)",
            color: tone === "dark" ? "var(--rice)" : "var(--ink)",
          };
  const [h, setH] = React.useState(false);
  const hover =
    h && variant === "primary"
      ? { background: "var(--saffron-deep)", transform: "translateY(-2px)" }
      : h
        ? { transform: "translateY(-2px)" }
        : {};
  return (
    <button
      type={type || "button"}
      onClick={onClick}
      onMouseEnter={() => setH(true)}
      onMouseLeave={() => setH(false)}
      style={{ ...base, ...skin, ...hover }}
    >
      {children}
      {iconRight && <IcArrow size={17} />}
    </button>
  );
}

/* Eyebrow / kicker */
function Eyebrow({ children, tone = "ink", style }) {
  return (
    <div
      className="eyebrow"
      style={{
        color: tone === "cream" ? "rgba(244,239,231,.7)" : "var(--ink)",
        ...style,
      }}
    >
      <span className="dot">✦ </span>
      {children}
    </div>
  );
}

/* tag chip — picante / vegano / popular */
function TagChip({ tag, small, xs }) {
  const map = {
    picante: { label: "Picante", color: "var(--saffron)", Icon: IcFlame },
    vegano: { label: "Vegano", color: "var(--veg)", Icon: IcLeaf },
    popular: { label: "Popular", color: "var(--ink)", Icon: IcStar },
  };
  const m = map[tag];
  if (!m) return null;
  const { Icon: I } = m;
  // three sizes: xs (compact list view) · small · default
  const size = xs
    ? { fs: 9.5, gap: 4, pad: "2px 6px", icon: 10, ls: ".06em" }
    : small
      ? { fs: 10.5, gap: 5, pad: "3px 8px", icon: 12, ls: ".08em" }
      : { fs: 11.5, gap: 5, pad: "4px 10px", icon: 13, ls: ".08em" };
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: size.gap,
        fontSize: size.fs,
        fontWeight: 600,
        letterSpacing: size.ls,
        textTransform: "uppercase",
        color: m.color,
        background: "var(--rice)",
        border: `1px solid ${m.color}`,
        padding: size.pad,
        borderRadius: xs ? "6px 2px 6px 2px" : "8px 2px 8px 2px",
      }}
    >
      <I size={size.icon} /> {m.label}
    </span>
  );
}

/* FoodImage — stock photo w/ premium on-brand fallback (never looks broken) */
function FoodImage({
  src,
  label,
  ratio = "4 / 3",
  radius = "var(--r-md)",
  style,
  className,
}) {
  const [err, setErr] = React.useState(false);
  const [loaded, setLoaded] = React.useState(false);
  return (
    <div
      className={"grain " + (className || "")}
      style={{
        position: "relative",
        aspectRatio: ratio,
        overflow: "hidden",
        borderRadius: radius,
        background:
          "linear-gradient(135deg,#2A2622 0%,#1E1B18 55%,#241f1b 100%)",
        ...style,
      }}
    >
      {/* fallback art (radiating warm rings + label) — always behind the photo */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 14,
          padding: 18,
          textAlign: "center",
          backgroundImage:
            "radial-gradient(circle at 50% 42%, rgba(160,46,46,.22), transparent 60%)",
        }}
      >
        <YuzuSlice
          size={56}
          line="rgba(244,239,231,.5)"
          seed="rgba(160,46,46,.9)"
        />
        <span
          style={{
            fontFamily: "ui-monospace,Menlo,monospace",
            fontSize: 11.5,
            letterSpacing: ".12em",
            color: "rgba(244,239,231,.62)",
            textTransform: "uppercase",
          }}
        >
          {label || "foto"}
        </span>
      </div>
      {!err && src && (
        <img
          src={src}
          alt={label || ""}
          loading="lazy"
          onError={() => setErr(true)}
          onLoad={() => setLoaded(true)}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            opacity: loaded ? 1 : 0,
            transition: "opacity .6s ease",
          }}
        />
      )}
    </div>
  );
}

Object.assign(window, { Button, Eyebrow, TagChip, FoodImage });