/* global React, CATALOGO, CAT_LABELS, detectarPatron, Placeholder, Arr, HeartIcon, useWishlist, waLink */
const { useState, useMemo, useEffect, useCallback, useRef } = React;

/* ════════════════════════════════════════════════════════════════════════════
   FICHA DE PRODUCTO · revisión 6 — FEED tipo red social

   Navegación NATIVA (scroll-snap), no detección de gestos:
     · Scroll VERTICAL (arriba/abajo) → cambia de producto, hace snap al
       siguiente/anterior de la categoría. Como TikTok/Reels.
     · Scroll HORIZONTAL (lados) dentro de cada producto → sus fotos.

   Iconos en COLUMNA vertical, abajo a la derecha (a la altura del pulgar).
   Copy abajo a la izquierda. CTA "Lo quiero" en el copy.
   La info (medidas, patrón) vive en los paneles Dudas / Arma la tuya.
   Vuelta al catálogo sin menú: pastilla de vidrio arriba.
   ════════════════════════════════════════════════════════════════════════════ */

const WA_DUDAS = null;
/* Tres acciones. Armar la pieza NO es un botón: vive dentro de Dudas, porque
   armar es parte de resolver la duda antes de vender — y no todo es armable. */
const RAIL = { gusta: "Me gusta", dudas: "Dudas", enviar: "Muéstrasela" };
const LABEL_EXTRA = { "comedores-perros": "Comedores para perros" };
const labelCat = (c) => (window.CAT_LABELS && window.CAT_LABELS[c]) || LABEL_EXTRA[c] || c || "";

function pushEvento(evento, p, extra) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({ ecommerce: null });
  window.dataLayer.push(Object.assign({
    event: evento,
    ecommerce: { currency: "COP", value: p.precio,
      items: [{ item_id: p.id, item_name: p.nombre, item_variant: p.variante || "",
                item_category: labelCat(p.categoria), price: p.precio }] },
  }, extra || {}));
}

/* Detección de fotos extra (_2…_7) + video. Perezosa: solo cuando el slide se
   activa, para no lanzar cientos de peticiones al abrir el feed. */
function useMediaLazy(p, activo) {
  const [items, setItems] = useState(p?.foto ? [{ type: "img", url: p.foto }] : []);
  const hecho = useRef(false);
  useEffect(() => {
    if (!p || !activo || hecho.current) return;
    hecho.current = true;
    const base = p.foto ? p.foto.replace(/\.[^.]+$/, "").replace(/_\d+$/, "") : null;
    const ext = p.foto ? (p.foto.match(/\.([^.?]+)(\?|$)/)?.[1] || "jpg") : "jpg";
    const checkImg = (url) => new Promise((res) => {
      const im = new window.Image();
      im.onload = () => res({ type: "img", url }); im.onerror = () => res(null);
      im.src = url + "?t=" + Date.now();
    });
    const checkVideo = (url) => fetch(url, { method: "HEAD" })
      .then(r => (r.ok && r.headers.get("content-type")?.includes("video")) ? { type: "video", url } : null)
      .catch(() => null);
    const fotoChecks = base ? Array.from({ length: 6 }, (_, i) => checkImg(`${base}_${i + 2}.${ext}`)) : [];
    const videoCheck = ["mp4", "mov"].reduce((acc, e) =>
      acc.then(f => f || checkVideo(`/assets/productos/${p.id}_video.${e}`)), Promise.resolve(null));
    Promise.all([Promise.all(fotoChecks), videoCheck]).then(([extra, video]) => {
      const fotos = [{ type: "img", url: p.foto }, ...extra.filter(Boolean)];
      setItems(video ? [...fotos, video] : fotos);
    });
  }, [p?.id, activo]);
  return items;
}

/* Muestrea el color de fondo de una foto (promedio de las 4 esquinas). Con eso
   el slide adopta ese color: la foto de estudio en blanco se funde con un fondo
   blanco (piece flotando), el degradado se funde con la foto, y el texto se
   oscurece o aclara según la luminancia. Cae a oscuro si algo falla. */
function useBgColor(url) {
  const [bg, setBg] = useState(null); // { rgb:[r,g,b], light:bool }
  useEffect(() => {
    if (!url) { setBg(null); return; }
    let vivo = true;
    const im = new window.Image();
    im.crossOrigin = "anonymous";
    im.onload = () => {
      try {
        const c = document.createElement("canvas"); c.width = 24; c.height = 24;
        const ctx = c.getContext("2d"); ctx.drawImage(im, 0, 0, 24, 24);
        let r = 0, g = 0, b = 0;
        [[1, 1], [22, 1], [1, 22], [22, 22]].forEach(([x, y]) => {
          const d = ctx.getImageData(x, y, 1, 1).data; r += d[0]; g += d[1]; b += d[2];
        });
        r = Math.round(r / 4); g = Math.round(g / 4); b = Math.round(b / 4);
        const lum = 0.299 * r + 0.587 * g + 0.114 * b;
        if (vivo) setBg({ rgb: [r, g, b], light: lum > 150 });
      } catch (e) { if (vivo) setBg(null); }
    };
    im.onerror = () => { if (vivo) setBg(null); };
    im.src = url;
    return () => { vivo = false; };
  }, [url]);
  return bg;
}

/* ── Colores de la pieza, extraídos de la foto ──────────────────────────────
   El catálogo todavía no tiene el campo `color` (lo cargará la Fase 3), pero
   la información SÍ existe: está en la imagen. Se cuantizan los píxeles del
   tejido (descartando fondo blanco y sombras) y se proponen los dominantes.
   REGLA: el sistema PROPONE, Danny APRUEBA. Por eso se muestran marcados
   como propuesta, nunca como dato confirmado. */
function useColores(url, activo) {
  const [cols, setCols] = useState([]);
  useEffect(() => {
    if (!url || !activo) return;
    let vivo = true;
    const im = new window.Image();
    im.crossOrigin = "anonymous";
    im.onload = () => {
      try {
        const N = 64;
        const c = document.createElement("canvas"); c.width = N; c.height = N;
        const ctx = c.getContext("2d"); ctx.drawImage(im, 0, 0, N, N);
        const d = ctx.getImageData(0, 0, N, N).data;
        const cubos = new Map();
        for (let i = 0; i < d.length; i += 4) {
          const r = d[i], g = d[i + 1], b = d[i + 2], a = d[i + 3];
          if (a < 200) continue;
          const lum = 0.299 * r + 0.587 * g + 0.114 * b;
          if (lum > 232 || lum < 26) continue;           // fondo blanco / sombra dura
          const k = `${r >> 5}-${g >> 5}-${b >> 5}`;      // cuantiza a bloques de 32
          const prev = cubos.get(k) || { n: 0, r: 0, g: 0, b: 0 };
          cubos.set(k, { n: prev.n + 1, r: prev.r + r, g: prev.g + g, b: prev.b + b });
        }
        const orden = [...cubos.values()].sort((a, b) => b.n - a.n)
          .map(o => [Math.round(o.r / o.n), Math.round(o.g / o.n), Math.round(o.b / o.n)]);
        // Descarta tonos demasiado parecidos entre sí
        const elegidos = [];
        for (const rgb of orden) {
          if (elegidos.length >= 5) break;
          const lejos = elegidos.every(e =>
            Math.abs(e[0] - rgb[0]) + Math.abs(e[1] - rgb[1]) + Math.abs(e[2] - rgb[2]) > 70);
          if (lejos) elegidos.push(rgb);
        }
        if (vivo) setCols(elegidos);
      } catch (e) { if (vivo) setCols([]); }
    };
    im.onerror = () => { if (vivo) setCols([]); };
    im.src = url;
    return () => { vivo = false; };
  }, [url, activo]);
  return cols;
}

