// scene-projects.jsx — Section 4: horizontal pinned timeline rail

const PROJECTS = [
  {
    num: "01",
    title: "Cricket Best 11 Dashboard",
    kind: "Personal · Power BI",
    desc: "Dynamic Power BI dashboard analyzing player KPIs — runs, strike rate, wickets — across teams and match types. Power Query for transforms, DAX for interactive filtering and segment comparisons.",
    tags: ["Power BI", "DAX", "Power Query", "Data Modeling"],
    badge: "Live",
    year: "Aug 2025",
    mock: "A",
  },
  {
    num: "02",
    title: "U.S. E-commerce Sales Analysis",
    kind: "Personal · Python",
    desc: "Analyzed U.S. e-commerce sales using Python, Pandas, and visualization libraries — uncovered regional trends, customer segments, and top-performing SKUs to support marketing, logistics, and pricing decisions.",
    tags: ["Python", "Pandas", "Matplotlib", "Segmentation"],
    badge: "Case study",
    year: "Apr 2025",
    mock: "B",
  },
  {
    num: "03",
    title: "Medical Data Pipelines",
    kind: "Internship · Main Flow Services",
    desc: "Analyzed large-scale research datasets to support strategic planning. Built concise reports and visual KPI summaries presented to cross-functional teams in a fast-paced clinical environment.",
    tags: ["ETL", "KPI Tracking", "Reporting", "SQL"],
    badge: "Internship",
    year: "May–Nov 2025",
    mock: "C",
  },
  {
    num: "04",
    title: "Marketing Analytics Suite",
    kind: "Internship · Millionare Track",
    desc: "Analyzed 5+ campaigns and 10,000+ customer records using SQL, Excel, and Python. Built 5 interactive Power BI dashboards — improved campaign targeting efficiency by 15% across 50,000+ customer interactions.",
    tags: ["Power BI", "SQL", "Python", "Campaign Analytics"],
    badge: "+15% lift",
    year: "Feb–May 2024",
    mock: "D",
  },
];

function MockA() {
  return (
    <div className="mock-canvas mock-A">
      <div className="mock-bar"><span className="d"/><span className="d"/><span className="d"/></div>
      <div className="mock-body">
        <div className="mock-line short accent"/>
        <div className="mock-line med"/>
        <div className="grid">
          <div className="tile"><span>Avg runs</span><span className="n">48.2</span></div>
          <div className="tile"><span>Strike rate</span><span className="n">142</span></div>
          <div className="tile"><span>Wickets</span><span className="n">31</span></div>
        </div>
        <div className="chart">
          {[28,42,36,58,44,72,55,68,49,62,40,76].map((h,i) =>
            <span key={i} className="bar" style={{ height: `${h}%` }}/>)}
        </div>
      </div>
    </div>
  );
}
function MockB() {
  return (
    <div className="mock-canvas mock-B">
      <div className="mock-bar"><span className="d"/><span className="d"/><span className="d"/></div>
      <div className="code">
        <div><span className="c"># sales_analysis.py</span></div>
        <div><span className="k">import</span> pandas <span className="k">as</span> pd</div>
        <div><span className="k">df</span> = pd.read_csv(<span className="s">"us_sales.csv"</span>)</div>
        <div><span className="k">top</span> = (df.groupby(<span className="s">"region"</span>)</div>
        <div className="indent">.agg(revenue=(<span className="s">"amt"</span>, <span className="s">"sum"</span>))</div>
        <div className="indent">.sort_values(<span className="s">"revenue"</span>, ascending=<span className="k">False</span>))</div>
        <div>&nbsp;</div>
        <div><span className="c"># West &gt; South &gt; Northeast — 62% of GMV</span></div>
      </div>
    </div>
  );
}
function MockC() {
  return (
    <div className="mock-canvas mock-A">
      <div className="mock-bar"><span className="d"/><span className="d"/><span className="d"/></div>
      <div className="mock-body">
        <div className="mock-line short accent"/>
        <div className="mock-line long"/>
        <div className="grid">
          <div className="tile"><span>Patients</span><span className="n">8.4k</span></div>
          <div className="tile"><span>Pipelines</span><span className="n">12</span></div>
          <div className="tile"><span>Reports</span><span className="n">38</span></div>
        </div>
        <div className="mock-line med"/>
        <div className="mock-line short"/>
      </div>
    </div>
  );
}
function MockD() {
  return (
    <div className="mock-canvas mock-A">
      <div className="mock-bar"><span className="d"/><span className="d"/><span className="d"/></div>
      <div className="mock-body">
        <div className="mock-line short accent"/>
        <div className="mock-line med"/>
        <div className="grid">
          <div className="tile"><span>Campaigns</span><span className="n">5+</span></div>
          <div className="tile"><span>Customers</span><span className="n">10k+</span></div>
          <div className="tile"><span>Targeting</span><span className="n">+15%</span></div>
        </div>
        <div className="chart">
          {[42,58,36,72,52,68,84,76,62,88,70,92].map((h,i) =>
            <span key={i} className="bar" style={{ height: `${h}%` }}/>)}
        </div>
      </div>
    </div>
  );
}
const MOCKS = { A: <MockA/>, B: <MockB/>, C: <MockC/>, D: <MockD/> };

