// Menu preview — continuous horizontal marquee of dish cards.
// Cards are rendered twice in a flex row; GSAP tweens the inner track's
// xPercent from 0 → -50 on a linear loop, producing a seamless continuous
// scroll. No manual arrows — pauses on hover/touch so users can read.
//
// Animations:
//   - Header (label / heading / subline): fade + y40 → 0, stagger 100ms,
//     power3.out, ScrollTrigger top 85%, once.
//   - Card entrance: fade + y30 → 0, stagger 70ms, once.
//   - Continuous loop: linear xPercent scroll, seamless via doubled list.

function Menu({ data }) {
  const sectionRef  = React.useRef(null);
  const viewportRef = React.useRef(null);
  const trackRef    = React.useRef(null);
  const labelRef    = React.useRef(null);
  const headingRef  = React.useRef(null);
  const sublineRef  = React.useRef(null);
  const cardRefs    = React.useRef([]);
  const firedRef    = React.useRef(false);
  const loopTweenRef = React.useRef(null);

  // Entrance animations (header + cards)
  React.useEffect(() => {
    if (!data || !data.menu) return;
    if (firedRef.current) return;
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    firedRef.current = true;

    gsap.set(labelRef.current,   { y: 40 });
    gsap.set(headingRef.current, { y: 40 });
    gsap.set(sublineRef.current, { y: 20 });

    gsap.timeline({
      scrollTrigger: { trigger: sectionRef.current, start: 'top 85%', once: true },
    })
      .to(labelRef.current,   { opacity: 1, y: 0, duration: 0.65, ease: 'power3.out' }, 0)
      .to(headingRef.current, { opacity: 1, y: 0, duration: 0.65, ease: 'power3.out' }, 0.10)
      .to(sublineRef.current, { opacity: 1, y: 0, duration: 0.55, ease: 'power3.out' }, 0.20);

    const cards = cardRefs.current.filter(Boolean);
    if (cards.length) {
      gsap.set(cards, { opacity: 0, y: 30 });
      gsap.to(cards, {
        opacity: 1, y: 0, duration: 0.7, ease: 'power3.out', stagger: 0.07,
        scrollTrigger: { trigger: trackRef.current, start: 'top 85%', once: true },
      });
    }

    const refresh = setTimeout(() => ScrollTrigger.refresh(), 300);
    return () => clearTimeout(refresh);
  }, [data]);

  // Continuous loop — GSAP xPercent from 0 to -50 (since cards are doubled),
  // linear ease, repeat infinite. Pauses on hover / touch so users can read.
  React.useEffect(() => {
    if (!data || !data.menu) return;
    if (typeof gsap === 'undefined') return;
    const track = trackRef.current;
    const viewport = viewportRef.current;
    if (!track || !viewport) return;

    // SECONDS per full loop of the original (un-doubled) set.
    // 6 cards × ~6s each = 36s gives a calm, readable pace.
    const items = (data.menu.items || []).length || 1;
    const duration = Math.max(24, items * 5);

    const tween = gsap.to(track, {
      xPercent: -50,
      duration,
      ease: 'none',
      repeat: -1,
    });
    loopTweenRef.current = tween;

    const onEnter = () => tween.pause();
    const onLeave = () => tween.resume();

    viewport.addEventListener('mouseenter', onEnter);
    viewport.addEventListener('mouseleave', onLeave);
    viewport.addEventListener('touchstart', onEnter, { passive: true });
    viewport.addEventListener('touchend',   onLeave, { passive: true });

    return () => {
      tween.kill();
      loopTweenRef.current = null;
      viewport.removeEventListener('mouseenter', onEnter);
      viewport.removeEventListener('mouseleave', onLeave);
      viewport.removeEventListener('touchstart', onEnter);
      viewport.removeEventListener('touchend',   onLeave);
    };
  }, [data]);

  if (!data || !data.menu) return null;

  const menu  = data.menu;
  const items = menu.items || [];
  const cta   = menu.cta   || { label: 'View full menu', href: '#menu-full' };
  const label   = menu.eyebrow || 'A TASTE';
  const heading = menu.heading || "What's on the menu";
  const tagline = menu.tagline || '';

  // Render items twice so the xPercent:-50 loop lands seamlessly on the copy.
  const doubled = [...items, ...items];

  return (
    <section id="menu" ref={sectionRef}>
      <div className="menu-header">
        <p className="menu-label"   ref={labelRef}>{label}</p>
        <h2 className="menu-heading" ref={headingRef}>{heading}</h2>
        {tagline && <p className="menu-subline" ref={sublineRef}>{tagline}</p>}
      </div>

      <div className="menu-marquee" ref={viewportRef}>
        <div className="menu-track" ref={trackRef}>
          {doubled.map((it, i) => (
            <article
              key={i}
              className="menu-card"
              aria-hidden={i >= items.length ? 'true' : undefined}
              ref={(el) => {
                // Only attach refs for entrance animation on the first set
                if (i < items.length) cardRefs.current[i] = el;
              }}
            >
              <div className="menu-card-img">
                <img
                  src={it.src}
                  alt={it.alt || it.label || ''}
                  loading="lazy"
                  decoding="async"
                />
              </div>
              {it.label && <p className="menu-card-label">{it.label}</p>}
            </article>
          ))}
        </div>
      </div>

      <div className="menu-cta">
        <a href={cta.href} className="menu-cta-btn">
          <span>{cta.label}</span>
        </a>
      </div>
    </section>
  );
}