function useInteres(id, activo) {
  const [count, setCount] = useState(null);
  const [mine, setMine] = useState(false);
  const hecho = useRef(false);
  useEffect(() => {
    if (!id || !activo || hecho.current) return;
    hecho.current = true;
    let vivo = true;
    fetch(`/likes.php?id=${encodeURIComponent(id)}`)
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (vivo && d && typeof d.count === "number") { setCount(d.count); setMine(!!d.mine); } })
      .catch(() => {});
    return () => { vivo = false; };
  }, [id, activo]);
  const toggle = useCallback((quiero) => {
    setMine(quiero);
    setCount(c => (c === null ? c : Math.max(0, c + (quiero ? 1 : -1))));
    fetch("/likes.php", { method: "POST", headers: { "Content-Type": "application/json" },
                          body: JSON.stringify({ id, on: quiero }) })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d && typeof d.count === "number") { setCount(d.count); setMine(!!d.mine); } })
      .catch(() => {});
  }, [id]);
  return { count, mine, toggle };
}

const PATRON_TEXTS = {
  "Precolombino especial": "El más elaborado del taller — doble tensión y el doble de tiempo que un tejido estándar. Cada rombo es un conteo exacto, hilo a hilo.",
  "Precolombino": "Nuestra firma más reconocida. La geometría en rombos se teje contando hilo a hilo, sin plantilla — solo la memoria de las manos.",
  "Lineal con refuerzo": "Intercala bandas de doble hilo: más resistencia y un acabado visual limpio que no pasa desapercibido.",
  "Lineal": "El más puro del catálogo — líneas paralelas tensadas con precisión milimétrica que crean un efecto óptico de movimiento.",
  "Diamante": "Geometría en estado puro. Cada figura exige cambiar la dirección del hilo en ángulos exactos — solo sale bien a mano.",
  "Pirámide": "Crea volumen con una progresión de líneas que se estrechan hacia el centro. Cambia según el ángulo desde el que se mire.",
  "Espiga": "Toma su nombre del grano de trigo — diagonales que se encuentran en un eje central y generan movimiento continuo.",
  "Rombo": "Enmarca el asiento con figuras de cuatro puntas. Cada vértice tiene que cerrarse perfectamente.",
  "Cruz": "Alterna bloques horizontales y verticales que se cruzan en puntos exactos. La dificultad está en la tensión pareja en los dos ejes.",
  "Square": "Una cuadrícula perfecta con cruces de hilo que definen cada celda. Limpio, moderno, preciso.",
  "Tapizado": "La técnica más densa del taller — el hilo cubre toda la superficie sin dejar espacio, para un asiento firme y cálido.",
};

const MENSAJES = [
  "Si me vas a regalar algo este año, que sea esto. 👇",
  "Dejo esto por aquí. Sin presión ninguna. (Con toda la presión.)",
  "Ya sé qué quiero. Llevo días mirándolo.",
  "Necesito tu ojo un segundo. ¿Sí o no?",
  "¿Esto para la casa? Dime la verdad, no lo que quiero oír.",
  "Llevo tres días pensando en esto. ¿Estoy loco?",
  "Mi cumpleaños es pronto. Esto es todo lo que voy a decir.",
  "Encontré la pieza. La única. Mírala.",
  "¿Nos damos este gusto o seguimos siendo responsables?",
  "Esto se teje a mano y se demora 15 días. Hay que decidir ya.",
];


const Trazo = ({ d, size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
       strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{d}</svg>
);
const IconDudas = ({ size }) => <Trazo size={size} d={<><path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-3.3-.6L3 21l1.8-5.2A8.4 8.4 0 1 1 21 11.5z" /><path d="M9.6 9a2.4 2.4 0 0 1 4.6.9c0 1.6-2.4 2.4-2.4 2.4" /><path d="M12 16.5h.01" /></>} />;
const IconEnviar = ({ size }) => <Trazo size={size} d={<><path d="M22 2 11 13" /><path d="M22 2l-7 20-4-9-9-4 20-7z" /></>} />;
const IconGrid = ({ size = 15 }) => <Trazo size={size} d={<><rect x="3" y="3" width="7" height="7" rx="1" /><rect x="14" y="3" width="7" height="7" rx="1" /><rect x="3" y="14" width="7" height="7" rx="1" /><rect x="14" y="14" width="7" height="7" rx="1" /></>} />;

/* Botón del rail vertical. Se adapta al fondo: sobre fondo claro usa círculo
   blanco con icono oscuro; sobre oscuro, círculo oscuro con icono blanco. */
function AccBtn({ icon, label, sub, onClick, activo, light }) {
  const iconColor = activo ? "#fff" : (light ? "var(--ink,#1A1714)" : "#fff");
  const labelColor = light ? "rgba(26,23,20,.72)" : "#fff";
  return (
    <button onClick={(e) => { e.stopPropagation(); onClick(); }} aria-label={label}
            style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5,
                     background: "none", border: "none", padding: 0, cursor: "pointer",
                     WebkitTapHighlightColor: "transparent" }}>
      <span style={{ width: 50, height: 50, borderRadius: "50%", display: "flex",
                     alignItems: "center", justifyContent: "center", color: iconColor,
                     background: activo ? "rgba(200,144,26,.95)"
                                        : light ? "rgba(255,255,255,.78)" : "rgba(20,17,13,.5)",
                     border: `1px solid ${activo ? "rgba(255,255,255,.5)"
                                        : light ? "rgba(26,23,20,.14)" : "rgba(255,255,255,.34)"}`,
                     backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
                     boxShadow: light ? "0 4px 16px rgba(0,0,0,.12)" : "0 4px 18px rgba(0,0,0,.42)" }}>{icon}</span>
      <span style={{ fontFamily: "var(--f-mono)", fontSize: 8.5, letterSpacing: ".06em",
                     textTransform: "uppercase", lineHeight: 1.2, textAlign: "center", color: labelColor,
                     textShadow: light ? "none" : "0 1px 4px rgba(0,0,0,.9)" }}>{label}</span>
      {sub ? <span style={{ fontFamily: "var(--f-mono)", fontSize: 9, marginTop: -2,
                            color: light ? "var(--accent,#C13B1F)" : "#E8C77A",
                            textShadow: light ? "none" : "0 1px 4px rgba(0,0,0,.9)" }}>{sub}</span> : null}
    </button>
  );
}

/* ── Recomendación precisa ──────────────────────────────────────────────────
   No manda a navegar todo el catálogo: puntúa qué tan parecida es cada pieza
   y devuelve solo las más cercanas. Mismo modelo pesa más que misma categoría. */
function similares(p, n = 6) {
  if (!p) return [];
  const pat = detectarPatron(p.variante);
  const puntaje = (x) => {
    let s = 0;
    if (x.nombre === p.nombre) s += 50;                    // mismo modelo, otro tejido
    const xp = detectarPatron(x.variante);
    if (pat && xp === pat) s += 30;                        // mismo patrón
    if (x.categoria === p.categoria) s += 20;              // misma familia
    if (p.precio && x.precio) {                            // rango de precio cercano
      const d = Math.abs(x.precio - p.precio) / p.precio;
      if (d <= 0.25) s += 10; else if (d <= 0.5) s += 4;
    }
    if (x.material && x.material === p.material) s += 5;
    return s;
  };
  return CATALOGO
    .filter((x) => x.id !== p.id && x.foto)
    .map((x) => ({ x, s: puntaje(x) }))
    .filter((o) => o.s > 0)
    .sort((a, b) => b.s - a.s)
    .slice(0, n)
    .map((o) => o.x);
}

/* Un producto = una pantalla del feed. Fotos en scroll horizontal nativo.
   El fondo del slide adopta el color de la foto (blanco de estudio o ambiente),
   la foto va CONTENIDA (alejada, pieza completa) y el degradado se funde con
   ese color. Texto y rail se aclaran/oscurecen según la luminancia. */
