const Experience = () => {
  const sectionRef = React.useRef(null);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const [progress, setProgress] = React.useState(0);

  const steps = [
    {
      id: 0,
      label: 'Arrive',
      desc: 'Step into a space of calm and luxury.',
      img: 'assets/real/experience-arrive.webp',
      mobileImg: 'assets/real/experience-arrive-mobile.webp',
      alt: 'HAYRE salon interior seen through the storefront while a barber works with a client',
    },
    {
      id: 1,
      label: 'Relax',
      desc: 'Unwind while we take care of you.',
      img: 'assets/real/experience-relax.webp',
      mobileImg: 'assets/real/experience-relax-mobile.webp',
      alt: 'HAYRE private lounge with illuminated product shelves',
    },
    {
      id: 2,
      label: 'Transform',
      desc: 'Leave sharper. Leave confident.',
      img: 'assets/real/experience-transform.webp',
      mobileImg: 'assets/real/experience-transform-mobile.webp',
      alt: 'HAYRE stylist finishing a client’s haircut at a mirror',
    },
  ];

  const smooth = (t) => t * t * (3 - 2 * t);

  React.useEffect(() => {
    let frame = 0;
    const onScroll = () => {
      if (frame) return;
      frame = requestAnimationFrame(() => {
        frame = 0;
        const el = sectionRef.current;
        if (!el) return;
        const rect = el.getBoundingClientRect();
        const total = el.offsetHeight - window.innerHeight;
        if (total <= 0) return;
        const scrolled = Math.max(0, -rect.top);
        const p = Math.max(0, Math.min(1, scrolled / total));
        setActiveIdx(Math.min(Math.floor(p * 3), 2));
        setProgress(p);
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (frame) cancelAnimationFrame(frame);
    };
  }, []);

  const kb = smooth(progress);
  const bgScale = 1.04 + kb * 0.04;
  const bgTranslateY = -4 + kb * 8;

  return (
    <section
      className="experience"
      id="experience"
      ref={sectionRef}
      style={{ height: '260vh' }}
      data-screen-label="02 Experience"
    >
      <div className="exp-grid">
        <div className="exp-stick">
          <div
            className="exp-bg"
            style={{ transform: `translate3d(0, ${bgTranslateY.toFixed(2)}px, 0) scale(${bgScale.toFixed(3)})` }}
          >
            {steps.map((s, i) => (
              <div key={s.id} className="exp-img" style={{ opacity: i === activeIdx ? 1 : 0 }}>
                <picture>
                  <source media="(max-width: 700px)" srcSet={s.mobileImg} />
                  <img src={s.img} alt={s.alt} width="1920" height="1080" loading="lazy" decoding="async" />
                </picture>
              </div>
            ))}
            <div className="vignette"></div>
          </div>

          <div className="exp-overlay">
            <div className="exp-mid">
              <div className="exp-eyebrow eyebrow">The HAYRE Experience</div>
              <h2 className="exp-headline">
                It's not just<br/>what we do,<br/>it's <span className="it">how we<br/>do it.</span>
              </h2>

              <div className="exp-steps">
                {steps.map((s, i) => {
                  const isActive = i === activeIdx;
                  const isPast  = i < activeIdx;
                  return (
                    <div
                      key={s.id}
                      className={'exp-step' + (isActive ? ' active' : '')}
                      style={{ opacity: isActive ? 1 : (isPast ? 0.35 : 0.25) }}
                      onClick={() => {
                        const el = sectionRef.current;
                        if (!el) return;
                        const total = el.offsetHeight - window.innerHeight;
                        window.scrollTo({ top: el.offsetTop + total * (i / 3 + 1 / 6), behavior: 'smooth' });
                      }}
                      data-analytics-event="view_experience_step"
                      data-analytics-content-type="experience_step"
                      data-analytics-item-id={s.id}
                      data-analytics-label={s.label}
                    >
                      <div className="num">0{i + 1}</div>
                      <div>
                        <h3 style={{ color: isActive ? 'rgba(234,234,234,1)' : 'rgba(234,234,234,0.4)' }}>
                          {s.label}
                        </h3>
                        <p style={{ color: isActive ? 'rgba(210,205,195,0.9)' : 'rgba(200,195,185,0.3)' }}>
                          {s.desc}
                        </p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div
              className="exp-scroll-hint"
              style={{ opacity: Math.max(0, 1 - progress * 4) }}
              aria-hidden="true"
            >
              <span className="exp-scroll-label">Scroll</span>
              <span className="exp-scroll-line" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Experience = Experience;