// Promos — "A Weekly Affair"
// Horizontal-scroll carousel of weekly deal posters (same UX as Menu section),
// with auto-advance every 5s. Pauses on hover / user interaction.
//
// Animations (GSAP + ScrollTrigger):
//   - Header (label → heading): fade + y40 → 0, stagger 100ms, power3.out.
//   - Cards: clip-rise (opacity + y30 → 0), stagger 80ms, trigger top 85%, once.
//   - Dinner badge: fade + y20 → 0, trigger top 92%.

function Promos({ data }) {
  const sectionRef  = React.useRef(null);
  const trackRef    = React.useRef(null);
  const progressRef = React.useRef(null);
  const labelRef    = React.useRef(null);
  const headingRef  = React.useRef(null);
  const cardRefs    = React.useRef([]);
  const badgeRef    = React.useRef(null);
  const firedRef    = React.useRef(false);

  // Pauses auto-advance on hover / user scroll / focus
  const pausedRef   = React.useRef(false);
  const userIdleRef = React.useRef(0);

  React.useEffect(() => {
    if (!data || !data.promos) 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.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.7,  ease: 'power3.out' }, 0.10);

    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.08,
        scrollTrigger: { trigger: trackRef.current, start: 'top 85%', once: true },
      });
    }

    if (badgeRef.current) {
      gsap.fromTo(badgeRef.current,
        { opacity: 0, y: 20 },
        {
          opacity: 1, y: 0, duration: 0.7, ease: 'power3.out',
          scrollTrigger: { trigger: badgeRef.current, start: 'top 92%', once: true },
        }
      );
    }

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

  // Horizontal scroll → progress bar width
  React.useEffect(() => {
    const track = trackRef.current;
    const bar   = progressRef.current;
    if (!track || !bar) return;
    const update = () => {
      const max = track.scrollWidth - track.clientWidth;
      const pct = max > 0 ? (track.scrollLeft / max) * 100 : 0;
      bar.style.width = pct + '%';
    };
    update();
    track.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);
    return () => {
      track.removeEventListener('scroll', update);
      window.removeEventListener('resize', update);
    };
  }, [data]);

  // Auto-advance — steps one card-width every 5s, pauses on hover/user action.
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;

    const getStep = () => {
      const card = track.querySelector('.promo-card');
      return card ? card.getBoundingClientRect().width + 20 : 360;
    };

    const tick = () => {
      if (pausedRef.current) return;
      if (Date.now() - userIdleRef.current < 4000) return;
      const step = getStep();
      const atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 2;
      if (atEnd) {
        track.scrollTo({ left: 0, behavior: 'smooth' });
      } else {
        track.scrollBy({ left: step, behavior: 'smooth' });
      }
    };

    const onEnter = () => { pausedRef.current = true; };
    const onLeave = () => { pausedRef.current = false; };
    const onUserAction = () => { userIdleRef.current = Date.now(); };

    track.addEventListener('mouseenter', onEnter);
    track.addEventListener('mouseleave', onLeave);
    track.addEventListener('focusin',  onEnter);
    track.addEventListener('focusout', onLeave);
    track.addEventListener('wheel',      onUserAction, { passive: true });
    track.addEventListener('touchstart', onUserAction, { passive: true });
    track.addEventListener('pointerdown', onUserAction);

    const id = setInterval(tick, 5000);
    return () => {
      clearInterval(id);
      track.removeEventListener('mouseenter', onEnter);
      track.removeEventListener('mouseleave', onLeave);
      track.removeEventListener('focusin',  onEnter);
      track.removeEventListener('focusout', onLeave);
      track.removeEventListener('wheel',      onUserAction);
      track.removeEventListener('touchstart', onUserAction);
      track.removeEventListener('pointerdown', onUserAction);
    };
  }, [data]);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    userIdleRef.current = Date.now();
    const card = track.querySelector('.promo-card');
    const step = card ? card.getBoundingClientRect().width + 20 : 360;
    track.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

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

  const promos = data.promos;
  const items  = promos.items || [];

  return (
    <section id="promos" ref={sectionRef}>
      <div className="promos-header">
        <p className="promos-label" ref={labelRef}>{promos.eyebrow || 'A WEEKLY AFFAIR'}</p>
        <h2 className="promos-heading" ref={headingRef}>
          {promos.heading || 'Come for a different reason every week'}
        </h2>
      </div>

      <div className="promos-track-wrap">
        <button
          type="button"
          className="promos-nav promos-nav-prev"
          aria-label="Previous promo"
          onClick={() => scrollByCard(-1)}
        >
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18 9 12l6-6"/></svg>
        </button>

        <div className="promos-track" ref={trackRef}>
          {items.map((item, i) => (
            <article
              key={i}
              className="promo-card"
              ref={(el) => (cardRefs.current[i] = el)}
            >
              <div className="promo-card-poster">
                <img
                  src={item.image}
                  alt={item.alt || `${item.day} promotion`}
                  loading="lazy"
                  decoding="async"
                />
              </div>
              <div className="promo-card-meta">
                <p className="promo-card-day">{item.day}</p>
                <p className="promo-card-eyebrow">{item.eyebrow}</p>
                <div className="promo-card-tags">
                  {item.time  && <span className="promo-card-tag promo-card-tag--time">{item.time}</span>}
                  {item.price && <span className="promo-card-tag promo-card-tag--price">{item.price}</span>}
                </div>
              </div>
            </article>
          ))}
        </div>

        <button
          type="button"
          className="promos-nav promos-nav-next"
          aria-label="Next promo"
          onClick={() => scrollByCard(1)}
        >
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
        </button>
      </div>

      <div className="promos-progress-wrap">
        <div className="promos-progress-track">
          <div className="promos-progress-bar" ref={progressRef}></div>
        </div>
      </div>

      {/* Dinner-menu callout — "the dinner menu is separate from the à la carte" */}
      {promos.dinnerBadge && (
        <div className="promos-dinner-badge" ref={badgeRef}>
          <span className="promos-dinner-eyebrow">{promos.dinnerBadge.eyebrow || 'EVERY EVENING'}</span>
          <h3 className="promos-dinner-title">
            {promos.dinnerBadge.title || 'Dinner menu'}
            <span className="promos-dinner-time"> · {promos.dinnerBadge.time || '18:00 – 21:00'}</span>
          </h3>
          {promos.dinnerBadge.detail && (
            <p className="promos-dinner-detail">{promos.dinnerBadge.detail}</p>
          )}
          {promos.dinnerBadge.cta && promos.dinnerBadge.cta.label && (
            <a
              href={promos.dinnerBadge.cta.href || '#menu'}
              className="promos-dinner-cta"
              target={promos.dinnerBadge.cta.href && promos.dinnerBadge.cta.href.startsWith('http') ? '_blank' : undefined}
              rel={promos.dinnerBadge.cta.href && promos.dinnerBadge.cta.href.startsWith('http') ? 'noopener noreferrer' : undefined}
            >
              <span>{promos.dinnerBadge.cta.label}</span>
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
            </a>
          )}
        </div>
      )}
    </section>
  );
}