function Slide({ prod, activo, overlay, wl, onPanel, onLoQuiero, onGuardarEv, setLightbox, onElegirColores }) {
  const media = useMediaLazy(prod, activo || overlay);
  const interes = useInteres(prod.id, activo);
  const [foto, setFoto] = useState(0);
  const scroller = useRef(null);
  const touch = useRef(null);
  const goFoto = (index) => { const el=scroller.current; if (!el) return; const next=Math.max(0,Math.min(media.length-1,index)); el.scrollLeft=next*el.clientWidth; setFoto(next); };
  const bg = useBgColor(media[foto]?.url || prod.foto);

  const patron = detectarPatron(prod.variante);
  const isOn = wl.has(prod.id) || interes.mine;
  const precioFmt = prod.precio ? prod.precio.toLocaleString("es-CO") : "por confirmar";
  const msgPedir = `Hola DAVA'S, quiero esta pieza: "${prod.nombre}${prod.variante ? " — " + prod.variante : ""}" (${prod.id}), ${prod.precio ? "$" + precioFmt : "precio por confirmar"}. ¿Cómo arrancamos?`;

  const rgb = bg ? bg.rgb : [18, 10, 1];
  const light = bg ? bg.light : false;
  const solid = `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
  const rgba = (a) => `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
  const tCol = light ? "var(--ink,#1A1714)" : "#F7F2EA";
  const tSoft = light ? "rgba(26,23,20,.62)" : "rgba(247,242,234,.82)";
  const tFaint = light ? "rgba(26,23,20,.4)" : "rgba(247,242,234,.55)";
  const shadow = light ? "none" : "0 1px 12px rgba(0,0,0,.8)";
  const precioCol = light ? "var(--accent,#C13B1F)" : "#E2B25C";

  const onScrollFotos = () => {
    const el = scroller.current; if (!el) return;
    setFoto(Math.round(el.scrollLeft / el.clientWidth));
  };
  const onGuardar = () => {
    const quiero = !isOn;
    wl.toggle({ id: prod.id, name: prod.nombre, family: labelCat(prod.categoria), pattern: patron, price: precioFmt });
    interes.toggle(quiero);
    if (quiero) onGuardarEv(prod);
  };

  return (
    <section style={{ position: "relative", height: "100%", width: "100%", scrollSnapAlign: "start",
                      scrollSnapStop: "always", flex: "0 0 100%", overflow: "hidden",
                      background: solid, transition: "background .35s ease" }}>
      {/* Fotos — scroll horizontal nativo con snap. Contenidas (alejadas). */}
      <div ref={scroller} onScroll={onScrollFotos}
           aria-label="Fotografías del producto" tabIndex={0}
           onKeyDown={e => { if(e.key === "ArrowRight") {e.preventDefault();goFoto(foto+1);} if(e.key === "ArrowLeft") {e.preventDefault();goFoto(foto-1);} }}
           onTouchStart={e => { const t=e.touches[0]; touch.current={x:t.clientX,y:t.clientY,index:foto}; }}
           onTouchEnd={e => { const start=touch.current,t=e.changedTouches[0]; touch.current=null; if(start&&t){const dx=t.clientX-start.x,dy=t.clientY-start.y;if(Math.abs(dx)>45&&Math.abs(dx)>Math.abs(dy)*1.3)goFoto(start.index+(dx<0?1:-1));} }}
           onTouchCancel={() => { touch.current=null; }}
           style={{ position: "absolute", inset: 0, display: "flex", overflowX: "auto", overflowY: "hidden",
                    scrollSnapType: "x mandatory", touchAction:"pan-x pan-y", WebkitOverflowScrolling: "touch" }}>
        {media.map((m, i) => (
          <div key={i}
               style={{ position: "relative", flex: "0 0 100%", height: "100%", scrollSnapAlign: "center",
                        cursor: "default" }}>
            {m.type === "video"
              ? <video src={m.url} controls playsInline muted loop
                       style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              : <img src={m.url} draggable={false} alt={`${prod.nombre} foto ${i + 1}`}
                     style={{ position: "absolute", inset: 0, width: "100%", height: "100%",
                              objectFit: "contain", objectPosition: "50% 40%" }} />}
          </div>
        ))}
      </div>

      {/* Degradado que se FUNDE con el color de la foto (no una banda oscura) */}
      {media.length > 1 && <div className="photo-controls">
        <button type="button" aria-label="Foto anterior" disabled={foto===0} onClick={() => goFoto(foto-1)}>←</button>
        <span aria-live="polite">{foto+1} / {media.length}</span>
        <button type="button" aria-label="Foto siguiente" disabled={foto===media.length-1} onClick={() => goFoto(foto+1)}>→</button>
      </div>}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
                    background: `linear-gradient(to bottom, ${rgba(0)} 42%, ${rgba(.55)} 74%, ${rgba(.96)} 100%)` }} />

      {overlay && (
        <>
          {/* Rail VERTICAL, abajo a la derecha (altura del pulgar) */}
          <div style={{ position: "absolute", right: "clamp(10px,3.5vw,26px)",
                        bottom: "calc(env(safe-area-inset-bottom,0px) + clamp(24px,5vh,44px))",
                        display: "flex", flexDirection: "column", gap: 16, zIndex: 6 }}>
            <AccBtn icon={<HeartIcon filled={isOn} size={22} stroke={isOn ? "#fff" : (light ? "var(--ink,#1A1714)" : "#fff")} />}
                    label={RAIL.gusta} sub={interes.count > 0 ? String(interes.count) : null}
                    activo={isOn} onClick={onGuardar} light={light} />
            <AccBtn icon={<IconDudas size={22} />} label={RAIL.dudas} onClick={() => onPanel("dudas", prod)} light={light} />
            <AccBtn icon={<IconEnviar size={22} />} label={RAIL.enviar} onClick={() => onPanel("enviar", prod)} light={light} />
          </div>

          {/* Copy abajo a la izquierda */}
          <div style={{ position: "absolute", left: "clamp(16px,5vw,56px)", right: "clamp(84px,22vw,140px)",
                        bottom: "calc(env(safe-area-inset-bottom,0px) + clamp(24px,5vh,44px))", zIndex: 5 }}>
            {media.length > 1 && (
              <div style={{ display: "flex", gap: 6, marginBottom: 14 }}>
                {media.map((_, i) => (
                  <button type="button" aria-label={`Ver foto ${i+1}`} onClick={() => goFoto(i)} key={i} style={{ cursor:"pointer",border:0,padding:0,width: i === foto ? 26 : 16, height: 12, borderRadius: 6,
                                         background: i === foto ? (light ? "var(--ink,#1A1714)" : "#fff")
                                                               : (light ? "rgba(26,23,20,.22)" : "rgba(255,255,255,.4)"),
                                         transition: "width .2s" }} />
                ))}
              </div>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
              <span style={{ width: 26, height: 1, background: "#C8901A", flexShrink: 0 }} />
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".15em",
                             textTransform: "uppercase", color: tSoft, textShadow: shadow }}>
                {patron ? `${patron} · se teje para ti` : "Se teje para ti · 15 días"}
              </span>
            </div>
            <h1 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic", fontWeight: 300,
                         fontSize: "clamp(32px,7.5vw,58px)", lineHeight: .98, letterSpacing: "-.02em", margin: 0,
                         color: tCol, textShadow: light ? "none" : "0 2px 40px rgba(0,0,0,.7)" }}>{prod.nombre}</h1>
            {prod.variante ? (
              <div style={{ marginTop: 8, fontFamily: "var(--f-mono)", fontSize: 10.5, letterSpacing: ".13em",
                            textTransform: "uppercase", color: tSoft, textShadow: shadow }}>{prod.variante}</div>
            ) : null}
            <div style={{ marginTop: 12, display: "flex", alignItems: "baseline", gap: 10 }}>
              <span style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: "clamp(22px,4.4vw,30px)",
                             color: precioCol, textShadow: light ? "none" : "0 2px 18px rgba(0,0,0,.8)" }}>{prod.precio ? `$ ${precioFmt}` : "Consultar precio"}</span>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".12em", color: tFaint }}>COP</span>
            </div>
            <div style={{ marginTop: 16 }}>
              <a href={onElegirColores ? "#colores" : waLink(msgPedir)} target={onElegirColores ? undefined : "_blank"} rel="noopener"
                 onClick={(e) => { e.stopPropagation(); if (onElegirColores) { e.preventDefault(); onElegirColores(); } else onLoQuiero(prod); }}
                 style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                          padding: "15px 30px", borderRadius: 100, background: "var(--accent,#C13B1F)", color: "#fff",
                          textDecoration: "none", fontFamily: "var(--f-mono)", fontSize: 12, fontWeight: 600,
                          letterSpacing: ".14em", textTransform: "uppercase",
                          border: "1px solid rgba(255,255,255,.18)", boxShadow: "0 8px 28px rgba(0,0,0,.4)" }}>
                {onElegirColores ? "Elegir colores" : "Lo quiero"}
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                     strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
              </a>
            </div>
          </div>
        </>
      )}
    </section>
  );
}

