// ===== RIVAMAR Group — Página de Local individual (v1.1) =====

function LocalPage({ slug, go }) {
  const local = SLUG_MAP[slug] || LOCALES[0];
  const fotos = GALERIA.filter((g) => g.local === local.id);

  return (
    <main>
      {/* Hero del local */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute inset-0 img-soft-local">
            <ImgSlot label={local.foto} src={local.foto_img} tone={local.tono} className="w-full h-full" />
          </div>
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to top, rgb(var(--c-carbon) / calc(var(--local-overlay,0.55) * 1.6)), rgb(var(--c-carbon) / calc(var(--local-overlay,0.55) * 1.0)) 45%, rgb(var(--c-carbon) / calc(var(--local-overlay,0.55) * 0.4)))' }}></div>
          <div className="absolute inset-0" style={{ background: 'linear-gradient(to right, rgb(var(--c-carbon) / calc(var(--local-overlay,0.55) * 1.0)), transparent 60%)' }}></div>
        </div>
        <div className="relative max-w-7xl mx-auto px-5 lg:px-8 pt-16 pb-12">
          <button onClick={() => go('home')} className="text-sm text-gray-400 hover:text-gold mb-6 flex items-center gap-1.5">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
            Todos los locales
          </button>
          <span className="inline-block text-[11px] font-mono uppercase tracking-wider px-2.5 py-1 rounded bg-carbon/80 text-gold border border-gold/30 mb-4">{local.tagline}</span>
          <h1 className="font-display text-4xl md:text-6xl font-bold text-gray-50 tracking-tight max-w-3xl leading-[1.05]">{local.nombre}</h1>
          <p className="mt-4 text-lg text-gray-300 max-w-2xl">{local.especialidad}</p>
          <div className="mt-7 flex flex-wrap gap-3">
            <Btn variant="gold" onClick={() => go('reservas', { local: local.id })}>Reservar en {local.nombre}</Btn>
            <Btn variant="ghost" onClick={() => go('galeria', { local: local.id })}>Ver galería del local</Btn>
          </div>
        </div>
      </section>

      <section className="max-w-7xl mx-auto px-5 lg:px-8 py-14 grid lg:grid-cols-[1fr_320px] gap-10 items-start">
        {/* Descripción + menú */}
        <div className="space-y-10">
          <div>
            <h2 className="font-display text-2xl font-bold text-copper mb-3">La experiencia</h2>
            <p className="text-gray-300 leading-relaxed text-[15px]">{local.descripcion}</p>
          </div>

          <div>
            <h2 className="font-display text-2xl font-bold text-copper mb-5">Destacados del menú</h2>
            <div className="divide-y divide-white/5 border border-white/10 rounded-xl overflow-hidden bg-iron">
              {local.menu.map((m) => (
                <div key={m.plato} className="flex items-start justify-between gap-4 p-4 hover:bg-white/[0.02]">
                  <div>
                    <h3 className="font-semibold text-gray-100">{m.plato}</h3>
                    <p className="text-sm text-gray-400 mt-0.5 leading-relaxed">{m.desc}</p>
                  </div>
                  <span className="font-display font-bold text-gold whitespace-nowrap">{m.precio}</span>
                </div>
              ))}
            </div>
            <p className="text-xs text-gray-500 mt-3 font-mono">Precios referenciales · menú sujeto a disponibilidad</p>
          </div>

          <div>
            <div className="flex items-end justify-between mb-5">
              <h2 className="font-display text-2xl font-bold text-copper">Galería</h2>
              <button onClick={() => go('galeria', { local: local.id })} className="text-sm font-semibold text-gold hover:text-goldBright">Ver todo →</button>
            </div>
            <div className="grid grid-cols-3 gap-3">
              {fotos.slice(0, 3).map((g) => (
                <ImgSlot key={g.id} label={g.label} src={g.img} tone={local.tono} ratio="1/1" className="w-full rounded-lg" />
              ))}
            </div>
          </div>

          <div>
            <div className="flex items-center gap-2 mb-5">
              <h2 className="font-display text-2xl font-bold text-copper">Cómo llegar</h2>
              <a href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(local.mapa || local.ubicacion)}`} target="_blank" rel="noopener" className="text-sm font-semibold text-gold hover:text-goldBright">Abrir en Google Maps →</a>
            </div>
            <div className="rounded-xl overflow-hidden border border-white/10 bg-iron">
              <iframe
                title={`Mapa ${local.nombre}`}
                width="100%" height="320" style={{ border: 0, display: 'block' }}
                loading="lazy" referrerPolicy="no-referrer-when-downgrade"
                src={`https://maps.google.com/maps?q=${encodeURIComponent(local.mapa || local.ubicacion)}&output=embed`}>
              </iframe>
            </div>
            <p className="text-xs text-gray-500 mt-2 flex items-center gap-1.5">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              {local.ubicacion}
            </p>
          </div>
        </div>

        {/* Info lateral */}
        <aside className="lg:sticky lg:top-24 bg-iron border border-white/10 rounded-xl p-6 space-y-5">
          <h3 className="font-display font-bold text-gray-50">Información</h3>
          <InfoRow icon="pin" label="Dirección" value={local.ubicacion} />
          <InfoRow icon="clock" label="Horario" value={local.horario} />
          <InfoRow icon="phone" label="Teléfono" value={local.telefono} />
          <InfoRow icon="users" label="Capacidad por reserva" value={local.capacidadLabel} />
          <InfoRow icon="chef" label="Perfil" value={local.perfil} />
          <div className="pt-3 border-t border-white/10">
            <Btn variant="primary" onClick={() => go('reservas', { local: local.id })} className="w-full">Reservar ahora</Btn>
          </div>
        </aside>
      </section>
    </main>
  );
}

function InfoRow({ icon, label, value }) {
  const icons = {
    pin: <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />,
    clock: <g><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></g>,
    phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />,
    users: <g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></g>,
    chef: <path d="M6 13.87A4 4 0 0 1 7.41 6a5.11 5.11 0 0 1 1.05-1.54 5 5 0 0 1 7.08 0A5.11 5.11 0 0 1 16.59 6 4 4 0 0 1 18 13.87V21H6Z M6 17h12" />,
  };
  return (
    <div className="flex gap-3">
      <span className="grid place-items-center w-8 h-8 rounded-lg bg-copper/15 text-copper shrink-0">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">{icons[icon]}</svg>
      </span>
      <div>
        <p className="text-[11px] uppercase tracking-wider text-gray-500">{label}</p>
        <p className="text-sm text-gray-200 mt-0.5 leading-snug">{value}</p>
      </div>
    </div>
  );
}

Object.assign(window, { LocalPage });