// portfolio.jsx — sticky-pin horizontal scroll
const { useEffect: _peffect, useRef: _pref, useState: _pstate } = React;

function PortfolioCard({ data, i }) {
  return (
    <article className="portfolio-card">
      <div className="preview">
        {i === 0 && (
          <div className="mock mock-img">
            <img src="assets/comptapocket.png" alt="Compta Pocket" />
          </div>
        )}
        {i === 1 && (
          <div className="mock mock-img">
            <img src="assets/yum3.png" alt="YUM3" />
          </div>
        )}
        {i === 2 && (
          <div className="mock mock-img">
            <img src="assets/portfolio-3.png" alt="Projet 3" />
          </div>
        )}
      </div>
      <div className="meta">
        <div>
          <div className="sub">{data.tag}</div>
          <h3>{data.h}</h3>
          <p className="desc">{data.desc}</p>
        </div>
        <div className="num">
          {data.num}
          <small>{data.numSmall}</small>
        </div>
      </div>
    </article>
  );
}

function PortfolioSection({ t }) {
  const pinRef = _pref(null);
  const trackRef = _pref(null);
  const [progress, setProgress] = _pstate(0);

  _peffect(() => {
    const handleScroll = () => {
      const pin = pinRef.current;
      const track = trackRef.current;
      if (!pin || !track) return;
      const rect = pin.getBoundingClientRect();
      const totalScroll = pin.offsetHeight - window.innerHeight;
      const scrolled = Math.min(Math.max(-rect.top, 0), totalScroll);
      const pct = totalScroll > 0 ? scrolled / totalScroll : 0;
      setProgress(pct);
      const trackWidth = track.scrollWidth;
      const viewportWidth = window.innerWidth;
      const maxX = Math.max(trackWidth - viewportWidth + 80, 0);
      track.style.transform = `translateX(${-pct * maxX}px)`;
    };
    handleScroll();
    window.addEventListener('scroll', handleScroll, { passive: true });
    window.addEventListener('resize', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('resize', handleScroll);
    };
  }, []);

  const cardCount = t.cards.length;
  return (
    <section className="section" id="realisations" style={{ padding: '120px 0 0' }}>
      <div className="container">
        <div className="section-head">
          <div className="section-num">{t.label}</div>
          <h2 className="section-title">{t.title}</h2>
        </div>
      </div>
      <div className="portfolio-pin" ref={pinRef}>
        <div className="portfolio-pin-inner">
          <div className="portfolio-track" ref={trackRef}>
            {t.cards.map((c, i) => <PortfolioCard data={c} i={i} key={i} />)}
          </div>
          <div className="portfolio-progress">
            {Array.from({ length: cardCount }).map((_, i) => {
              const start = i / cardCount;
              const end = (i + 1) / cardCount;
              const local = Math.min(Math.max((progress - start) / (end - start), 0), 1);
              return <span key={i}><i style={{ transform: `scaleX(${local})` }} /></span>;
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

window.PortfolioSection = PortfolioSection;