/* SocialProof, FedEx trust line + two B2B customer quote cards */

function QuoteCard({ quote, name, role, place }) {
  return (
    <figure style={{
      background: "var(--scd-cream-50)",
      border: "1px solid var(--border)",
      borderRadius: 4,
      padding: 32,
      margin: 0,
      display: "flex", flexDirection: "column",
      boxShadow: "var(--shadow-sm)",
    }}>
      <div aria-hidden="true" style={{
        fontFamily: "var(--font-display)", fontSize: 54, lineHeight: 0.6,
        color: "var(--scd-blush-500)", fontWeight: 400,
        height: 22,
      }}>&ldquo;</div>
      <blockquote style={{
        fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 400,
        lineHeight: 1.35, letterSpacing: "-0.005em", color: "var(--fg-brand)",
        margin: "12px 0 22px",
      }}>{quote}</blockquote>
      <div style={{ height: 1, background: "var(--border)", margin: "0 0 18px" }}/>
      <figcaption style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{
          width: 40, height: 40, borderRadius: "50%",
          background: "var(--scd-cream-300)", color: "var(--fg-brand)",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-display)", fontSize: 16, fontWeight: 500,
          border: "1px solid var(--border)",
        }}>{name.split(" ").map(s => s[0]).join("").slice(0,2)}</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: "var(--fg-brand)" }}>{name}</div>
          <div style={{ fontSize: 12, color: "var(--fg-muted)" }}>{role} &middot; {place}</div>
        </div>
      </figcaption>
    </figure>
  );
}

function SocialProof() {
  return (
    <section className="band-sunk">
      <div className="wrap">
        <div className="section-head">
          <div>
            <Eyebrow>Trusted by</Eyebrow>
            <h2 style={{ marginTop: 14 }}>The shops that reorder, year after year.</h2>
          </div>
          <p className="lead">
            From FedEx Office to the neighborhood sign shop, the people who depend on
            paper trimmers running every day are who we built this catalog for.
          </p>
        </div>

        {/* FedEx trust line */}
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "center",
          gap: 20, padding: "22px 24px", marginBottom: 40,
          background: "var(--scd-cream-50)",
          border: "1px solid var(--border)", borderRadius: 4,
          flexWrap: "wrap",
        }}>
          <img src="assets/fedex-logo.png" alt="FedEx Office" style={{ height: 28 }}/>
          <span style={{ width: 1, height: 24, background: "var(--border)" }} aria-hidden="true"/>
          <span style={{
            fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 400,
            color: "var(--fg-brand)", letterSpacing: "-0.01em",
          }}>
            Trusted by FedEx Office print centers nationwide, for 35 years.
          </span>
        </div>

        <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <QuoteCard
            quote="We've been buying trimmers from South Coast since the Reagan administration. Different generation answering the phone now, same shipment showing up on time."
            name="Dana Okonkwo"
            role="Owner"
            place="Westside Print Co., Portland OR"
          />
          <QuoteCard
            quote="We run a twelve-station print operation for 38,000 students. SCD is the one vendor I don't have to think about, blades arrive before the old ones dull."
            name="Marcus Hale"
            role="Print Services Manager"
            place="University of Texas at Austin"
          />
        </div>
      </div>
    </section>
  );
}

window.SocialProof = SocialProof;