function Ficha({ productId, setPage, openFicha, openModelo, goCatalog }) {
  const wl = useWishlist();
  const pid = (productId || "").toString().toUpperCase();
  const p0 = CATALOGO.find((x) => (x.id || "").toUpperCase() === pid);
  const cont = useRef(null);
  const [activo, setActivo] = useState(0);
  const [panel, setPanel] = useState(null);       // { tipo, prod } | null
  const [msg, setMsg] = useState(0);
  const [lightbox, setLightbox] = useState(null);  // { prod, media, i } | null

  /* Tres frames diseñados, no una lista infinita de productos:
       1 · la pieza (hero con acciones)
       2 · sus parámetros: descripción, patrón, colores, estructura
       3 · similares en carrusel + cómo se hace + salida al catálogo   */
  const recomendadas = useMemo(() => similares(p0, 10), [p0?.id]);
  const slides = useMemo(() => {
    if (!p0) return [];
    /* El frame de armar solo existe si esa estructura tiene imagen croma.
       Sin imagen no hay nada honesto que simular, así que no se muestra. */
    const s = [{ tipo: "prod", prod: p0 }];
    s.push({ tipo: "cierre" });
    return s;
  }, [p0?.id]);

  /* Entra siempre en la pieza pedida (índice 0). */
  useEffect(() => {
    const el = cont.current; if (!el) return;
    el.scrollTop = 0;
    setActivo(0);
  }, [p0?.id]);

  /* Al hacer scroll, detecta el slide activo; si es producto, actualiza URL y mide. */
  useEffect(() => {
    const el = cont.current; if (!el) return;
    /* Cálculo directo, sin requestAnimationFrame: es una división y una
       comparación. Con rAF, un navegador que lo estrangule (pestaña en
       segundo plano) dejaba el feed sin actualizar. */
    const onScroll = () => {
      if (!el.clientHeight) return;
      const i = Math.round(el.scrollTop / el.clientHeight);
      if (i !== activo && slides[i]) {
        setActivo(i);
        const s = slides[i];
        if (s.tipo === "prod") {
          const prod = s.prod;
          const path = prod.catSlug && prod.slug ? `/${prod.catSlug}/${prod.slug}` : `/producto/${prod.id.toLowerCase()}`;
          window.history.replaceState({ page: "ficha", params: { productId: prod.id } }, "", path);
          pushEvento("view_item", prod);
        }
      }
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    return () => el.removeEventListener("scroll", onScroll);
  }, [activo, slides]);

  /* Bloquea el scroll del feed cuando hay panel/lightbox. */
  useEffect(() => {
    const el = cont.current; if (!el) return;
    el.style.overflowY = (panel || lightbox) ? "hidden" : "scroll";
  }, [panel, lightbox]);

  useEffect(() => { setMsg(Math.floor(Math.random() * MENSAJES.length)); }, [panel?.prod?.id]);

  if (!p0) {
    return (
      <section className="ficha" style={{ overflowX: "hidden", maxWidth: "100vw" }}>
        <div className="crumb">Producto no encontrado</div>
        <h1>—</h1>
        <button className="btn line" onClick={goCatalog}>← Volver al catálogo</button>
      </section>
    );
  }

  const prodActivo = (slides[activo] && slides[activo].tipo === "prod") ? slides[activo].prod : p0;

  return (
    <>
      <style>{`
        .wa-float { display: none !important; }
        .related-arrow {width:40px;height:40px;border:1px solid #d5c8b7;border-radius:50%;background:transparent;color:#30251e;cursor:pointer;font-size:18px}
        .photo-controls {position:absolute;top:40%;left:12px;right:12px;z-index:8;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
        .photo-controls button {pointer-events:auto;border:1px solid #d8cfc3;border-radius:50%;background:#fffaf3dd;color:#30251e;width:40px;height:40px;cursor:pointer}
        .photo-controls button:disabled {opacity:.3;cursor:default}
        .photo-controls span {align-self:flex-start;border-radius:20px;padding:5px 9px;background:#fffaf3dd;color:#30251e;font-size:10px;transform:translateY(-24px)}
        .color-choice {width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:13px 14px;border:1px solid #d5c8b7;border-radius:12px;background:#fffaf3;color:#30251e;cursor:pointer}
        .color-choice small,.color-choice strong {display:block}.color-choice small {font-size:11px;margin-bottom:4px;color:#786957}.color-choice strong {font-size:14px;font-weight:500}
        .color-options {padding:8px;border:1px solid #e2d7c9;border-radius:12px}.color-options input {width:100%;padding:9px;border:1px solid #d5c8b7;border-radius:8px;margin-bottom:8px;box-sizing:border-box}
        .color-options .material-grid {max-height:180px;grid-template-columns:repeat(4,minmax(0,1fr))}.material-card:disabled{opacity:.4;cursor:default}
        .color-done {border:0;border-radius:20px;padding:7px 16px;background:#30251e;color:#fff;cursor:pointer}
        .color-extras {margin:15px 0 0;padding:10px 0;border:0;border-top:1px solid #d5c8b7}.color-extras legend {font-size:12px;color:#786957;padding-right:8px}.color-extras label {display:flex;gap:9px;align-items:center;font-size:13px;margin:10px 0}.color-extras input{accent-color:#a63c24;width:17px;height:17px}
        .color-send {display:block;text-align:center;background:#b94327;color:#fff;padding:14px;border-radius:30px;text-decoration:none;font-size:14px}
        .product-faq details,.product-specs {border-bottom:1px solid #d5c8b7;padding:13px 0}.product-faq summary,.product-specs summary{cursor:pointer;font-size:14px}.product-faq p{font-size:13px;line-height:1.65;color:#655849;margin:10px 0 0}.product-specs>summary{margin-bottom:12px}
        @media(max-width:500px){.color-options .material-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
        .davas-feed::-webkit-scrollbar { display: none; }
        .davas-feed { -ms-overflow-style: none; scrollbar-width: none; }
        /* El carrusel se mueve solo: la barra de scroll sobra */
        /* Sin scroll-behavior:smooth — con "reducir movimiento" el navegador lo
           ignora y el carrusel se congelaría. El deslizamiento lo animamos
           nosotros, así avanza siempre. */
        .cierre-pista::-webkit-scrollbar { display: none; }
        .cierre-pista { -ms-overflow-style: none; scrollbar-width: none; }
        /* Desktop: similares y proceso lado a lado, sin obligar a bajar */
        /* La pieza manda; se limita por ALTURA para que nunca desborde */
        .armar-vista { display: flex; justify-content: center; margin-bottom: 14px; }
        .armar-vista canvas, .armar-vista img { max-height: 38vh; max-width: 74vw; object-fit: contain; }
        .material-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; max-height:260px; overflow-y:auto; padding:4px; }
        .material-card { background:#fffaf3; border:1px solid #d9cfc1; border-radius:10px; padding:5px; cursor:pointer; color:#30251e; text-align:left; }
        .material-card[aria-pressed=true] { border:2px solid #a63c24; padding:4px; background:#f5e6d7; }
        .material-card:focus-visible, .material-tab:focus-visible { outline:3px solid #a63c24; outline-offset:2px; }
        .material-card img { width:100%; height:45px; object-fit:cover; border-radius:6px; }
        .material-card span { display:block; font-size:11px; line-height:1.25; margin-top:4px; }
        .material-card small { font-size:9px; opacity:.65; }
        @media (min-width: 900px) {
          /* minmax(0,...) evita que el carrusel infle su columna y desborde */
          .cierre-wrap { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
                         align-items: start; gap: 8px; }
          .cierre-col { min-width: 0; }
          .cierre-col:last-child { padding-top: 0 !important; }
          /* Armar: silla a la izquierda, controles a la derecha */
          .armar-wrap { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
                        align-items: center; gap: 32px; }
          .armar-vista { margin-bottom: 0; }
          .armar-vista canvas, .armar-vista img { max-height: 66vh; max-width: 100%; }
        }
      `}</style>

      {/* Vuelta al catálogo sin menú — pastilla de vidrio arriba, centrada */}
      <button onClick={goCatalog}
              style={{ position: "fixed", top: "calc(env(safe-area-inset-top,0px) + 14px)", left: "50%",
                       transform: "translateX(-50%)", zIndex: 300, display: "inline-flex", alignItems: "center",
                       gap: 8, padding: "8px 15px", borderRadius: 100, cursor: "pointer", color: "#F7F2EA",
                       background: "rgba(20,17,13,.42)", border: "1px solid rgba(255,255,255,.28)",
                       backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
                       fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase",
                       textShadow: "0 1px 6px rgba(0,0,0,.6)" }}>
        <IconGrid size={13} /> {labelCat(p0.categoria)}
      </button>

      {/* FEED vertical con snap */}
      <div ref={cont} className="davas-feed"
           style={{ height: "100svh", width: "100%",
                    overflowY: "scroll", overflowX: "hidden", scrollSnapType: "y mandatory",
                    WebkitOverflowScrolling: "touch", background: "#120A01" }}>
        <div style={{ display: "flex", flexDirection: "column" }}>
          {slides.map((s, i) => (
            <div key={s.tipo} style={{ height: "100svh", flex: "0 0 100svh" }}>
              {s.tipo === "prod" && (
                <Slide prod={s.prod} activo={i === activo} overlay={Math.abs(i - activo) <= 1}
                       wl={wl}
                       onElegirColores={puedeElegirColores(s.prod) ? () => setPanel({ tipo: "colores", prod: s.prod }) : null}
                       onPanel={(tipo, pr) => { pushEvento("preguntar", pr, { etapa: "consideracion", destino: tipo });
                                                setPanel({ tipo, prod: pr }); }}
                       onLoQuiero={(pr) => pushEvento("pedir", pr, { etapa: "conversion", lead_source: "whatsapp_ficha" })}
                       onGuardarEv={(pr) => pushEvento("guardar", pr, { etapa: "interes" })}
                       setLightbox={setLightbox} />
              )}
              {s.tipo === "armar" && (
                <SlideArmar prod={p0} activo={i === activo}
                            onPedir={(pr) => pushEvento("pedir", pr, { etapa: "conversion", lead_source: "configurador" })} />
              )}
              {s.tipo === "cierre" && (
                <SlideCierre prod={p0} recomendadas={recomendadas} activo={i === activo}
                             openFicha={openFicha} goCatalog={goCatalog} />
              )}
            </div>
          ))}
        </div>
      </div>

      {/* SEO oculto del producto activo */}
      <div style={{ position: "absolute", width: 1, height: 1, overflow: "hidden",
                    clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }} aria-hidden="true">
        {prodActivo.nombre}{prodActivo.variante ? " — " + prodActivo.variante : ""}.
        {(() => { const pat = detectarPatron(prodActivo.variante); return pat && PATRON_TEXTS[pat] ? " " + PATRON_TEXTS[pat] : ""; })()}
        {prodActivo.material ? " Tejida en " + prodActivo.material + "." : ""}
        {prodActivo.dimensiones ? " Medidas: " + prodActivo.dimensiones + "." : ""} Hecha a pedido, entrega ~15 días.
      </div>

      {/* ═══ PANELES ═══ */}
      {panel?.tipo === "colores" && <Sheet onClose={() => setPanel(null)} titulo="Hazla tuya." subtitulo={panel.prod.nombre}>
        <SlideArmar prod={panel.prod} activo={true} onPedir={pr => pushEvento("pedir", pr, {lead_source:"colores"})} />
      </Sheet>}
      {panel?.tipo === "dudas" && (
        <PanelDudas prod={panel.prod} onClose={() => setPanel(null)}
                    openFicha={(id) => { setPanel(null); openFicha(id); }} />
      )}
      {panel?.tipo === "enviar" && <PanelEnviar prod={panel.prod} msg={msg} setMsg={setMsg} onClose={() => setPanel(null)} />}

      {/* ═══ LIGHTBOX ═══ */}
      {lightbox && (
        <Lightbox data={lightbox} onClose={() => setLightbox(null)} />
      )}
    </>
  );
}

/* ── Paneles ──────────────────────────────────────────────────────────────── */
function Sheet({ onClose, titulo, subtitulo, children }) {
  const ref = useRef(null);
  useEffect(() => {
    const previous = document.activeElement;
    ref.current?.focus();
    return () => previous?.focus?.();
  }, []);
  return (
    <div onClick={onClose}
         style={{ position: "fixed", inset: 0, background: "rgba(18,10,1,.78)", zIndex: 9500,
                  display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
      <div ref={ref} role="dialog" aria-modal="true" aria-label={titulo} tabIndex={-1}
           onKeyDown={e => {
             if (e.key === "Escape") onClose();
             if (e.key === "Tab") {
               const nodes = [...ref.current.querySelectorAll('button:not(:disabled),a[href],input:not(:disabled),select,summary')].filter(x => x.getClientRects().length);
               if (nodes.length && e.shiftKey && (document.activeElement === nodes[0] || document.activeElement === ref.current)) { e.preventDefault(); nodes[nodes.length-1].focus(); }
               else if (nodes.length && !e.shiftKey && document.activeElement === nodes[nodes.length-1]) { e.preventDefault(); nodes[0].focus(); }
             }
           }} onClick={(e) => e.stopPropagation()}
           style={{ width: "100%", maxWidth: 560, background: "var(--bone,#F4EFE6)",
                    borderRadius: "18px 18px 0 0", maxHeight: "88vh", overflowY: "auto",
                    padding: "22px clamp(18px,5vw,30px) calc(env(safe-area-inset-bottom,0px) + 26px)" }}>
        <button type="button" onClick={onClose} aria-label="Cerrar panel" style={{float:"right",border:0,background:"transparent",fontSize:24,cursor:"pointer",padding:"0 4px"}}>×</button>
        <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic",
                      fontSize: 24, color: "var(--ink,#1A1714)" }}>{titulo}</div>
        {subtitulo ? (
          <div style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".1em",
                        textTransform: "uppercase", color: "rgba(26,23,20,.45)", margin: "6px 0 18px" }}>{subtitulo}</div>
        ) : <div style={{ height: 12 }} />}
        {children}
      </div>
    </div>
  );
}

