/* =========================================================================
   22 PATAGONIA SUSHI — componentes de la carta premium
   ========================================================================= */
const fmt = (n) => "$" + n.toLocaleString("es-AR");

/* ---- tags --------------------------------------------------------------- */
const TAGS = {
  pop:    { label: "Más pedido",     cls: "tag--pop" },
  new:    { label: "Nuevo",          cls: "tag--new" },
  chef:   { label: "Chef recomienda",cls: "tag--chef" },
  veggie: { label: "Veggie",         cls: "tag--veggie" },
};
function Tag({ tag }) {
  const t = TAGS[tag];
  if (!t) return null;
  return <span className={"tag " + t.cls}>{t.label}</span>;
}

/* ---- reveal on scroll (IntersectionObserver) ---------------------------- */
function Reveal({ children, className = "", delay = 0, as = "div" }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const root = el.closest(".scroll") || null;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { setShown(true); io.unobserve(e.target); }
        });
      },
      { root, rootMargin: "0px 0px -8% 0px", threshold: 0.12 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Comp = as;
  return (
    <Comp
      ref={ref}
      className={"reveal " + (shown ? "is-in " : "") + className}
      style={{ transitionDelay: shown ? delay + "ms" : "0ms" }}
    >
      {children}
    </Comp>
  );
}

/* ---- slot de imagen premium (estado vacío elegante) --------------------- */
function Photo({ id, label, className = "" }) {
  return (
    <image-slot
      id={"img-" + id}
      class={"photo " + className}
      shape="rect"
      placeholder={label}
    ></image-slot>
  );
}

/* ---- tarjeta de categoría (Explorar Carta) ------------------------------ */
function CategoryCard({ cat, index, onPick }) {
  return (
    <Reveal delay={index * 70} className="catcard-wrap">
      <button className="catcard" onClick={() => onPick(cat.id)}>
        <div className="catcard__media">
          <Photo id={"cat-" + cat.id} label={"Foto · " + cat.name} className="catcard__photo" />
          <span className="catcard__kanji" aria-hidden="true">{cat.icon}</span>
          <div className="catcard__shade"></div>
        </div>
        <div className="catcard__body">
          <div className="catcard__titles">
            <h3 className="catcard__name">{cat.name}</h3>
            <span className="catcard__en">{cat.en}</span>
          </div>
          <span className="catcard__count">{cat.items.length} platos</span>
        </div>
        <span className="catcard__arrow" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 18 18"><path d="M6 3l6 6-6 6" stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </span>
      </button>
    </Reveal>
  );
}

/* ---- product card (imagen grande, premium) ------------------------------ */
function ProductCard({ item, index, featured }) {
  return (
    <Reveal delay={(index % 3) * 80} className="card-wrap">
      <article className={"card" + (featured ? " card--feat" : "")}>
        <div className="card__media">
          <Photo id={item.id} label={"Foto · " + item.name} className="card__photo" />
          {item.tag && <div className="card__tag"><Tag tag={item.tag} /></div>}
        </div>
        <div className="card__body">
          <div className="card__head">
            <h4 className="card__name">{item.name}</h4>
            <span className="card__en">{item.en}</span>
          </div>
          <p className="card__desc">{item.desc}</p>
          <div className="card__foot">
            <span className="card__rule"></span>
            <span className="card__price">{fmt(item.price)}</span>
          </div>
        </div>
      </article>
    </Reveal>
  );
}

/* ---- encabezado de sección ---------------------------------------------- */
function SectionHeader({ cat }) {
  return (
    <Reveal as="header" className="sec" >
      <div className="sec__inner" id={"cat-" + cat.id}>
        <span className="sec__kanji" aria-hidden="true">{cat.icon}</span>
        <div className="sec__titles">
          <span className="sec__sub">{cat.sub}</span>
          <h2 className="sec__name">{cat.name}</h2>
          <span className="sec__en">{cat.en}</span>
        </div>
      </div>
    </Reveal>
  );
}

Object.assign(window, { fmt, Tag, Reveal, Photo, CategoryCard, ProductCard, SectionHeader });