// Stack — "How I Work"  sui.io-style scroll-driven card reveal
// Each card slides in from the right as the user scrolls through the section.
(function () {
  const { useEffect, useRef } = React;

  function Stack() {
    const data = window.PORTFOLIO_DATA.stack;
    const sectionRef = useRef(null);
    const cardRefs = useRef([]);
    const N = data.panels.length;

    useEffect(() => {
      const update = () => {
        const section = sectionRef.current;
        if (!section) return;
        const rect = section.getBoundingClientRect();
        const scrollable = section.offsetHeight - window.innerHeight;
        const progress = Math.max(0, Math.min(-rect.top / scrollable, 1));
        const p = progress * (N - 1); // float 0 → N-1
        const activeIdx = Math.min(Math.floor(p), N - 1);
        const frac = p - activeIdx;

        cardRefs.current.forEach((el, i) => {
          if (!el) return;
          let tx;
          if (i <= activeIdx) tx = 0;                  // current + all past (stacked)
          else if (i === activeIdx + 1) tx = (1 - frac) * 100; // next: sliding in from right
          else tx = 100;               // waiting off-screen
          el.style.transform = `translateX(${tx}%)`;
        });
      };

      window.addEventListener('scroll', update, { passive: true });
      update(); // init on mount
      return () => window.removeEventListener('scroll', update);
    }, []);

    return (
      <section
        className="stack"
        id="solutions"
        ref={sectionRef}
        style={{ height: `${N * 100}vh` }}
      >
        <div className="stack__sticky">
          {/* Header bar — one label only, no duplicate h2 */}
          <div className="stack__header-bar">
            <p className="stack__sub" data-reveal data-reveal-delay="1">{data.sub}</p>
          </div>

          {/* Stacked cards — each absolutely positioned, slide in from right */}
          <div className="stack__cards-wrap">
            {data.panels.map((panel, i) => (
              <article
                key={i}
                className="stack-card"
                ref={el => (cardRefs.current[i] = el)}
                style={{
                  zIndex: i + 1,
                  transform: i === 0 ? 'translateX(0)' : 'translateX(100%)',
                }}
              >
                {/* Top bar: number + solution title */}
                <div className="stack-card__topbar">
                  <span className="stack-card__num">{panel.marker}</span>
                  <span className="stack-card__headline">{panel.solutionTitle}</span>
                </div>

                {/* Main area: problem left, solution right */}
                <div className="stack-card__main">
                  <div className="stack-card__col stack-card__col--problem">
                    <span className="stack-card__label">問題</span>
                    <h3 className="stack-card__problem">{panel.problem}</h3>
                  </div>
                  <div className="stack-card__col stack-card__col--solution">
                    <span className="stack-card__label">解法</span>
                    <p className="stack-card__body">{panel.body}</p>
                  </div>
                </div>

                {/* Footer: tags + progress indicator */}
                <div className="stack-card__footer">
                  <div className="stack-card__tags">
                    {panel.tags.map(t => (
                      <span className="stack-tag" key={t}>{t}</span>
                    ))}
                  </div>
                  <span className="stack-card__counter">
                    {panel.marker} / {String(N).padStart(2, '0')}
                  </span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    );
  }

  window.Stack = Stack;
})();