// === About + Marquee + Stats ===
function About() {
  const facts = [
    { k: "Based in", v: "Brisbane, Australia" },
    { k: "Currently", v: "Data Manager @ UQ Poche" },
    { k: "Studied", v: "M. Data Science, UQ" },
    { k: "Driven by", v: "Rigour, impact, community" },
  ];

  return (
    <section id="about" data-screen-label="About">
      <div className="wrap">
        <div className="section-header">
          <h2 data-split-words>About — the long version.</h2>
          <span className="meta-num">01 / 06</span>
        </div>

        <div className="about-grid">
          <div className="about-copy fade-up">
            <p className="about-lede" data-split-words>
              I'm Shubham — a data analytics leader who turns messy, complex data into decisions people can actually act on.
            </p>
            <p className="about-body fade-up">
              I started out as a software developer in Indore, India, leading teams that built web and data products. Then I moved to Australia, earned my Master of Data Science at The University of Queensland, and found my real calling: helping leaders see clearly through evidence. Today I lead data and governance at the UQ Poche Centre for Indigenous Health.
            </p>
            <p className="about-body fade-up">
              I care as much about people as I do about pipelines. Outside the dashboards I sit on UQ's Young Alumni Advisory Board, champion mental health and inclusion on campus, and used to organise Google Developer Group Brisbane — because the best analytics in the world mean nothing without the community to act on them.
            </p>
            <div className="about-tags fade-up">
              <span className="tag">Data Analytics</span>
              <span className="tag">Business Intelligence</span>
              <span className="tag">Data Governance</span>
              <span className="tag">Community Builder</span>
            </div>
          </div>

          <div className="about-facts">
            {facts.map((f, i) => (
              <div key={i} className="fact-row fade-up" style={{ transitionDelay: (i * 100) + 'ms' }}>
                <div className="fact-k mono">{f.k}</div>
                <div className="fact-v">{f.v}</div>
              </div>
            ))}
            <div className="fact-portrait fade-up" style={{ transitionDelay: '400ms' }}>
              <div className="portrait-frame" data-water data-magnetic-no>
                <img className="portrait-img portrait-anime" src="assets/headshot-anime.png" alt="Shubham Chawre, anime style" loading="lazy" />
                <canvas className="portrait-water"></canvas>
                <div className="portrait-corner mono">SC · BNE</div>
                <div className="portrait-hint mono"><span></span> touch the water</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="marquee" aria-hidden="true">
        <div className="marquee-track">
          {Array(4).fill(0).map((_, i) => (
            <span key={i}>
              ✦ evidence over opinion &nbsp;·&nbsp; ✦ data with integrity &nbsp;·&nbsp; ✦ clarity for decision-makers &nbsp;·&nbsp; ✦ rigour meets empathy &nbsp;·&nbsp; ✦ community first &nbsp;·&nbsp;
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.About = About;