/* TrustBar, four stats + FedEx trust line below */

function TrustBar() {
  const items = [
    { big: "45+", small: "Years in business" },
    { big: "35+", small: "Years with FedEx Office" },
    { big: "50", small: "States shipped" },
    { big: "Family", small: "Owned & operated" },
  ];
  return (
    <section style={{
      background: "var(--scd-cream-100)",
      borderBottom: "1px solid var(--border)",
      padding: "36px 0 30px",
    }}>
      <div className="wrap">
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 28, flexWrap: "wrap",
        }} className="trust-row">
          {items.map((it, i) => (
            <React.Fragment key={it.big}>
              <div style={{ textAlign: "center", flex: "1 1 120px", minWidth: 100 }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 40, fontWeight: 500,
                  color: "var(--fg-brand)", letterSpacing: "-0.02em", lineHeight: 1,
                }}>{it.big}</div>
                <div style={{
                  fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--fg-muted)", marginTop: 8, fontWeight: 500,
                }}>{it.small}</div>
              </div>
              {i < items.length - 1 && (
                <span aria-hidden="true" style={{
                  width: 1, height: 44, background: "var(--border)",
                }} className="trust-divider"/>
              )}
            </React.Fragment>
          ))}
        </div>
        <div style={{ height: 1, background: "var(--border)", margin: "26px auto 18px", maxWidth: 520 }}/>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 16,
          fontSize: 13, color: "var(--fg-muted)", flexWrap: "wrap",
        }}>
          <span style={{
            fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--scd-ink-500)", fontWeight: 600,
          }}>Trusted by</span>
          <img src="assets/fedex-logo.png" alt="FedEx Office" style={{ height: 26, width: "auto", display: "block" }}/>
          <span style={{ color: "var(--fg)" }}>
            print centers nationwide.
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 640px) { .trust-divider { display: none !important; } }
      `}</style>
    </section>
  );
}

window.TrustBar = TrustBar;