function Detalle({ prod }) {
  const patron = detectarPatron(prod.variante);
  return (
    <>
      {patron && PATRON_TEXTS[patron] ? (
        <p style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: "clamp(15px,2vw,18px)",
                    lineHeight: 1.55, fontWeight: 300, margin: "0 0 20px", color: "var(--ink,#1A1714)" }}>
          {PATRON_TEXTS[patron]}</p>
      ) : null}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(130px,1fr))", gap: "16px 24px" }}>
        {[["Material tejido", prod.material], ["Acabado", prod.acabados], ["Medidas", prod.dimensiones],
          ["Patrón", patron], ["Familia", labelCat(prod.categoria)]]
          .filter(([, v]) => v && String(v).trim()).map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: "var(--f-mono)", fontSize: 9, letterSpacing: ".14em",
                          textTransform: "uppercase", color: "rgba(26,23,20,.45)", marginBottom: 4 }}>{k}</div>
            <div style={{ fontSize: 14, color: "var(--ink,#1A1714)" }}>{v}</div>
          </div>
        ))}
      </div>
    </>
  );
}

/* Módulo de DUDAS — aquí también se ayuda a armar la pieza, porque armar es
   parte de resolver la duda antes de la venta, no un botón aparte (y no todas
   las piezas son armables). Si el modelo tiene otros tejidos, aparecen; si no,
   simplemente no se muestra esa parte. */
