/* Trust bar — consolidated section with heading + 4 key facts */

const TrustBar = () => {
  const ref = React.useRef(null);
  useReveal(ref);
  const items = [
    { ic: <I.Award size={22}/>,  v: 'JCI · США',   label: 'Международная аккредитация' },
    { ic: <I.Clock size={24}/>,  v: '24 часа',     label: 'Ответ врача на запрос' },
    { ic: <I.Globe size={24}/>,  v: 'На русском',  label: 'Координатор и все документы' },
    { ic: <I.Heart size={24}/>,  v: '1 000+',      label: 'Пациентов из СНГ с 2015 года' },
  ];
  return (
    <section className="trust" id="about" ref={ref}>
      <style>{`
        .trust { background: var(--paper); padding: 72px 0; }
        @media (max-width: 640px) { .trust { padding: 48px 0; } }

        .trust-head { max-width: 560px; margin: 0 0 36px; }
        .trust-head .eyebrow {
          font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--clay-dark); font-weight: 600;
          display: inline-flex; align-items: center; gap: 8px;
        }
        .trust-head .eyebrow::before {
          content: ''; width: 6px; height: 6px; border-radius: 50%;
          background: var(--sage);
          box-shadow: 0 0 0 3px color-mix(in oklab, var(--sage) 25%, transparent);
        }
        .trust-head h2 {
          font-family: var(--font-display);
          font-size: clamp(32px, 4vw, 44px);
          font-weight: 350;
          line-height: 1.1;
          letter-spacing: -0.02em;
          color: var(--ink);
          margin: 14px 0 0;
        }
        .trust-head h2 em { font-style: italic; color: var(--clay-dark); font-weight: 300; }
        @media (max-width: 640px) {
          .trust-head { margin-bottom: 24px; }
          .trust-head h2 { font-size: 28px; }
        }

        .trust-card {
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-xl);
          box-shadow: var(--shadow-sm);
          overflow: hidden;
        }
        .trust-grid {
          display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
          gap: 0;
        }
        @media (max-width: 768px) {
          .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        .trust-cell {
          display: flex; flex-direction: column; gap: 10px;
          padding: 28px 24px;
          border-right: 1px solid var(--ink-10);
          min-width: 0;
          transition: background 0.2s;
        }
        .trust-cell:hover { background: color-mix(in oklab, var(--clay) 4%, var(--snow)); }
        .trust-cell:last-child { border-right: 0; }
        @media (max-width: 768px) {
          .trust-cell { padding: 22px 18px; border-bottom: 1px solid var(--ink-10); }
          .trust-cell:nth-child(2n) { border-right: 0; }
          .trust-cell:nth-last-child(-n+2) { border-bottom: 0; }
        }
        .trust-cell .ic {
          color: var(--clay);
          width: 44px; height: 44px;
          border-radius: 12px;
          background: var(--clay-soft);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .trust-cell .v {
          font-family: var(--font-body);
          font-size: clamp(22px, 2.6vw, 28px);
          font-weight: 700;
          line-height: 1.15;
          letter-spacing: -0.015em;
          color: var(--ink);
          font-variant-numeric: tabular-nums;
          margin-top: 2px;
        }
        .trust-cell .label {
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          line-height: 1.4;
          color: var(--ink-60);
        }
      `}</style>
      <div className="container">
        <div className="trust-head reveal">
          <span className="eyebrow">Факты · не маркетинг</span>
          <h2>Почему нам <em>доверяют</em>.</h2>
        </div>
        <div className="trust-card reveal d1">
          <div className="trust-grid">
            {items.map((it, i) => (
              <div key={i} className="trust-cell">
                <div className="ic">{it.ic}</div>
                <div className="v">{it.v}</div>
                <div className="label">{it.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.TrustBar = TrustBar;