/* Sweet Haven — Photo, ProductCard, MenuGrid */

// Real photo when we have one; a warm animated brand placeholder otherwise.
function Photo({ src, name, className, style }) {
  if (src) {
    return (
      <img className={"sh-photo " + (className || "")} src={src} alt={name}
        loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", ...style }} />
    );
  }
  return (
    <div className={"sh-photo-fallback " + (className || "")} style={style}>
      <span className="sh-fallback-shimmer" />
      <Icon name="cake" size={30} stroke={1.4} />
      <span className="sh-fallback-name">{name}</span>
    </div>
  );
}

function ProductCard({ p, onAdd, onOpen }) {
  const defaultSize = p.sizes[0];
  return (
    <article className="sh-card" onClick={() => onOpen(p)}>
      <div className="sh-card-photo">
        <Photo src={p.img} name={p.name} />
        {p.tags[0] && <span className={"sh-tag tag-" + p.tags[0].toLowerCase()}>{p.tags[0]}</span>}
      </div>
      <div className="sh-card-body">
        <h3 className="sh-card-name">{p.name}</h3>
        <p className="sh-card-desc">{p.desc}</p>
        <div className="sh-card-foot">
          <span className="sh-price"><em className="sh-from">from</em> {money(fromPrice(p))}</span>
          <button
            className="sh-add"
            onClick={(e) => { e.stopPropagation(); onAdd(p, defaultSize, p.cream ? CREAM_OPTIONS[0] : null); }}
          >
            <Icon name="plus" size={15} stroke={2} />Add
          </button>
        </div>
      </div>
    </article>
  );
}

function MenuGrid({ products, onAdd, onOpen, filter, setFilter, compact, onNav }) {
  const shown = filter === "All" ? products : products.filter((p) => p.cat === filter);
  return (
    <section className={"sh-menu" + (compact ? " compact" : "")}>
      <div className="sh-menu-head">
        <div>
          <div className="sh-overline"><span className="sh-rule" />Fresh from the oven</div>
          <h2 className="sh-section-title">{compact ? "Today's favourites" : "The full menu"}</h2>
          {!compact && <p className="sh-menu-note">Baked to order, finished by hand. Cakes come buttercream, whipped, or plain — cookies by the box.</p>}
        </div>
        {compact ? (
          <button className="sh-btn secondary" onClick={() => onNav("Menu")}>See the full menu</button>
        ) : (
          <div className="sh-filter">
            {SH_CATEGORIES.map((c) => (
              <button
                key={c}
                className={"sh-chip-btn" + (filter === c ? " is-active" : "")}
                onClick={() => setFilter(c)}
              >{c}</button>
            ))}
          </div>
        )}
      </div>
      <div className="sh-grid">
        {shown.map((p) => <ProductCard key={p.id} p={p} onAdd={onAdd} onOpen={onOpen} />)}
      </div>
    </section>
  );
}

Object.assign(window, { Photo, ProductCard, MenuGrid });