// ── Helpers ─────────────────────────────────────────────────────────────────
const CHF = (n) => "CHF " + n.toFixed(2).replace(".", ".");
const cx = (...a) => a.filter(Boolean).join(" ");

// IntersectionObserver scroll-reveal hook
function useReveal() {
  React.useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    if (!("IntersectionObserver" in window) || !els.length) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) {
            en.target.classList.add("in");
            io.unobserve(en.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  });
}

// ── Icons (simple line set) ──────────────────────────────────────────────────
const Ico = {
  bag: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 7h12l-1 13H7L6 7Z" /><path d="M9 7a3 3 0 0 1 6 0" />
    </svg>
  ),
  plus: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14" /></svg>
  ),
  minus: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" {...p}><path d="M5 12h14" /></svg>
  ),
  close: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" {...p}><path d="M6 6l12 12M18 6 6 18" /></svg>
  ),
  clock: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
  ),
  pin: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" /></svg>
  ),
  phone: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 4h3l2 5-2.5 1.5a11 11 0 0 0 5 5L14 13l5 2v3a2 2 0 0 1-2 2A14 14 0 0 1 3 6a2 2 0 0 1 2-2Z" /></svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12.5 10 17l9-10" /></svg>
  ),
  arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 12h14M13 6l6 6-6 6" /></svg>
  ),
  leaf: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M5 19c0-8 6-13 14-13 0 8-6 13-14 13Z" /><path d="M5 19c2-4 5-6 9-7.5" /></svg>
  ),
  flame: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c2 2 3 4 3 6a5 5 0 0 1-10 0c0-4 3-6 5-13Z" /></svg>
  ),
  menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" {...p}><path d="M4 7h16M4 12h16M4 17h16" /></svg>
  ),
};

// ── Toned texture placeholder (steht für ein Food-Foto) ─────────────────────
function FoodPlaceholder({ tone = 30, label, className = "", rounded = "rounded-xl2", showLabel = true }) {
  const bg = `linear-gradient(150deg,
      hsl(${tone} 42% 64%) 0%,
      hsl(${tone - 8} 38% 48%) 48%,
      hsl(${tone - 14} 34% 34%) 100%)`;
  return (
    <div
      className={cx("grain relative overflow-hidden", rounded, className)}
      style={{ background: bg }}
      role="img"
      aria-label={label ? `Foto-Platzhalter: ${label}` : "Foto-Platzhalter"}
    >
      {/* dezente Teller-/Lichtandeutung */}
      <div className="absolute inset-0" style={{ background: "radial-gradient(120% 90% at 70% 18%, rgba(255,255,255,.22), transparent 55%)" }} />
      <div className="absolute -bottom-10 -right-8 w-40 h-40 rounded-full" style={{ background: "rgba(0,0,0,.10)", filter: "blur(8px)" }} />
      {showLabel && label && (
        <span className="absolute left-3 bottom-3 z-10 font-mono text-[10px] tracking-wide uppercase text-white/85 bg-black/25 backdrop-blur-sm px-2 py-1 rounded-md">
          Foto · {label}
        </span>
      )}
    </div>
  );
}

// ── Diet / Allergen badges ───────────────────────────────────────────────────
function DietBadge({ tag }) {
  const map = {
    vegi:  { t: "Vegetarisch", Icon: Ico.leaf,  cls: "text-olive border-olive/40 bg-olive/8" },
    vegan: { t: "Vegan",       Icon: Ico.leaf,  cls: "text-olive border-olive/40 bg-olive/8" },
    scharf:{ t: "Scharf",      Icon: Ico.flame, cls: "text-terra border-terra/40 bg-terra/8" },
  };
  const m = map[tag];
  if (!m) return null;
  return (
    <span className={cx("inline-flex items-center gap-1 rounded-full border px-2 py-[3px] text-[11px] font-medium", m.cls)}>
      <m.Icon className="w-3 h-3" /> {m.t}
    </span>
  );
}

function AllergenList({ codes }) {
  if (!codes || !codes.length) return null;
  return (
    <span className="font-mono text-[10.5px] uppercase tracking-wide text-muted/80">
      {codes.join(" · ")}
    </span>
  );
}

// Section heading w/ kicker
function SectionHead({ kicker, title, sub, light = false, center = false }) {
  return (
    <div className={cx(center && "text-center mx-auto", center ? "max-w-2xl" : "max-w-3xl")}>
      {kicker && (
        <div className={cx("font-mono text-xs uppercase tracking-[0.22em] mb-4", light ? "text-terra" : "text-terra")}>
          {kicker}
        </div>
      )}
      <h2 className={cx("font-serif leading-[1.02] text-[clamp(2rem,5vw,3.5rem)]", light ? "text-paper" : "text-ink")}>
        {title}
      </h2>
      {sub && <p className={cx("mt-5 text-[17px] leading-relaxed", light ? "text-paper/70" : "text-muted")}>{sub}</p>}
    </div>
  );
}

Object.assign(window, { CHF, cx, useReveal, Ico, FoodPlaceholder, DietBadge, AllergenList, SectionHead });