function PanelDudas({ prod, onClose }) {
  const questions = [
    ["¿Cuánto se demora?", "La fabricación es a pedido y el plazo orientativo es de unos 15 días. Confirmamos la fecha para tu pieza antes de iniciar; el tiempo de transporte se calcula aparte."],
    ["¿Cómo funciona el envío?", "Despachamos desde Bogotá. El costo y el tiempo de entrega dependen del destino y del tamaño de la pieza; te los confirmamos antes de cerrar el pedido."],
    ["¿Puedo elegir los colores?", "Sí. En «Elegir colores» puedes escoger el color del tejido y el de la estructura. Conservamos el diseño del tejido de la pieza que estás viendo y confirmamos los acabados disponibles para su material."],
    ["¿Puedo añadir balancines o descansabrazos?", "Puedes solicitar balancines para tu silla y descansabrazos de madera en Pavo Real desde el selector. Si tu modelo ya los incluye, aparecen marcados. El taller confirma la compatibilidad y el valor de los extras."],
  ];
  return <Sheet onClose={onClose} titulo="Preguntas frecuentes" subtitulo={prod.nombre}>
    <div className="product-faq">{questions.map(([q,a]) => <details key={q}><summary>{q}</summary><p>{a}</p></details>)}</div>
    <details className="product-specs"><summary>Medidas y materiales de esta pieza</summary><Detalle prod={prod} /></details>
    <a href={waLink(`Hola DAVA'S, tengo otra pregunta sobre ${prod.nombre}${prod.variante ? " · " + prod.variante : ""}.`)} target="_blank" rel="noopener noreferrer" style={{display:"inline-block",marginTop:18,color:"#a63c24"}}>¿Tienes otra pregunta? Escríbenos ↗</a>
  </Sheet>;
}

/* ── Vista previa real de la pieza en el color elegido ──────────────────────
   La imagen de cada estructura viene con el tejido en MAGENTA. Ese magenta es
   la marca: se detecta por tono y se repinta al color pedido conservando la
   luminancia de cada píxel, así el brillo y la sombra de cada hilo quedan
   intactos y el resultado se ve como una foto real.
   La madera, el metal y el fondo no se tocan nunca. */
const ESTRUCTURA_CROMA = {
  "Pavo Real": "/assets/configurador/pavo-real.png",
};
const puedeElegirColores = (p) => !!p && (/tejid|mimbre|pl[aá]stic|pvc|rat[aá]n|junco/i.test([p.material,p.variante,p.nombre].join(" ")) || !!detectarPatron(p.variante) || /^(sillas|mecedoras|sillas-bar|sofas)$/.test(p.categoria));

/* Zonas de color marcadas en el render. Cada estructura puede traer el tejido
   dividido en hasta tres cromas; el sistema detecta solas cuáles existen y
   ofrece un selector por cada una. Con una sola zona, un solo color. */
const ZONAS_CROMA = [
  { id: "z1", nombre: "Color 1", h0: 280, h1: 350 },  // magenta
  { id: "z2", nombre: "Color 2", h0: 90,  h1: 165 },  // verde
  { id: "z3", nombre: "Color 3", h0: 185, h1: 255 },  // azul
];

function SillaCroma({ src, colores, alto = 320, onZonas, onError }) {
  const lienzo = useRef(null);
  const base = useRef(null);
  const [listo, setListo] = useState(false);

  /* Se procesa la imagen una sola vez: qué píxel pertenece a qué zona y con
     qué factor de luz. Repintar después es instantáneo. */
  useEffect(() => {
    if (!src) return;
    let vivo = true;
    setListo(false);
    base.current = null;
    const im = new window.Image();
    im.crossOrigin = "anonymous";
    im.onload = () => {
      if (!vivo) return;
      // Preserve native detail instead of enlarging a 420px intermediate.
      const esc = Math.min(1, 1672 / im.naturalHeight);
      const w = Math.max(1, Math.round(im.naturalWidth * esc));
      const h = Math.max(1, Math.round(im.naturalHeight * esc));
      const c = document.createElement("canvas");
      c.width = w; c.height = h;
      const ctx = c.getContext("2d");
      ctx.drawImage(im, 0, 0, w, h);
      let img;
      try { img = ctx.getImageData(0, 0, w, h); } catch (e) { if (onError) onError(); return; }
      const d = img.data;
      const acum = ZONAS_CROMA.map(() => ({ idx: [], L: [], sum: 0, n: 0 }));
      for (let i = 0; i < d.length; i += 4) {
        const r = d[i], g = d[i + 1], b = d[i + 2];
        const M = Math.max(r, g, b), m = Math.min(r, g, b), dd = M - m;
        if (!dd) continue;
        const s = M ? dd / M : 0;
        if (s < 0.22) continue;
        let hu;
        if (M === r) hu = 60 * (((g - b) / dd) % 6);
        else if (M === g) hu = 60 * ((b - r) / dd + 2);
        else hu = 60 * ((r - g) / dd + 4);
        hu = (hu + 360) % 360;
        const zi = ZONAS_CROMA.findIndex(z => hu >= z.h0 && hu <= z.h1);
        if (zi < 0) continue;
        const L = 0.299 * r + 0.587 * g + 0.114 * b;
        acum[zi].idx.push(i); acum[zi].L.push(L);
        if (s > 0.45) { acum[zi].sum += L; acum[zi].n++; }
      }
      /* Solo cuentan las zonas con presencia real, no ruido de compresión. */
      const minPx = (w * h) * 0.004;
      const zonas = [];
      acum.forEach((a, zi) => {
        if (a.idx.length < minPx) return;
        const Lref = a.n ? a.sum / a.n : 128;
        zonas.push({
          def: ZONAS_CROMA[zi],
          idx: Int32Array.from(a.idx),
          k: Float32Array.from(a.L, (L) => Math.max(0.25, Math.min(1.6, L / Lref))),
        });
      });
      base.current = { w, h, img, zonas };
      if (vivo) { setListo(true); if (onZonas) onZonas(zonas.length); }
    };
    im.onerror = () => { if (vivo && onError) onError(); };
    im.src = src;
    return () => { vivo = false; };
  }, [src, alto]);

  /* Repinta cada zona con su color. */
  useEffect(() => {
    const b = base.current, cv = lienzo.current;
    if (!listo || !b || !cv) return;
    const d = b.img.data;
    b.zonas.forEach((z, zi) => {
      const hex = colores[zi] || colores[0] || "#C8AB7A";
      const R = parseInt(hex.slice(1, 3), 16), G = parseInt(hex.slice(3, 5), 16), B = parseInt(hex.slice(5, 7), 16);
      for (let j = 0; j < z.idx.length; j++) {
        const i = z.idx[j], k = z.k[j];
        d[i] = Math.min(255, R * k);
        d[i + 1] = Math.min(255, G * k);
        d[i + 2] = Math.min(255, B * k);
      }
    });
    cv.width = b.w; cv.height = b.h;
    cv.getContext("2d").putImageData(b.img, 0, 0);
  }, [colores, listo]);

  return (
    <canvas ref={lienzo} aria-label="Vista previa de la pieza en los colores elegidos"
            style={{ display: "block", width: "auto", height: "auto" }} />
  );
}

/* ── Precio real, no calculado ──────────────────────────────────────────────
   No se inventan diferencias ni recargos: la misma estructura ya existe en el
   catálogo como silla, como mecedora y con o sin brazos, cada una con su
   precio. Al cambiar una opción se busca esa pieza real y se usa SU precio.
   Si esa combinación todavía no existe, se dice honestamente que se cotiza. */
/* "Brazos" está anotado de forma inconsistente: en unas piezas va en
   `variante` ("+ brazos madera"), en otras en `acabados` ("Brazos en Madera").
   Se revisan los tres campos hasta que el CMS unifique esto. */
const conBrazos = (p) => {
  if (!p) return false;
  const t = [p.variante, p.nombre_full, p.acabados].filter(Boolean).join(" ");
  return /brazo/i.test(t) && !/sin\s+brazo/i.test(t);
};

/* Categorías que representan la misma pieza sentada, en sus dos formas. */
const PAR_TIPO = { sillas: "mecedoras", mecedoras: "sillas" };

function buscarSKU(base, categoria, brazos) {
  const pat = detectarPatron(base.variante);
  const cands = CATALOGO.filter(x =>
    x.nombre === base.nombre && x.categoria === categoria &&
    conBrazos(x) === brazos && x.precio);
  if (!cands.length) return null;
  // Prefiere la que comparta el mismo tejido; si no, la más barata de esa forma
  return cands.find(x => detectarPatron(x.variante) === pat) || null;
}

// The catalog stores only selected public codes, never internal Gestión data.
function SlideArmar({ prod, activo, onPedir }) {
  const [library, setLibrary] = useState(null);
  const [failed, setFailed] = useState(false);
  const [retry, setRetry] = useState(0);
  const [tab, setTab] = useState(null);
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState([]);
  const [paint, setPaint] = useState(null);
  const [arms, setArms] = useState(conBrazos(prod));
  const [rock, setRock] = useState(prod.categoria === "mecedoras");
  const pavo = /pavo real/i.test(prod.nombre);
  const chair = ["sillas", "mecedoras"].includes(prod.categoria);
  useEffect(() => {
    if (!activo) return;
    const abort = new AbortController();
    setFailed(false);
    fetch("/materiales-publicos.php", { cache:"no-store", signal:abort.signal })
      .then(r => { if (!r.ok) throw Error(); return r.json(); })
      .then(d => { if (!Array.isArray(d.mimbre) || !d.mimbre.length || !Array.isArray(d.pintura)) throw Error(); setLibrary(d); })
      .catch(e => { if (e.name !== "AbortError") setFailed(true); });
    return () => abort.abort();
  }, [activo, retry]);
  const norm = s => String(s).normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
  const list = (library?.[tab] || []).filter(x => norm(x.name).includes(norm(query)));
  const message = [
    `Hola DAVA'S, me interesa ${prod.nombre}${prod.variante ? " · " + prod.variante : ""}.`,
    `Color del tejido: ${selected.length ? selected.map(x => x.name).join(", ") : "como en la foto"}.`,
    `Color de estructura: ${paint ? paint.name : "como en la foto"}.`,
    pavo ? `Descansabrazos de madera: ${arms ? "sí" : "no"}.` : null,
    chair ? `Balancines: ${rock ? "sí" : "no"}.` : null,
    "Conservar el tejido de esta silla. ¿Me confirman colores, extras compatibles, plazo y precio final?",
    `https://artedavas.com${prod.catSlug && prod.slug ? "/" + prod.catSlug + "/" + prod.slug : "/producto/" + prod.id.toLowerCase()}`,
  ].filter(Boolean).join("\n");
  const toggle = t => { setTab(old => old === t ? null : t); setQuery(""); };
  return <div className="color-compact">
    <p style={{fontSize:13,lineHeight:1.6,margin:"0 0 18px"}}>Elige el color del tejido y de la estructura. El diseño del tejido será el de esta pieza.</p>
    <div style={{display:"grid",gap:9}}>
      {[["mimbre","Color del tejido",selected.length ? selected.map(x => x.name).join(" · ") : "Como en la foto"],["pintura","Color de estructura",paint?.name || "Como en la foto"]].map(([id,label,value]) => <React.Fragment key={id}>
        <button className="color-choice" type="button" aria-expanded={tab === id} onClick={() => toggle(id)}><span><small>{label}</small><strong>{value}</strong></span><span aria-hidden="true">{tab === id ? "−" : "+"}</span></button>
        {tab === id && <div className="color-options">
          {failed ? <div role="alert">No pudimos cargar las muestras. <button type="button" onClick={() => setRetry(x => x+1)}>Reintentar</button></div> : !library ? <p role="status">Cargando muestras…</p> : <>
            <input aria-label="Buscar color" placeholder="Buscar un color" value={query} onChange={e => setQuery(e.target.value)} />
            <div className="material-grid">{list.map(item => {
              const checked = id === "pintura" ? paint?.code === item.code : selected.some(x => x.code === item.code);
              return <button type="button" key={item.code} className="material-card" aria-label={item.name} aria-pressed={checked} disabled={id === "mimbre" && selected.length >= 3 && !checked} onClick={() => {
                if (id === "pintura") { setPaint(checked ? null : item); setTab(null); }
                else setSelected(old => checked ? old.filter(x => x.code !== item.code) : [...old,item]);
              }}><img src={item.image} alt="" loading="lazy" /><span>{item.name}</span></button>;
            })}</div>
            {!list.length && <p role="status">No encontramos ese color.</p>}
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:8}}><small>{id === "mimbre" ? "Hasta 3 colores para consultar" : "Según el material de tu pieza"}</small><button type="button" className="color-done" onClick={() => setTab(null)}>Listo</button></div>
          </>}
        </div>}
      </React.Fragment>)}
    </div>
    {(pavo || chair) && <fieldset className="color-extras"><legend>Detalles para hacerla tuya</legend>
      {pavo && <label><input type="checkbox" checked={arms} disabled={conBrazos(prod)} onChange={e => setArms(e.target.checked)} />{conBrazos(prod) ? "Descansabrazos de madera incluidos" : "Añadir descansabrazos de madera"}</label>}
      {chair && <label><input type="checkbox" checked={rock} disabled={prod.categoria === "mecedoras"} onChange={e => setRock(e.target.checked)} />{prod.categoria === "mecedoras" ? "Balancines incluidos" : "Solicitar balancines"}</label>}
    </fieldset>}
    <p style={{fontSize:11,color:"#786957",lineHeight:1.5,margin:"14px 0"}}>Confirmaremos contigo los colores, los extras compatibles y el precio final. Las muestras pueden variar ligeramente en pantalla.</p>
    <a className="color-send" href={waLink(message)} target="_blank" rel="noopener noreferrer" onClick={() => onPedir(prod)}>Consultar mi elección ↗</a>
  </div>;
}

