/* Stats — calm, type-led, no icons */
function Stat({ item }) {
  const { count, elementRef } = useCounter(item.target, 2200);
  return (
    <div ref={elementRef} className="flex flex-col px-8 py-14 text-left">
      <span className="serif tracking-[-0.025em] leading-none mb-3"
        style={{ fontSize: 'clamp(2.6rem, 5vw, 4rem)', color: 'var(--ink)' }}>
        {item.display(count)}
      </span>
      <span className="text-[14px] mb-1" style={{ color: 'var(--ink)' }}>{item.label}</span>
      <span className="text-[12px]" style={{ color: 'var(--muted)' }}>{item.sub}</span>
    </div>
  );
}

function Stats() {
  const STATS = [
    { target: 50,    display: n => `${n}+`,                    label: 'Destinations',     sub: 'Across 6 continents' },
    { target: 12400, display: n => n.toLocaleString(),         label: 'Travelers sent',   sub: 'Quietly, since 2009' },
    { target: 16,    display: n => `${n} yrs`,                 label: 'On the road',      sub: 'And still answering the phone' },
    { target: 49,    display: n => `${(n/10).toFixed(1)}`,     label: 'Average rating',   sub: 'Of 2,400 verified reviews' },
  ];

  return (
    <section id="stats" style={{ background: 'var(--white)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div className="container">
        <div className="px-8 pt-14 pb-2">
          <p className="section-label eyebrow-dot">In numbers</p>
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-4">
          {STATS.map((s, i) => (
            <div key={s.label} style={{
              borderLeft: i % 2 === 0 ? 'none' : '1px solid var(--hairline)',
              borderTop:  (typeof window !== 'undefined' && window.innerWidth >= 1024) ? 'none' : (i >= 2 ? '1px solid var(--hairline)' : 'none'),
            }} className="lg:!border-t-0 lg:[&:not(:first-child)]:border-l">
              <Stat item={s} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stats = Stats;