/* global React, ReactDOM */
const { useEffect, useRef } = React;
const DS = window.SpectareDesignSystem_81b2ca || {};
const { StrikeHeading } = DS;
const M = window.MENU;

// Activa las animaciones solo si el JS corre (si no, todo queda visible).
try { document.documentElement.classList.add("anim"); } catch (e) {}

// Imágenes montadas (de PROGRA FILES, optimizadas). El match cóctel↔foto es libre.
const AUTOR_IMGS = Array.from({ length: 10 }, (_, i) => `img/autor-${String(i + 1).padStart(2, "0")}.jpg`);
const CLASICO_IMGS = Array.from({ length: 8 }, (_, i) => `img/clasico-${String(i + 1).padStart(2, "0")}.jpg`);

function slug(s) {
  return s.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "")
    .replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
}

function Pour({ item, idx, side, src }) {
  const no = String(idx + 1).padStart(2, "0");
  return (
    <article className={`pour pour--${side} reveal`}>
      <span className="pour__no">{no}</span>
      <image-slot
        class="pour__img"
        id={`ck-${slug(item.n)}`}
        shape="rect"
        src={src}
        placeholder="Foto"
      ></image-slot>
      <div className="pour__meta">
        <div className="pour__tick"></div>
        <h3 className="pour__name">{item.n}</h3>
        <p className="pour__desc">{item.d}</p>
      </div>
    </article>
  );
}

function Section({ eyebrow, title, strikeWord, count, items, startSide, imgs }) {
  return (
    <section className="sec">
      <header className="sec__head reveal">
        <span className="sec__ey">{eyebrow}</span>
        <span className="sec__count">{String(count).padStart(2, "0")} · CARTA</span>
      </header>
      {StrikeHeading ? (
        <StrikeHeading
          strikeWord={strikeWord}
          animate={true}
          size="clamp(34px, 13vw, 64px)"
          className="sec__title reveal"
          style={{ color: "var(--name)", letterSpacing: "-.035em", lineHeight: ".96", marginBottom: "34px" }}
        >
          {title}
        </StrikeHeading>
      ) : (
        <h2 className="sec__title reveal" style={{ marginBottom: "34px" }}>{title}</h2>
      )}
      <div className="sec__list">
        {items.map((it, i) => (
          <Pour key={it.n} item={it} idx={i} side={(i + startSide) % 2 === 0 ? "l" : "r"}
            src={imgs[i % imgs.length]} />
        ))}
      </div>
    </section>
  );
}

function App() {
  const root = useRef(null);
  useEffect(() => {
    const scope = root.current || document;
    const els = Array.prototype.slice.call(scope.querySelectorAll(".reveal"));
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || typeof IntersectionObserver === "undefined") {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -7% 0px" });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);
  return (
    <div ref={root}>
      <div className="wrap">
        <header className="mast">
          <img className="mast__logo" src="assets/spectare-logo-white.png" alt="Spectare" />
          <span className="mast__sub">Piano Bar · Coctelería</span>
          <div className="mast__rule"></div>
          <h1 className="mast__tag">
            Talento que se <span className="script">sirve</span>
          </h1>
          <p className="mast__note">
            Una carta observada de cerca. De autor y clásicos, destilados con
            precisión.
          </p>
        </header>

        <Section eyebrow="De Autor" title="De Autor" strikeWord="Autor"
          count={M.autor.length} items={M.autor} startSide={0} imgs={AUTOR_IMGS} />

        <Section eyebrow="Clásicos" title="Clásicos" strikeWord="Clásicos"
          count={M.clasicos.length} items={M.clasicos} startSide={1} imgs={CLASICO_IMGS} />

        <footer className="foot">
          <div className="foot__mark">Spectare</div>
          <div className="foot__note">Talento Disruptivo · Piano Bar</div>
        </footer>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);