// ===== RIVAMAR Group — Galería pública (v1.1) =====
const { useState, useEffect } = React;


function Lightbox({ item, onClose, onPrev, onNext }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose, onPrev, onNext]);

  if (!item) return null;
  const local = LOCAL_MAP[item.local];
  return (
    <div className="fixed inset-0 z-[60] bg-carbon/95 backdrop-blur-sm grid place-items-center p-4" onClick={onClose}>
      <button onClick={onClose} className="absolute top-5 right-5 w-11 h-11 grid place-items-center rounded-full bg-white/5 text-gray-300 hover:bg-white/10 hover:text-white">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
      <button onClick={(e) => { e.stopPropagation(); onPrev(); }} className="absolute left-3 sm:left-8 w-11 h-11 grid place-items-center rounded-full bg-white/5 text-gray-300 hover:bg-white/10 hover:text-white">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
      </button>
      <button onClick={(e) => { e.stopPropagation(); onNext(); }} className="absolute right-3 sm:right-8 w-11 h-11 grid place-items-center rounded-full bg-white/5 text-gray-300 hover:bg-white/10 hover:text-white">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
      <div className="max-w-3xl w-full" onClick={(e) => e.stopPropagation()}>
        <ImgSlot label={item.label} src={item.img} tone={local.tono} ratio="16/10" className="w-full rounded-xl" />
        <div className="mt-4 flex items-center justify-between">
          <div>
            <p className="font-display text-lg font-bold text-gray-50">{item.label}</p>
            <p className="text-sm text-gray-400">{local.nombre} · {CAT_LABEL[item.cat]}</p>
          </div>
          {item.destacada && <ExponorBadgeStar />}
        </div>
      </div>
    </div>
  );
}

function ExponorBadgeStar() {
  return <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-gold/15 text-gold border border-gold/30">★ Destacada</span>;
}

function Galeria({ go, initialLocal }) {
  const [filtro, setFiltro] = useState(initialLocal || 'todos');
  const [lbIndex, setLbIndex] = useState(null);

  const filtered = filtro === 'todos' ? GALERIA : GALERIA.filter((g) => g.local === filtro);
  // Destacadas primero
  const ordered = [...filtered].sort((a, b) => (b.destacada ? 1 : 0) - (a.destacada ? 1 : 0));

  const pills = [{ id: 'todos', label: 'Todos' }, ...LOCALES.map((l) => ({ id: l.id, label: l.nombre }))];
  const pillCls = (active) =>
    `px-4 py-2 rounded-full text-sm font-medium transition-colors min-h-[40px] ${
      active ? 'bg-gold text-carbon' : 'bg-iron border border-white/10 text-gray-300 hover:text-gray-50 hover:border-white/30'
    }`;

  return (
    <main>
      <section className="border-b border-white/10 bg-steel/30">
        <div className="max-w-7xl mx-auto px-5 lg:px-8 py-14">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-copper mb-3">Galería de experiencias</p>
          <h1 className="font-display text-3xl md:text-5xl font-bold text-gray-50 tracking-tight">Platos, ambientes y eventos</h1>
          <p className="mt-4 text-base text-gray-400 max-w-2xl leading-relaxed">
            Una muestra de la cocina y los espacios de nuestros tres locales. Filtra por local y haz clic en cualquier imagen para ampliarla.
          </p>
        </div>
      </section>

      <section className="max-w-7xl mx-auto px-5 lg:px-8 py-10">
        <div className="flex flex-wrap gap-2.5 mb-8">
          {pills.map((p) => (
            <button key={p.id} className={pillCls(filtro === p.id)} onClick={() => setFiltro(p.id)}>{p.label}</button>
          ))}
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {ordered.map((g) => {
            const realIndex = GALERIA.indexOf(g);
            return (
              <button key={g.id} onClick={() => setLbIndex(realIndex)} className="relative group rounded-xl overflow-hidden text-left animate-fade-up">
                <ImgSlot label={g.label} src={g.img} tone={LOCAL_MAP[g.local].tono} ratio="1/1" className="w-full group-hover:scale-[1.03] transition-transform duration-300" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                {g.destacada && (
                  <span className="absolute top-2.5 left-2.5 text-[9px] font-mono uppercase px-2 py-1 rounded bg-gold text-carbon font-bold">★ Destacada</span>
                )}
                <div className="absolute bottom-0 left-0 right-0 p-3 opacity-0 group-hover:opacity-100 transition-opacity">
                  <p className="text-sm font-semibold text-gray-50 leading-tight">{g.label}</p>
                  <p className="text-[11px] text-gray-300">{LOCAL_MAP[g.local].nombre} · {CAT_LABEL[g.cat]}</p>
                </div>
              </button>
            );
          })}
        </div>

        <div className="mt-12 text-center">
          <p className="text-gray-400 text-sm mb-4">¿Te gustaría vivir la experiencia?</p>
          <Btn variant="gold" onClick={() => go('reservas')}>Reservar una mesa</Btn>
        </div>
      </section>

      {lbIndex !== null && (
        <Lightbox
          item={GALERIA[lbIndex]}
          onClose={() => setLbIndex(null)}
          onPrev={() => setLbIndex((i) => (i - 1 + GALERIA.length) % GALERIA.length)}
          onNext={() => setLbIndex((i) => (i + 1) % GALERIA.length)}
        />
      )}
    </main>
  );
}

Object.assign(window, { Galeria });