function Projects() {
  const [pinRef, p] = usePinProgress();
  const trackRef = useRef(null);

  // Compute translation distance from the actual track scrollWidth
  const [distance, setDistance] = useState(2400);
  useLayoutEffect(() => {
    const compute = () => {
      const t = trackRef.current; if (!t) return;
      setDistance(Math.max(0, t.scrollWidth - window.innerWidth + 64));
    };
    compute();
    window.addEventListener("resize", compute);
    return () => window.removeEventListener("resize", compute);
  }, []);

  // Reserve a small "settle" zone at start (0..0.05) and end (0.95..1)
  const drive = clamp((p - 0.05) / 0.9);
  const tx = -distance * drive;

  // Active project for ticks
  const activeIdx = Math.min(PROJECTS.length - 1, Math.floor(drive * PROJECTS.length + 0.0001));

  return (
    <section id="work" className="projects-pin" ref={pinRef}>
      <div className="sticky">
        <div className="projects-header">
          <div>
            <span className="eyebrow" style={{ display: "block", marginBottom: 10 }}>// Work</span>
            <h2 className="h2">Selected projects.</h2>
          </div>
          <div className="projects-counter">
            <span className="live">{String(activeIdx + 1).padStart(2, "0")}</span>
            <span> / {String(PROJECTS.length).padStart(2, "0")}</span>
          </div>
        </div>

        <div className="projects-track-wrap">
          <div ref={trackRef} className="projects-track"
               style={{ transform: `translate3d(${tx.toFixed(1)}px, 0, 0)` }}>
            {PROJECTS.map((pr, i) => {
              const start = i / PROJECTS.length;
              const end   = (i + 1) / PROJECTS.length;
              // local progress within this slide window
              const lp = clamp((drive - start) / (end - start));
              // bell curve: 0 at edges, 1 in the middle
              const center = 1 - Math.abs(lp - 0.5) * 2;
              const focus = clamp(center * 1.2);
              const opacity = lerp(0.35, 1, focus);
              const scale   = lerp(0.92, 1, focus);
              return (
                <div key={pr.num} className={`project-slide ${focus > 0.5 ? "focus" : ""}`}
                     style={{ opacity, transform: `scale(${scale.toFixed(3)})`, transition: "none" }}>
                  <div className="project-mock">
                    <span className="project-badge">
                      {pr.badge === "Live" && <span className="live-dot"/>}
                      {pr.badge}
                    </span>
                    {MOCKS[pr.mock]}
                  </div>
                  <div className="project-info">
                    <div className="project-num">{pr.num}</div>
                    <h3 className="project-title">{pr.title}</h3>
                    <p className="project-desc"><span className="mono dim" style={{ fontSize: 12 }}>{pr.kind} · {pr.year}</span><br/>{pr.desc}</p>
                    <div className="project-tech">
                      {pr.tags.map((t) => <span key={t} className="code-tag">{t}</span>)}
                    </div>
                    <div className="project-links">
                      <a href="#" className="link-btn">View live <IExternal size={13}/></a>
                      <a href="#" className="link-btn"><IGithub size={13}/> GitHub</a>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="timeline-rail" aria-hidden>
          <span className="fill" style={{ width: `${(drive * 100).toFixed(2)}%` }}/>
        </div>
        <div className="timeline-ticks" aria-hidden>
          {PROJECTS.map((pr, i) => (
            <div key={pr.num} className={`timeline-tick ${i === activeIdx ? "active" : ""}`}>
              <span className="dot"/>
              <span>{pr.num} · {pr.year}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Projects });