// Stats — non-personal social proof: aggregate numbers + product proof, no fake people
function Stats() {
  return (
    <section className="section-pad">
      <div className="container">
        <span className="section-eyebrow">Чому НМТ+</span>
        <h2 className="section-title">Тренажер, що тренує саме тебе</h2>
        <p className="section-sub">Не папка з тестами і не записані лекції. Жива система, яка вчиться разом з тобою щодня.</p>

        <div className="proof-grid">
          <div className="proof big">
            <div className="proof-eyebrow">База питань</div>
            <Counter end={20000} suffix="+" className="proof-num"/>
            <div className="proof-sub">актуальних питань з 12 предметів НМТ. Кожне з детальним поясненням.</div>
            <div className="proof-bars">
              {["Українська","Математика","Історія","Англійська","Біологія","Хімія","Фізика","Географія"].map((s, i) => (
                <div key={i} className="proof-bar-row">
                  <span>{s}</span>
                  <div className="proof-bar"><i style={{ width: [88,76,92,72,68,64,72,80][i] + "%" }}/></div>
                </div>
              ))}
            </div>
          </div>

          <div className="proof">
            <div className="proof-eyebrow">Алгоритм</div>
            <Counter end={97} suffix="%" className="proof-num small"/>
            <div className="proof-sub">точність визначення слабких тем після 50 відповідей</div>
          </div>

          <div className="proof orange">
            <div className="proof-eyebrow">Оновлення</div>
            <div className="proof-num small" style={{ color: "var(--o-700)" }}>Щотижня</div>
            <div className="proof-sub">нові питання за останньою програмою МОН</div>
          </div>

          <div className="proof">
            <div className="proof-eyebrow">У застосунку</div>
            <Counter end={7} suffix="" className="proof-num small"/>
            <div className="proof-sub">варіантів проходження: експрес, тематичний, симуляція, помилки, бліц та інші</div>
          </div>

          <div className="proof dark">
            <div className="proof-eyebrow" style={{ color: "rgba(255,215,0,0.85)" }}>Створено</div>
            <div className="proof-num small" style={{ color: "#fff" }}>Військовими</div>
            <div className="proof-sub" style={{ color: "rgba(226,232,240,0.7)" }}>діючим підрозділом ЗСУ — для нового покоління України</div>
          </div>
        </div>

        {/* product trust marquee */}
        <div className="trust-row">
          <div className="trust-pill"><Icon name="bolt" size={14}/> Працює офлайн</div>
          <div className="trust-pill"><Icon name="brain" size={14}/> Адаптивний AI</div>
          <div className="trust-pill"><Icon name="target" size={14}/> Програма МОН 2026</div>
          <div className="trust-pill"><Icon name="shield" size={14}/> Без реклами</div>
          <div className="trust-pill"><Icon name="trophy" size={14}/> Симуляція НМТ</div>
          <div className="trust-pill"><Icon name="fire" size={14}/> Стрік-режим</div>
          <div className="trust-pill"><Icon name="book" size={14}/> 12 предметів</div>
        </div>
      </div>
    </section>
  );
}

function Counter({ end, suffix = "", prefix = "", decimals = 0, className = "" }) {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          let start = Date.now();
          const dur = 1400;
          const tick = () => {
            const t = Math.min(1, (Date.now() - start) / dur);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(end * eased);
            if (t < 1) requestAnimationFrame(tick);
          };
          tick();
          obs.disconnect();
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [end]);
  const formatted = decimals > 0
    ? val.toFixed(decimals)
    : Math.round(val).toLocaleString("uk-UA").replace(/,/g, " ");
  return (
    <div ref={ref} className={className}>{prefix}{formatted}{suffix}</div>
  );
}
window.Stats = Stats;