function Outcomes() {
  const [ref, shown] = useReveal();
  const bars = shown ? [42, 58, 71, 86, 94] : [0, 0, 0, 0, 0];
  return (
    <section className="section outcomes-section">
      <div className="container">
        <div className="outcomes-grid">
          <div>
            <FadeUp>
              <div className="section-eyebrow">Outcomes</div>
            </FadeUp>
            <FadeUp delay={1}>
              <h2 className="section-title">
                Degrees that fit your schedule. <span className="serif">Outcomes that shape a career.</span>
              </h2>
            </FadeUp>
            <FadeUp delay={2}>
              <p className="section-sub">
                A MentVecity degree is measured in what happens after — promotions, role switches, salary uplift, portfolios that hold up in real interviews.
              </p>
            </FadeUp>
            <FadeUp delay={3}>
              <ul className="outcomes-list">
                <li><div><strong>Recognized credentials</strong><span>UGC-entitled, NAAC-accredited, employer-acceptable.</span></div></li>
                <li><div><strong>Real career movement</strong><span>68% of enrolees report a role change or raise within 18 months.</span></div></li>
                <li><div><strong>Flexibility for working pros</strong><span>Evening & weekend live classes, plus recordings forever.</span></div></li>
                <li><div><strong>Placement-ready portfolio</strong><span>Capstones and labs graded by industry, not just faculty.</span></div></li>
              </ul>
            </FadeUp>
          </div>

          <FadeUp delay={2}>
            <div className="outcomes-viz" ref={ref}>
              <div className="out-row">
                <div>
                  <div className="out-row-val">Salary uplift vs. peers</div>
                  <div className="out-row-label" style={{marginTop:4}}>18 months post-enrolment</div>
                </div>
                <div style={{textAlign:'right'}}>
                  <div className="out-row-val" style={{color:'var(--accent)', fontWeight:600, fontSize:28}}>+68%</div>
                  <div className="out-row-label" style={{marginTop:2}}>median</div>
                </div>
              </div>

              <div className="out-chart">
                {['6mo','12mo','18mo','24mo','36mo'].map((l, i) => (
                  <div key={l} className={`out-bar ${i < 2 ? 'muted' : ''}`} style={{ height: `${bars[i]}%` }}>
                    <div className="out-bar-label">+{[12, 22, 42, 58, 68][i]}%</div>
                  </div>
                ))}
              </div>
              <div className="out-foot">
                {['6mo','12mo','18mo','24mo','36mo'].map(l => <span key={l}>{l}</span>)}
              </div>

              <div style={{display:'flex', gap: 24, marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)'}}>
                <div><div className="out-row-label">Avg time to promotion</div><div className="out-row-val" style={{marginTop: 6}}>14 months</div></div>
                <div><div className="out-row-label">Placement connect rate</div><div className="out-row-val" style={{marginTop: 6}}>82%</div></div>
              </div>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}
window.Outcomes = Outcomes;