// Milfers · Carta destacados · carrusel animado + flechas flotantes
function MenuSection() {
  const trackRef = React.useRef(null);
  const pausedRef = React.useRef(false);

  // Auto-scroll JS (seamless loop sobre elementos duplicados) — solo desktop
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    let raf;
    const speed = 0.55; // px por frame
    function step() {
      if (!pausedRef.current) {
        track.scrollLeft += speed;
        // Reset seamless cuando llega a la mitad
        if (track.scrollLeft >= track.scrollWidth / 2) {
          track.scrollLeft = 0;
        }
      }
      raf = requestAnimationFrame(step);
    }
    raf = requestAnimationFrame(step);
    const pause  = () => { pausedRef.current = true; };
    const resume = () => { pausedRef.current = false; };
    track.addEventListener('mouseenter', pause);
    track.addEventListener('mouseleave', resume);
    track.addEventListener('touchstart', pause, { passive: true });
    track.addEventListener('touchend',   resume);
    return () => {
      cancelAnimationFrame(raf);
      track.removeEventListener('mouseenter', pause);
      track.removeEventListener('mouseleave', resume);
      track.removeEventListener('touchstart', pause);
      track.removeEventListener('touchend',   resume);
    };
  }, []);

  function nudge(dir) {
    const track = trackRef.current;
    if (!track) return;
    const cardW = track.querySelector('.mf-star')?.offsetWidth || 360;
    pausedRef.current = true;
    track.scrollBy({ left: dir * (cardW + 24), behavior: 'smooth' });
    setTimeout(() => { pausedRef.current = false; }, 1200);
  }

  return (
    <section className="mf-menu" id="carta">
      <div className="mf-menu-inner">
        <div className="mf-menu-head">
          <div className="mf-menu-head-l reveal">
            <span className="ed-sec-title" style={{color:'var(--milfers-black)'}}>
              <span className="n">3.</span>&nbsp;{window.t('menu.eyebrow')}&nbsp;<span className="dot">·</span>&nbsp;{new Date().getFullYear()}
            </span>
            <h2 className="mf-menu-head-title" dangerouslySetInnerHTML={{__html: window.t('menu.title')}} />
          </div>
          <div className="mf-menu-head-r reveal delay-2">
            <p>{window.t('menu.intro')}</p>
            <p style={{fontFamily:'var(--font-accent)', color:'var(--milfers-ruby)', fontSize:'28px', transform:'rotate(-2deg)', display:'inline-block', marginTop:'8px', lineHeight:1}}>
              {window.t('menu.accent')}
            </p>
          </div>
        </div>

        <div className="mf-stars-marquee reveal delay-2">
          <button className="mf-stars-arrow mf-stars-arrow--prev" aria-label="Anterior" onClick={() => nudge(-1)}>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 18l-6-6 6-6"/></svg>
          </button>
          <button className="mf-stars-arrow mf-stars-arrow--next" aria-label="Siguiente" onClick={() => nudge(1)}>
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 18l6-6-6-6"/></svg>
          </button>

          <div className="mf-stars-track" ref={trackRef}>
            {[...STARS, ...STARS].map((s, i) => {
              const tr = (window.MF_T.menu.stars && window.MF_T.menu.stars[s.n]) || {};
              return (
              <article key={i} className="mf-star" aria-hidden={i >= STARS.length ? 'true' : undefined}>
                <div className="mf-star-photo" style={s.photo ? {backgroundImage: `url(assets/photos/${s.photo})`} : null}>
                  <span className="mf-star-num">N°{s.n}</span>
                  {(tr.tag || s.tag) && <span className="mf-star-tag">{tr.tag || s.tag}</span>}
                </div>
                <div className="mf-star-body">
                  <h3 className="mf-star-name">{s.name}</h3>
                  <p className="mf-star-desc">{tr.desc || s.desc}</p>
                  <div className="mf-star-foot">
                    <Price value={s.price} className="mf-star-price" />
                    {(tr.marker || s.marker) && <span className="mf-star-marker">{tr.marker || s.marker}</span>}
                  </div>
                </div>
              </article>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function Price({ value, className }) {
  const m = String(value || '').match(/(\d+)[,.](\d{2})/);
  if (!m) return <span className={className || 'mf-bc-price'}>{value}</span>;
  return (
    <span className={className || 'mf-bc-price'}>
      <b>{m[1]}</b><i>,{m[2]}</i><u>€</u>
    </span>
  );
}

const STARS = [
  {
    n: '01',
    name: 'Milf',
    desc: 'La original. Cheddar, queso brie, cebolla caramelizada y bacon ahumado. La que lo empezó todo.',
    price: '14,00 €',
    tag: 'La original',
    marker: 'la que lo empezó todo',
    photo: 'milf-1.jpg',
  },
  {
    n: '02',
    name: 'Truffoie',
    desc: 'Cheddar, salsa trufada, crujiente de jamón, foie y brotes tiernos. La más pedida.',
    price: '17,00 €',
    tag: 'Trufa & foie',
    marker: 'la más pedida',
    photo: 'truffoie-1.jpg',
  },
  {
    n: '03',
    name: 'Emylf',
    desc: 'Cheddar ahumado, salsa Emmy, zanahoria caramelizada crispy, pepinillos y bacon ahumado en madera de manzano.',
    price: '15,50 €',
    tag: 'La Emmy',
    marker: 'la más especial',
    photo: 'emylf-2.jpg',
  },
  {
    n: '04',
    name: 'Georgie Dan',
    desc: 'Cheddar, salsa BBQ, aros de cebolla caseros, tomate valenciano, cebolla crispy y pepinillo agridulce.',
    price: '15,00 €',
    tag: 'BBQ & crispy',
    marker: 'la más canalla',
    photo: 'georgie-dan-1.jpg',
  },
  {
    n: '06',
    name: 'Iberican Milf',
    desc: 'Cheddar, salsa cítrica, brotes de rabanitos, crujiente de kikos y torrezno de Soria.',
    price: '15,00 €',
    tag: 'Ibérica',
    marker: 'la más española',
    photo: 'iberican-milf-1.jpg',
  },
  {
    n: '10',
    name: 'Lady Blue',
    desc: 'Cheddar, bacon ahumado, salteado de cebolla y champiñones, nueces y salsa roquefort. Para quien busca intensidad.',
    price: '15,00 €',
    tag: 'Queso azul',
    marker: 'la más intensa',
    photo: 'lady-blue-2.jpg',
  },
];

window.MenuSection = MenuSection;