// Landing — "Lo que ya está funcionando": rotación automática entre los 3 productos, imagen y texto con fundido
const { PROJECTS: SPROJ } = window.PORTFOLIO_DATA;
const { LI: SI, ynContact: sContact } = window;
const SORDER = ["dialer", "leadko", "posventa"];
const SHOW = SORDER.map(k => SPROJ.find(p => p.slug === k)).map(p => ({ slug: p.slug, title: p.title, tag: p.tag, url: p.demoLabel, demo: p.demo, src: p.image, mod: p.role, headline: p.kicker, desc: p.summary, value: p.features[0][1] }));
const SDUR = 8000, SFADE = 450;

function LShowcase() {
  const n = SHOW.length;
  const [i, setI] = React.useState(0);
  const [shown, setShown] = React.useState(0); // índice que se ve en el texto (cambia a mitad del fundido)
  const [fading, setFading] = React.useState(false);
  const [paused, setPaused] = React.useState(false);
  const [layers, setLayers] = React.useState(() => [{ id: "init", k: 0 }]);
  const reduced = React.useMemo(() => matchMedia("(prefers-reduced-motion: reduce)").matches, []);
  const p = SHOW[shown];
  const go = (k) => { if (k === i) return; setI(((k % n) + n) % n); };
  React.useEffect(() => {
    if (i === shown) return;
    setFading(true);
    setLayers(l => [l[l.length - 1], { id: `${i}-${Date.now()}`, k: i }]);
    const a = setTimeout(() => { setShown(i); setFading(false); }, reduced ? 0 : SFADE);
    const b = setTimeout(() => setLayers(l => l.slice(-1)), 1000);
    return () => { clearTimeout(a); clearTimeout(b); };
  }, [i]);
  React.useEffect(() => { if (paused || reduced) return; const id = setTimeout(() => go(i + 1), SDUR); return () => clearTimeout(id); }, [i, paused]);
  const sw = React.useRef(0);
  return (
    <section className="cases" id="proyectos" onPointerEnter={() => setPaused(true)} onPointerLeave={() => setPaused(false)}>
      <div className="wrap">
        <div className="shead reveal">
          <div><span className="kicker">En producción</span><h2>Lo que ya está funcionando</h2></div>
          <div className="pills" role="tablist">{SHOW.map((q, k) => <button key={q.slug} role="tab" aria-selected={k === i} data-on={k === i ? "" : undefined} onClick={() => go(k)}><span className="lbl">{q.title}</span>{k === i && !reduced && <span className="bar" key={`${k}-${paused}`} style={{ animationDuration: `${SDUR}ms` }}></span>}</button>)}</div>
        </div>
        <div className="show reveal" data-paused={paused ? "" : undefined} style={{ "--d": ".1s" }}>
          <div className="stage">
            <div className="browser"><span></span><span></span><span></span><i className={fading ? "out" : ""}>{p.url}</i></div>
            <div className="screen" onPointerDown={e => { sw.current = e.clientX; }} onPointerUp={e => { const dx = e.clientX - sw.current; if (Math.abs(dx) > 40) go(dx < 0 ? i + 1 : i - 1); }}>
              {layers.map(l => <img key={l.id} src={SHOW[l.k].src} alt={SHOW[l.k].title} className={l.k === i ? "on" : ""} draggable="false" />)}
            </div>
          </div>
          <div className={`info${fading ? " out" : ""}`}>
            <span className="mod">{p.mod}</span>
            <h3>{p.headline}</h3>
            <p>{p.desc}</p>
            <div className="val"><i>{SI.check}</i>{p.value}</div>
            <div className="ctr">
              <button onClick={() => go(i - 1)} aria-label="Anterior"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 6l-6 6 6 6"/></svg></button>
              <button onClick={() => go(i + 1)} aria-label="Siguiente">{SI.right}</button>
              <span>{String(shown + 1).padStart(2, "0")} / {String(n).padStart(2, "0")}</span>
              {p.demo ? <a className="btn white" href={p.demo} target="_blank" rel="noreferrer">Visitar {p.url} {SI.arrow}</a> : <a className="btn white" href="#contacto" onClick={() => sContact({ dialer: "demo-dialer", leadko: "demo-leadko", posventa: "demo-velia" }[p.slug] || "contacto")}>Pedir una demo {SI.right}</a>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LShowcase });