// Stats — three numbered counters with a dark background image
function Stats() {
  const ref = useReveal(0.2);
  const stats = [
    { idx: '01/03', label: 'Projects executed', value: '741', suffix: '+', note: 'successful residences' },
    { idx: '02/03', label: 'Years of experience', value: '13',  suffix: 'yr', note: 'in luxury practice' },
    { idx: '03/03', label: 'Atelier',          value: '73',  suffix: '+', note: 'architects & engineers' },
  ];
  return (
    <section className="de-section de-section--dark de-stats" ref={ref}>
      <div className="de-pattern-lines" style={{color: 'var(--de-cream)', opacity: 0.08}}></div>
      <img className="de-stats__bg" src="assets/imagery/marble-brass-texture.png" alt=""/>
      <div className="de-stats__overlay"></div>

      <div className="de-container">
        <div className="de-stats__head de-reveal is-in">
          <div className="de-eyebrow" style={{color: 'var(--de-gold)'}}>Why Digit Estate</div>
          <h2 className="de-stats__heading">Make your choice.</h2>
          <p className="de-stats__lead">
            To achieve flawless interior architecture from planning to handover, you need a measured
            atelier with depth in every discipline. Our team handles projects of all scales with precision.
          </p>
        </div>

        <div className="de-stats__grid">
          {stats.map((s, i) => (
            <div key={s.idx} className={'de-stats__item de-reveal de-reveal-' + (i + 2) + ' is-in'}>
              <div className="de-stats__idx">{s.idx}</div>
              <div className="de-stats__label">{s.label}</div>
              <div className="de-stats__num">{s.value}<em>{s.suffix}</em></div>
              <div className="de-stats__note">{s.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Stats = Stats;