// results.jsx — wyniki klientów (numbers)
function Results() {
  const [ref, seen] = useInView(0.2);
  return (
    <section id="results" className="results" ref={ref}>
      <div className="container">
        <div className="results-grid">
          <div className="results-stat big">
            <div className="results-num">
              {seen ? <CountUp to={27} suffix="%" duration={1400}/> : '0%'}
            </div>
            <div className="results-label">średni wzrost obrotu w 90 dni od startu</div>
          </div>
          <div className="results-stat">
            <div className="results-num">
              {seen ? <CountUp to={120} suffix="+" duration={1600}/> : '0+'}
            </div>
            <div className="results-label">wdrożonych sklepów stacjonarnych</div>
          </div>
          <div className="results-stat">
            <div className="results-num">
              {seen ? <CountUp to={4.8} duration={1500} decimals={1}/> : '0'}<span className="of">/5</span>
            </div>
            <div className="results-label">średnia ocen właścicieli (Google)</div>
          </div>
          <div className="results-stat">
            <div className="results-num">
              {seen ? <CountUp to={30} duration={1300}/> : '0'}<span className="suf">dni</span>
            </div>
            <div className="results-label">średni czas wdrożenia pod klucz</div>
          </div>
        </div>
      </div>

      <style>{`
        .results{ padding: 80px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .results-grid{
          display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
          gap: 0;
        }
        .results-stat{
          padding: 28px 36px;
          border-right: 1px solid var(--line);
        }
        .results-stat:last-child{ border-right: 0; }
        .results-stat.big .results-num{ color: var(--brand); }
        .results-num{
          font-family: var(--font-display);
          font-size: clamp(48px, 6vw, 80px);
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 1;
          font-variant-numeric: tabular-nums;
          margin-bottom: 14px;
        }
        .results-num .of, .results-num .suf{
          font-size: 0.4em;
          color: var(--ink-3);
          margin-left: 4px;
          font-weight: 400;
        }
        .results-label{
          font-size: 13.5px; color: var(--ink-2);
          line-height: 1.4;
          max-width: 280px;
        }
        @media (max-width: 980px){
          .results-grid{ grid-template-columns: 1fr 1fr; }
          .results-stat{
            border-right: 0; border-bottom: 1px solid var(--line);
            padding: 24px 0;
          }
          .results-stat:nth-child(odd){ border-right: 1px solid var(--line); padding-right: 24px; }
          .results-stat:nth-child(even){ padding-left: 24px; }
        }
        @media (max-width: 560px){
          .results-grid{ grid-template-columns: 1fr; }
          .results-stat{ border-right: 0; padding: 24px 0; }
          .results-stat:last-child{ border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

window.Results = Results;