/* ── FRAME 3 · Cierre: similares en carrusel + cómo se hace + catálogo ────── */
function SlideCierre({ prod, recomendadas, activo, openFicha, goCatalog }) {
  const pista = useRef(null);
  const drag = useRef(null);
  const move = step => {
    const el=pista.current;
    if(el) el.scrollBy({left:step*Math.max(180,el.clientWidth*.8),behavior:window.matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'});
  };

  const pasos = [
    ["Día 1", "Pides la pieza", "Confirmamos modelo, tejido y color. Ese mismo día entra a la fila del taller."],
    ["Día 2 – 12", "Se teje a mano", "Estructura, curado de la madera y tejido hilo a hilo. Nadie más está haciendo esta pieza."],
    ["Día 13 – 14", "Acabados", "Tensión, remates y control final. Si algo no queda, se rehace."],
    ["~ Día 15", "Sale del taller", "Despacho desde Bogotá a tu dirección."],
  ];

  const anim = (i) => ({
    opacity: activo ? 1 : 0,
    transform: activo ? "translateY(0)" : "translateY(22px)",
    transition: "opacity .6s cubic-bezier(.22,.9,.3,1) " + (i * 100) + "ms, transform .6s cubic-bezier(.22,.9,.3,1) " + (i * 100) + "ms",
  });

  return (
    <section style={{ height: "100%", width: "100%", scrollSnapAlign: "start", scrollSnapStop: "always",
                      background: "var(--bone,#F4EFE6)", color: "var(--ink,#1A1714)", overflowY: "auto",
                      padding: "clamp(70px,10vh,96px) 0 clamp(28px,5vh,44px)" }}>
      <div className="cierre-wrap" style={{ maxWidth: 1180, margin: "0 auto", width: "100%" }}>

        {/* Similares — carrusel que pasa solo */}
        <div className="cierre-col">
          {recomendadas.length > 0 && (
            <>
              <div style={{ ...anim(0), padding: "0 clamp(18px,5vw,50px)", marginBottom: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span style={{ width: 26, height: 1, background: "#C8901A" }} />
                  <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".16em",
                                 textTransform: "uppercase", color: "rgba(26,23,20,.5)" }}>Parecidas a esta</span>
                </div>
                <h2 style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontStyle: "italic", fontWeight: 300,
                             fontSize: "clamp(25px,5vw,36px)", lineHeight: 1.05, margin: 0 }}>
                  Si te gustó esta,<br />mira estas.
                </h2>
              </div>
              <div style={{display:"flex",justifyContent:"flex-end",gap:8,padding:"0 24px 12px"}}>
                <button type="button" className="related-arrow" aria-label="Productos anteriores" onClick={() => move(-1)}>←</button>
                <button type="button" className="related-arrow" aria-label="Productos siguientes" onClick={() => move(1)}>→</button>
              </div>
              <div ref={pista} tabIndex={0} aria-label="Otros productos"
                   onKeyDown={e=>{if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();move(e.key==="ArrowRight"?1:-1);}}}
                   onPointerDown={e=>{if(e.pointerType==="mouse")drag.current={x:e.clientX,left:e.currentTarget.scrollLeft,moved:false};}}
                   onPointerMove={e=>{const d=drag.current;if(!d||e.buttons!==1)return;const dx=e.clientX-d.x;if(Math.abs(dx)>6){d.moved=true;e.currentTarget.setPointerCapture(e.pointerId);e.currentTarget.scrollLeft=d.left-dx;e.preventDefault();}}}
                   onPointerUp={e=>{if(e.currentTarget.hasPointerCapture(e.pointerId))e.currentTarget.releasePointerCapture(e.pointerId);}}
                   onPointerCancel={()=>{drag.current=null;}}
                   onClickCapture={e=>{if(drag.current?.moved){e.preventDefault();e.stopPropagation();}drag.current=null;}}
                   className="cierre-pista"
                   style={{ ...anim(1), display: "flex", gap: 14, overflowX: "auto",
                            scrollSnapType:"x proximity",touchAction:"pan-x pan-y",cursor:"grab",padding: "0 clamp(18px,5vw,50px) 8px" }}>
                {recomendadas.map((v) => (
                  <button key={v.id} onClick={() => openFicha(v.id)}
                          style={{ flex: "0 0 auto", width: "clamp(136px,36vw,168px)", cursor: "pointer",
                                   scrollSnapAlign:"start",background: "none", border: "none", padding: 0, textAlign: "left" }}>
                    <div style={{ width: "100%", aspectRatio: "4/5", borderRadius: 12, overflow: "hidden",
                                  background: "#fff", marginBottom: 9,
                                  boxShadow: "0 6px 20px rgba(26,23,20,.10)" }}>
                      <img src={v.foto} alt={v.nombre} loading="lazy" draggable={false}
                           style={{ width: "100%", height: "100%", objectFit: "contain" }} />
                    </div>
                    <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: 15.5,
                                  lineHeight: 1.25 }}>{v.nombre}</div>
                    <div style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, color: "var(--accent,#C13B1F)",
                                  marginTop: 3 }}>{v.precio ? "$ " + v.precio.toLocaleString("es-CO") : "Consultar precio"}</div>
                  </button>
                ))}
              </div>
            </>
          )}
        </div>

        {/* El proceso — línea de tiempo, no cuadros que obliguen a desplazar */}
        <div className="cierre-col" style={{ ...anim(2), padding: "clamp(24px,4vh,32px) clamp(18px,5vw,50px) 0" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ width: 26, height: 1, background: "#C8901A" }} />
            <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".16em",
                           textTransform: "uppercase", color: "rgba(26,23,20,.5)" }}>Hecho a pedido</span>
          </div>
          <p style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: "clamp(17px,2.6vw,21px)",
                      lineHeight: 1.45, fontWeight: 300, margin: "0 0 20px", maxWidth: 420 }}>
            Ninguna pieza está en bodega esperando. La tuya empieza a existir el día que la pides.
          </p>
          <div style={{ display: "grid", gap: 0 }}>
            {pasos.map(([d, t, x], i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: "0 15px" }}>
                <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
                  <span style={{ width: 8, height: 8, borderRadius: "50%", marginTop: 6,
                                 background: "#C8901A", flexShrink: 0 }} />
                  {i < pasos.length - 1 && (
                    <span style={{ width: 1, flex: 1, background: "rgba(26,23,20,.18)", minHeight: 20 }} />
                  )}
                </div>
                <div style={{ paddingBottom: i < pasos.length - 1 ? 15 : 0 }}>
                  <div style={{ fontFamily: "var(--f-mono)", fontSize: 8.5, letterSpacing: ".14em",
                                textTransform: "uppercase", color: "rgba(26,23,20,.45)" }}>{d}</div>
                  <div style={{ fontFamily: "var(--f-display,'Fraunces',serif)", fontSize: 16.5,
                                margin: "2px 0 3px" }}>{t}</div>
                  <div style={{ fontSize: 13, lineHeight: 1.5, color: "rgba(26,23,20,.62)", maxWidth: 380 }}>{x}</div>
                </div>
              </div>
            ))}
          </div>

          <button onClick={goCatalog}
                  style={{ marginTop: 22, display: "inline-flex", alignItems: "center", gap: 10, cursor: "pointer",
                           padding: "14px 26px", borderRadius: 100, background: "var(--ink,#1A1714)", color: "#F7F2EA",
                           border: "none", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: ".14em",
                           textTransform: "uppercase" }}>
            Ver todo el catálogo <Arr />
          </button>
        </div>
      </div>
    </section>
  );
}

function PanelEnviar({ prod, msg, setMsg, onClose }) {
  const shareUrl = prod.catSlug && prod.slug ? `https://artedavas.com/${prod.catSlug}/${prod.slug}`
                                             : `https://artedavas.com/producto/${prod.id.toLowerCase()}`;
  return (
    <Sheet onClose={onClose} titulo="Muéstrasela a alguien" subtitulo="Para que te la regale · o para que te diga si sí">
      <div style={{ padding: "20px", borderRadius: 14, background: "#fff", border: "1px solid rgba(26,23,20,.12)",
                    minHeight: 96, display: "flex", alignItems: "center" }}>
        <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.55, color: "var(--ink,#1A1714)" }}>{MENSAJES[msg]}</p>
      </div>
      <button onClick={() => setMsg((msg + 1) % MENSAJES.length)}
              style={{ width: "100%", marginTop: 10, padding: "12px", borderRadius: 11, cursor: "pointer",
                       border: "1px solid rgba(26,23,20,.16)", background: "none", fontFamily: "var(--f-mono)",
                       fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(26,23,20,.62)" }}>
        ↻ Dame otro</button>
      <a href={`https://wa.me/?text=${encodeURIComponent(MENSAJES[msg] + "\n" + shareUrl)}`} target="_blank" rel="noopener"
         onClick={() => { pushEvento("enviar", prod, { etapa: "compartir", mensaje_idx: msg }); onClose(); }}
         style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginTop: 10,
                  padding: "16px", borderRadius: 100, textDecoration: "none", background: "var(--ink,#1A1714)",
                  color: "#F7F2EA", fontFamily: "var(--f-mono)", fontSize: 12, fontWeight: 600,
                  letterSpacing: ".14em", textTransform: "uppercase" }}>Enviar por WhatsApp</a>
    </Sheet>
  );
}

function Lightbox({ data, onClose }) {
  const [i, setI] = useState(data.i);
  const media = data.media;
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setI(v => Math.min(v + 1, media.length - 1));
      if (e.key === "ArrowLeft") setI(v => Math.max(v - 1, 0));
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [media.length]);
  const cur = media[i];
  if (!cur || cur.type !== "img") return null;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(18,10,1,.96)", zIndex: 9800,
                                    display: "flex", alignItems: "center", justifyContent: "center" }}>
      <button onClick={onClose} style={{ position: "absolute", top: 20, right: 24, background: "none", border: "none",
                                         color: "#fff", fontSize: 28, cursor: "pointer", zIndex: 2 }}>✕</button>
      {i > 0 && <button onClick={(e) => { e.stopPropagation(); setI(v => v - 1); }}
                        style={{ position: "absolute", left: 20, background: "none", border: "none", color: "#fff",
                                 fontSize: 36, cursor: "pointer", padding: "12px 20px" }}>‹</button>}
      <img src={cur.url} alt="" onClick={e => e.stopPropagation()}
           style={{ width: "auto", height: "auto", maxWidth: "94vw", maxHeight: "92vh", borderRadius: 8 }} />
      {i < media.length - 1 && <button onClick={(e) => { e.stopPropagation(); setI(v => v + 1); }}
                        style={{ position: "absolute", right: 20, background: "none", border: "none", color: "#fff",
                                 fontSize: 36, cursor: "pointer", padding: "12px 20px" }}>›</button>}
    </div>
  );
}

window.Ficha = Ficha;