// Experiences section — text-only deals as a card grid.
// 4 weekly specials in a 2-col grid + 1 featured "everyday" card spanning
// full width below. No imagery — refined typography per card with subtle
// glass fill and amber hover accents.
//
// Animations (ScrollTrigger @ top 85%, once):
//   Intro: label, heading, rule — fade+slide-up, stagger 100ms
//   Per card: fade + y30 → 0, stagger 80ms

function Events({ data }) {
  const sectionRef    = React.useRef(null);
  const introLabelRef = React.useRef(null);
  const introHeadRef  = React.useRef(null);
  const introRuleRef  = React.useRef(null);
  const cardRefs      = React.useRef([]);
  const firedRef      = React.useRef(false);

  React.useEffect(() => {
    if (!data || !data.events) return;
    if (firedRef.current) return;
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    firedRef.current = true;

    gsap.set(introLabelRef.current, { y: 100 });
    gsap.set(introHeadRef.current,  { y: 100 });
    gsap.set(introRuleRef.current,  { y: 30  });

    gsap.timeline({
      scrollTrigger: {
        trigger: introLabelRef.current,
        start: 'top 85%',
        once: true,
      },
    })
      .to(introLabelRef.current, { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out' }, 0)
      .to(introHeadRef.current,  { opacity: 1, y: 0, duration: 0.7, ease: 'power3.out' }, 0.1)
      .to(introRuleRef.current,  { opacity: 1, y: 0, duration: 0.6, ease: 'power3.out' }, 0.2);

    cardRefs.current.forEach((card, i) => {
      if (!card) return;
      gsap.set(card, { y: 30 });
      gsap.to(card, {
        opacity: 1,
        y: 0,
        duration: 0.7,
        ease: 'power3.out',
        delay: (i % 2) * 0.08,
        scrollTrigger: {
          trigger: card,
          start: 'top 88%',
          once: true,
        },
      });
    });

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

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

  const { eyebrow, heading, items } = data.events;

  return (
    <section id="experiences" ref={sectionRef}>
      <div className="exp-intro">
        <p className="exp-label" ref={introLabelRef}>{eyebrow}</p>
        <h2 className="exp-heading" ref={introHeadRef}>{heading}</h2>
        <div className="exp-rule" ref={introRuleRef}></div>
      </div>

      <div className="exp-grid">
        {items.map((item, i) => {
          // Split eyebrow into prefix + day word.
          // "Every Monday" → prefix "Every", day "Monday"
          const text = (item.eyebrow || '').trim();
          const m = text.match(/^(.+?)\s+(\S+)$/);
          const prefix = m ? m[1] : '';
          const day    = m ? m[2] : text;
          // Last item is featured (full-width row).
          const isFeatured = i === items.length - 1;

          return (
            <article
              key={i}
              className={`exp-card${isFeatured ? ' exp-card--featured' : ''}`}
              ref={(el) => (cardRefs.current[i] = el)}
            >
              <svg
                className="exp-card-glyph"
                viewBox="0 0 24 24"
                width="22" height="22"
                aria-hidden="true"
              >
                <circle cx="12" cy="12" r="3.2" />
                <g stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
                  <path d="M12 2.5v3" />
                  <path d="M12 18.5v3" />
                  <path d="M2.5 12h3" />
                  <path d="M18.5 12h3" />
                  <path d="M5.2 5.2l2.1 2.1" />
                  <path d="M16.7 16.7l2.1 2.1" />
                  <path d="M5.2 18.8l2.1-2.1" />
                  <path d="M16.7 7.3l2.1-2.1" />
                </g>
              </svg>

              {prefix && <span className="exp-card-prefix">{prefix}</span>}
              <h3 className="exp-card-day">{day}</h3>
              <span className="exp-card-rule" aria-hidden="true" />
              <h4 className="exp-card-title">{item.title}</h4>
              <p className="exp-card-body">{item.description}</p>
              {item.cta && item.cta.label && (
                <a
                  href={item.cta.href || '#'}
                  className="exp-card-cta"
                  aria-label={item.cta.label}
                >
                  <span>{item.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>
              )}
            </article>
          );
        })}
      </div>
    </section>
  );
}