// scene-about.jsx — Section 2: horizontal pinned storyboard

function About() {
  const [pinRef, p] = usePinProgress();
  // 4 panels — track translates from 0 to -(panels-1)/panels of width.
  // We use scroll progress to drive translateX of the track.
  const trackRef = useRef(null);
  const [trackTx, setTrackTx] = useState(0);

  useEffect(() => {
    const update = () => {
      const t = trackRef.current; if (!t) return;
      const distance = t.scrollWidth - window.innerWidth;
      // Use the cached p from usePinProgress through ref-driven re-render
    };
    update();
  }, []);

  // Compute translation directly from p
  const distance = (() => {
    const t = trackRef.current;
    if (!t) return 0;
    return Math.max(0, t.scrollWidth - window.innerWidth + 64);
  })();
  const tx = -distance * p;

  // Active panel for progress dots (0..3)
  const activePanel = Math.min(3, Math.floor(p * 4 + 0.0001));

  return (
    <section id="about" className="about-pin" ref={pinRef}>
      <div className="sticky">
        <div ref={trackRef} className="about-track"
             style={{ transform: `translate3d(${tx.toFixed(1)}px, 0, 0)`,
                      transition: PREFERS_REDUCE ? "none" : "none" }}>

          {/* Panel 1 — intro / who */}
          <div className="about-panel intro">
            <span className="panel-num">// chapter two — who</span>
            <span className="eyebrow" style={{ display: "block", marginBottom: 8 }}>About</span>
            <h2 className="h1">An analyst who gives a damn.</h2>
            <p>
              I'm Yash Somani — a B.Tech (Hons.) student at Chandigarh University,
              majoring in Big Data Analytics. I work with data the way good
              writers work with sentences: cut what doesn't earn its place,
              keep what makes the answer obvious.
            </p>
            <div className="tag-row">
              <span className="pill"><IMapPin size={12}/> India</span>
              <span className="pill"><ICircleDot size={12}/> Open to remote</span>
              <span className="pill"><ILayers size={12}/> Data &amp; BA</span>
            </div>
          </div>

          {/* Panel 2 — philosophy card (coral) */}
          <div className="about-panel" style={{ width: "min(640px, 80vw)" }}>
            <div className="about-card philosophy">
              <span className="quote-mark" aria-hidden>"</span>
              <span className="panel-num">// chapter three — how</span>
              <h2 className="h2" style={{ margin: "16px 0 18px", maxWidth: 480 }}>
                A dashboard is only useful if someone changes their mind.
              </h2>
              <p style={{ fontSize: "1.05rem", lineHeight: 1.75, maxWidth: 520 }}>
                Most reports are loud. I aim for the opposite — one chart, one
                sentence, one decision. ETL that's boring on purpose, KPIs that
                actually move when the business does.
              </p>
              <p style={{ marginTop: 16, fontSize: "1.05rem", lineHeight: 1.75, maxWidth: 520 }}>
                I work end-to-end in SQL, Python, and Power BI — and I treat the
                handoff to stakeholders as half the job, not the afterthought.
              </p>
            </div>
          </div>

          {/* Panel 3 — life / human */}
          <div className="about-panel" style={{ width: "min(620px, 80vw)" }}>
            <div className="about-card life">
              <span className="panel-num">// chapter four — outside the editor</span>
              <h2 className="h2">When I'm not querying.</h2>
              <p>A few things keep me sharp away from the dashboard:</p>
              <ul className="life-list">
                <li>Writing research papers — three so far, one accepted at IEEE ACROSET 2025.</li>
                <li>Hackathons — Generative AI Hackathon runner-up, NASA Space Apps finalist.</li>
                <li>Building side dashboards no one asked for (cricket KPIs, etc.).</li>
                <li>Reading on stakeholder communication and visual design.</li>
                <li>Coordinating IEEE CUSB student events.</li>
              </ul>
            </div>
          </div>

          {/* Panel 4 — id card */}
          <div className="about-panel" style={{ width: "min(440px, 80vw)" }}>
            <div className="id-card">
              <div className="id-avatar">YS</div>
              <div className="id-name">Yash Somani</div>
              <div className="id-title mono">Data &amp; business analyst</div>
              <div className="id-quote">
                "Calm dashboards aren't boring — they're confident enough to
                let the data speak first."
              </div>
              <div className="id-meta">
                <div className="id-meta-row">
                  <span className="ic"><IMapPin size={14}/></span>
                  <span>Based in&nbsp;<span className="v">Punjab, India</span></span>
                </div>
                <div className="id-meta-row">
                  <span className="ic"><IMail size={14}/></span>
                  <span><span className="v">yashsomani395@gmail.com</span></span>
                </div>
                <div className="id-meta-row">
                  <span className="ic"><ICircleDot size={14}/></span>
                  <span>
                    <span className="v">Available · 2026 grad</span>
                    <span className="dot-pulse"/>
                  </span>
                </div>
              </div>
            </div>
          </div>

          {/* trailing spacer so last panel can fully reach left edge */}
          <div style={{ flex: "0 0 8vw" }}/>
        </div>

        <div className="about-progress" aria-hidden>
          {[0,1,2,3].map((i) => (
            <span key={i} className="seg">
              <span className="fill" style={{
                width: `${clamp(p * 4 - i) * 100}%`,
                transition: `width 120ms ${EASE}`,
              }}/>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });