/* ─────────────────────────────────────────────────────────────────────────
   demo-cinematic.jsx — Cinematic, Apple-style product showcase
   window.MFCinematicDemo({ onStart })

   A self-contained scroll experience that shows what a Menú Factory carta
   feels like — full-bleed editorial food photography, sticky "pinned" hero,
   scroll-revealed editorial rows, a device mock and a closing CTA.

   IMPORTANT: the dish photos here are DEMO assets only (assets/dishes/*.webp).
   They are intentionally NOT wired into window.MF_MENU — real restaurants
   choose their own photography. This is a marketing/illustrative demo.

   Wrapped in an IIFE so its consts never collide with landing.jsx globals.
   ───────────────────────────────────────────────────────────────────────── */
(function () {
  'use strict';

  const SF = '"Fraunces","Georgia",serif';
  const UI = '"Inter Tight",system-ui,-apple-system,sans-serif';
  const mx = (n) => Number(n).toLocaleString('es-MX', { maximumFractionDigits: 0 });

  // Cinematic palette (near-black + cream + amber) — aligned with the brand.
  const D = {
    bg: '#0A0806', panel: '#130E09', tx: '#F4EEE2', mu: '#A99C86',
    acc: '#D49A45', accDeep: '#B57E2E', line: 'rgba(212,154,69,0.16)',
  };

  const HERO = { name: 'Mole negro de la abuela', cat: 'Especialidad de la casa', price: 285, img: 'assets/dishes/mole-negro.webp' };
  const ROWS = [
    { name: 'Cochinita pibil',    cat: 'Plato fuerte', price: 265, img: 'assets/dishes/cochinita.webp', note: 'Cerdo en achiote, hoja de plátano y cebolla morada en escabeche.' },
    { name: 'Pescado a la talla', cat: 'Del mar',      price: 320, img: 'assets/dishes/pescado.webp',   note: 'Huachinango entero a la parrilla, adobo de chile guajillo.' },
    { name: 'Flan de cajeta',     cat: 'Postre',       price: 95,  img: 'assets/dishes/flan-cajeta.webp', note: 'Cajeta de Celaya y nuez garapiñada. Receta de la casa.' },
  ];
  const GRID = [
    { n: 'Aguachile',   p: 185, img: 'assets/dishes/aguachile.webp' },
    { n: 'Tlayuda',     p: 220, img: 'assets/dishes/tlayuda.webp' },
    { n: 'Cochinita',   p: 265, img: 'assets/dishes/cochinita.webp' },
    { n: 'Mole negro',  p: 285, img: 'assets/dishes/mole-negro.webp' },
    { n: 'Pescado',     p: 320, img: 'assets/dishes/pescado.webp' },
    { n: 'Flan',        p: 95,  img: 'assets/dishes/flan-cajeta.webp' },
  ];

  const CSS = `
  .mcin{position:relative;background:${D.bg};color:${D.tx};font-family:${UI};overflow:hidden}
  .mcin *{box-sizing:border-box}
  .mcin-eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:600;color:${D.acc}}
  .mcin-serif{font-family:${SF}}

  /* Scene 1 — intro */
  .mcin-intro{max-width:880px;margin:0 auto;padding:22vh 7vw 14vh;text-align:center}
  .mcin-intro h2{font-family:${SF};font-style:italic;font-weight:400;font-size:clamp(34px,6.4vw,72px);line-height:1.02;letter-spacing:-.01em;margin:20px 0 0}
  .mcin-intro p{font-size:clamp(15px,2vw,19px);color:${D.mu};line-height:1.6;max-width:540px;margin:24px auto 0}

  /* Scene 2 — sticky pinned hero */
  .mcin-stage{position:relative;height:210vh}
  .mcin-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:flex-end}
  .mcin-kb{position:absolute;inset:0;background-size:cover;background-position:center;animation:mcin-kb 20s ease-in-out infinite alternate;will-change:transform}
  @keyframes mcin-kb{from{transform:scale(1.05)}to{transform:scale(1.2)}}
  .mcin-scrim{position:absolute;inset:0;background:linear-gradient(to top,${D.bg} 3%,rgba(10,8,6,.15) 42%,rgba(10,8,6,.55) 100%)}
  .mcin-herocap{position:relative;z-index:2;padding:0 8vw 13vh;width:100%;max-width:1100px}
  .mcin-herocap .nm{font-family:${SF};font-style:italic;font-weight:400;font-size:clamp(36px,7vw,86px);line-height:.98;margin:14px 0 0;text-shadow:0 2px 40px rgba(0,0,0,.5)}
  .mcin-herocap .pr{font-family:${SF};font-size:clamp(20px,3vw,32px);color:${D.acc};margin-top:18px}

  /* Scene 3 — editorial rows */
  .mcin-rows{max-width:1320px;margin:0 auto;padding:6vh 7vw}
  .mcin-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;padding:9vh 0}
  .mcin-fig{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);aspect-ratio:4/5}
  .mcin-fig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
  .mcin-row:hover .mcin-fig img{transform:scale(1.05)}
  .mcin-txt .nm{font-family:${SF};font-style:italic;font-weight:400;font-size:clamp(28px,4.4vw,52px);line-height:1.02;margin:16px 0 0}
  .mcin-txt .note{font-size:clamp(14px,1.6vw,17px);color:${D.mu};line-height:1.6;margin:18px 0 0;max-width:420px}
  .mcin-txt .pr{font-family:${SF};font-size:22px;color:${D.acc};margin-top:20px;display:inline-block}

  /* Scene 4 — device */
  .mcin-device{padding:12vh 7vw;text-align:center;background:linear-gradient(180deg,transparent,${D.panel} 30%,${D.panel} 70%,transparent)}
  .mcin-device h3{font-family:${SF};font-style:italic;font-weight:400;font-size:clamp(28px,4.6vw,54px);line-height:1.04;margin:18px auto 0;max-width:14ch}
  .mcin-device p{font-size:clamp(14px,1.7vw,18px);color:${D.mu};margin:18px auto 0;max-width:460px;line-height:1.6}
  .mcin-phone{display:inline-block;text-align:left;width:300px;max-width:84vw;margin:56px auto 0;background:#080604;border:10px solid #1c1712;border-radius:46px;padding:14px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),inset 0 0 0 1px rgba(212,154,69,.1)}
  .mcin-screen{background:#0E0B08;border-radius:32px;overflow:hidden;padding:18px 14px}
  .mcin-ph-head{text-align:left;padding:6px 4px 14px}
  .mcin-ph-head .e{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:${D.mu};font-weight:600}
  .mcin-ph-head .t{font-family:${SF};font-style:italic;font-size:22px;margin-top:3px}
  .mcin-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mcin-cell{position:relative;border-radius:13px;overflow:hidden;aspect-ratio:1}
  .mcin-cell img{width:100%;height:100%;object-fit:cover;display:block}
  .mcin-cell .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,4,.85),transparent 58%)}
  .mcin-cell .lb{position:absolute;left:9px;right:9px;bottom:8px;display:flex;justify-content:space-between;align-items:flex-end;gap:6px}
  .mcin-cell .lb .n{font-family:${SF};font-style:italic;font-size:12px;color:#F4EEE2;line-height:1.05}
  .mcin-cell .lb .p{font-size:11px;font-weight:700;color:${D.acc}}

  /* Scene 5 — CTA */
  .mcin-cta{text-align:center;padding:18vh 7vw 20vh;max-width:760px;margin:0 auto}
  .mcin-cta h3{font-family:${SF};font-style:italic;font-weight:400;font-size:clamp(32px,6vw,68px);line-height:1.0;letter-spacing:-.01em}
  .mcin-cta p{font-size:clamp(15px,2vw,18px);color:${D.mu};margin:22px auto 0;max-width:460px;line-height:1.6}
  .mcin-btn{display:inline-flex;align-items:center;gap:10px;margin-top:34px;height:56px;padding:0 32px;border-radius:999px;background:${D.acc};color:#1a1206;font-weight:600;font-size:16px;font-family:${UI};border:1px solid transparent;cursor:pointer;transition:transform .16s ease,box-shadow .2s ease,background .2s ease}
  .mcin-btn:hover{background:${D.accDeep};transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(212,154,69,.6)}
  .mcin-btn:active{transform:translateY(0) scale(.985)}
  .mcin-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(212,154,69,.32)}

  @media (max-width:768px){
    .mcin-row{grid-template-columns:1fr;gap:24px;padding:7vh 0}
    .mcin-row .mcin-txt{order:2}
    .mcin-row .mcin-fig{order:1;aspect-ratio:3/2}
    .mcin-stage{height:160vh}
  }
  @media (prefers-reduced-motion: reduce){
    .mcin-kb{animation:none}
    .mcin-reveal{opacity:1 !important;transform:none !important}
  }`;

  // Scroll-reveal wrapper (fade + rise once on entry).
  function Reveal(props) {
    const ref = React.useRef(null);
    const [shown, setShown] = React.useState(false);
    React.useEffect(function () {
      const el = ref.current;
      if (!el) return;
      if (typeof IntersectionObserver === 'undefined') { setShown(true); return; }
      const io = new IntersectionObserver(function (es) {
        if (es[0].isIntersecting) { setShown(true); io.disconnect(); }
      }, { threshold: 0.16, rootMargin: '0px 0px -8% 0px' });
      io.observe(el);
      return function () { io.disconnect(); };
    }, []);
    const delay = props.delay || 0;
    const style = Object.assign({
      opacity: shown ? 1 : 0,
      transform: shown ? 'none' : 'translateY(' + (props.dy || 42) + 'px)',
      transition: 'opacity 1s cubic-bezier(.2,.7,.3,1) ' + delay + 'ms, transform 1.1s cubic-bezier(.2,.7,.3,1) ' + delay + 'ms',
    }, props.style);
    return React.createElement(props.as || 'div', { ref: ref, className: 'mcin-reveal ' + (props.className || ''), style: style }, props.children);
  }

  function CinematicDemo(props) {
    const onStart = props && props.onStart;
    React.useEffect(function () {
      const s = document.createElement('style');
      s.setAttribute('data-mcin', '1');
      s.textContent = CSS;
      document.head.appendChild(s);
      return function () { try { document.head.removeChild(s); } catch (e) {} };
    }, []);

    return (
      <section className="mcin">
        {/* 1 — Intro */}
        <div className="mcin-intro">
          <Reveal><span className="mcin-eyebrow">La experiencia</span></Reveal>
          <Reveal delay={80}><h2>Tu carta, como nunca<br />la habías visto.</h2></Reveal>
          <Reveal delay={160}><p>Cada platillo, una fotografía editorial. Cada scroll, un antojo. Así se siente una carta hecha en Menú Factory.</p></Reveal>
        </div>

        {/* 2 — Pinned cinematic hero */}
        <div className="mcin-stage">
          <div className="mcin-sticky">
            <div className="mcin-kb" style={{ backgroundImage: 'url(' + HERO.img + ')' }} />
            <div className="mcin-scrim" />
            <div className="mcin-herocap">
              <span className="mcin-eyebrow">{HERO.cat}</span>
              <div className="nm">{HERO.name}</div>
              <div className="pr">${mx(HERO.price)}</div>
            </div>
          </div>
        </div>

        {/* 3 — Editorial rows */}
        <div className="mcin-rows">
          {ROWS.map(function (d, i) {
            const fig = (
              <Reveal className="mcin-fig" dy={56} key="f">
                <img src={d.img} alt={d.name} loading="lazy" />
              </Reveal>
            );
            const txt = (
              <Reveal className="mcin-txt" delay={120} key="t">
                <span className="mcin-eyebrow">{d.cat}</span>
                <div className="nm">{d.name}</div>
                <p className="note">{d.note}</p>
                <span className="pr">${mx(d.price)}</span>
              </Reveal>
            );
            return (
              <div className="mcin-row" key={d.name}>
                {i % 2 === 0 ? [fig, txt] : [txt, fig]}
              </div>
            );
          })}
        </div>

        {/* 4 — Device */}
        <div className="mcin-device">
          <Reveal><span className="mcin-eyebrow">En la mesa</span></Reveal>
          <Reveal delay={80}><h3>Así la recorre tu comensal.</h3></Reveal>
          <Reveal delay={160}><p>Escanea el QR y la carta cobra vida en su teléfono — sin instalar nada, sin esperar.</p></Reveal>
          <Reveal delay={220} dy={64}>
            <div className="mcin-phone">
              <div className="mcin-screen">
                <div className="mcin-ph-head">
                  <div className="e">Mesa 1 · Hoy</div>
                  <div className="t">Buenas noches.</div>
                </div>
                <div className="mcin-grid">
                  {GRID.map(function (g) {
                    return (
                      <div className="mcin-cell" key={g.n}>
                        <img src={g.img} alt={g.n} loading="lazy" />
                        <div className="ov" />
                        <div className="lb"><span className="n">{g.n}</span><span className="p">${mx(g.p)}</span></div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* 5 — CTA */}
        <div className="mcin-cta">
          <Reveal><h3>Diseña la tuya, gratis.</h3></Reveal>
          <Reveal delay={100}><p>Sube tu menú y nuestra IA lo convierte en una carta digital en minutos. Las fotos las eliges tú.</p></Reveal>
          <Reveal delay={180}>
            <button className="mcin-btn" onClick={function () { if (onStart) onStart(); }}>
              Crear mi carta
              <window.MFIcon name="arrow" size={18} />
            </button>
          </Reveal>
        </div>
      </section>
    );
  }

  window.MFCinematicDemo = CinematicDemo;
})();