// numbers.jsx - animated data cells with bars
const { useRef: useRefN } = React;

const NumCell = ({ item, widthPct }) => {
  const [ref, visible] = useReveal();
  return (
    <div ref={ref} className="num-cell" style={{'--bar-w': visible ? `${widthPct}%` : '0%'}}>
      <div className="num-val">
        <CountUp to={item.v}/>
        {item.s && <span className="suffix">{item.s}</span>}
      </div>
      <div className="num-label">{item.l}</div>
      <div className="num-bar"/>
    </div>
  );
};

const NumbersSection = () => {
  const { t } = useLang();
  const n = t.numbers;
  const widths = [96, 72, 88, 60];
  return (
    <section className="numbers" id="numbers">
      <Reveal><div className="eyebrow">{n.eyebrow}</div></Reveal>
      <Reveal delay={1}><h2 className="section-title">{n.title}</h2></Reveal>
      <div className="numbers-grid">
        {n.items.map((it, i) => (
          <NumCell key={i} item={it} widthPct={widths[i % widths.length]}/>
        ))}
      </div>
    </section>
  );
};

window.NumbersSection = NumbersSection;