/* global React, Icon */

function StatStrip() {
  return (
    <section className="statstrip" data-screen-label="Stat strip">
      <div className="container">
        <div className="statstrip__row">
          <div className="statstrip__item">
            <div className="statstrip__num">30+</div>
            <div className="statstrip__lbl">År i faget</div>
          </div>
          <div className="statstrip__item">
            <div className="statstrip__num">2013</div>
            <div className="statstrip__lbl">Fusioneret</div>
          </div>
          <div className="statstrip__item">
            <div className="statstrip__num">4</div>
            <div className="statstrip__lbl">Specialer</div>
          </div>
          <div className="statstrip__item">
            <div className="statstrip__num">1</div>
            <div className="statstrip__lbl">Showroom</div>
          </div>
        </div>
      </div>
      <style>{`
        .statstrip { padding: 48px 0; background: var(--surface-ink); }
        .statstrip__row { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; overflow: hidden; background: var(--surface-panel); border: 1px solid var(--surface-divider); border-radius: 10px; }
        .statstrip__item { padding: 28px 24px; border-right: 1px solid rgba(11,17,24,0.08); }
        .statstrip__item:last-child { border-right: 0; }
        .statstrip__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: 1; color: var(--accent); letter-spacing: -0.01em; }
        .statstrip__lbl { font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); margin-top: 10px; }
        @media (max-width: 720px) {
          .statstrip__row { grid-template-columns: 1fr 1fr; }
          .statstrip__item:nth-child(2) { border-right: 0; }
          .statstrip__item:nth-child(1), .statstrip__item:nth-child(2) { border-bottom: 1px solid rgba(11,17,24,0.08); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { StatStrip });