// Shift10 Landingpage — Social Proof (logos + testimonials)
function SocialProofSection() {
  const lp = useSanityLP();
  const logos = lp?.socialLogos || [
  "RAIFFEISEN", "MIGROS", "SUVA", "POSTFINANCE", "AXA", "MOBILIAR",
  "VBZ", "SCHINDLER", "ZKB", "EMS-CHEMIE"];

  const testimonials = lp?.testimonials || [
  {
    quote: "Mike spricht Klartext. Nach einem Vortrag wurde mir bewusst das KI einen nutzen für meine Alltagsaufgaben hat. Für mich als Inhabergeführte Autowerkstatt warte ich aber mal noch ab.",
    name: "Marcello Fiorenza",
    role: "MF GmbH, Illighausen"
  },
  {
    quote: "Für unseren Verein ist Mike's KI-Setup genial. So können alle unsere Bitcoin Software Entwickler durchstarten und mit praxisorientierten Aufgaben das neue Wissen an alle anderen Mitglieder vermitteln.",
    name: "Sascha Minic",
    role: "Swiss Bitcion Developer Association"
  },
  {
    quote: "Selten so eine ehrliche Beratung erlebt. Mike sagt auch, wann KI nichts bringt. Das hat uns intern enorm Glaubwürdigkeit gespart.",
    name: "Sa",
    role: "CIO · Verband CH"
  }];


  return (
    <section id="social-proof" className="section section--bone">
      <div className="container container--wide">
        {/* Logo marquee */}
        <div style={{ marginBottom: 100 }}>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <span className="eyebrow">REFERENZEN</span>
          </div>
          <div className="marquee">
            <div className="marquee-track">
              {[...logos, ...logos].map((l, i) =>
              <span key={i} style={{
                fontFamily: "var(--font-display)",
                fontSize: 22,
                fontWeight: 600,
                letterSpacing: "0.04em",
                color: "var(--color-neutral-400)",
                whiteSpace: "nowrap"
              }}>
                  {l}
                </span>
              )}
            </div>
          </div>
          <p style={{
            textAlign: "center",
            marginTop: 24,
            fontSize: 13,
            color: "var(--color-neutral-500)",
            fontFamily: "var(--font-mono)",
            letterSpacing: "0.06em"
          }}>Unternehmen die mit uns bereits geshiftet sind

          </p>
        </div>

        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <h2 className="display display--md" style={{ fontWeight: 500 }}>Kundenstimmen

          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0 }}>
          {testimonials.map((t, i) =>
          <figure key={i} style={{
            margin: 0,
            padding: "40px 36px",
            background: "var(--color-white)",
            border: "1px solid var(--color-neutral-200)",
            borderLeft: i === 0 ? "1px solid var(--color-neutral-200)" : "none",
            display: "flex", flexDirection: "column"
          }}>
              <span style={{
              fontFamily: "var(--font-display)",
              fontSize: 56,
              lineHeight: 0.6,
              color: "var(--color-accent)",
              marginBottom: 12
            }}>
                "
              </span>
              <blockquote style={{
              margin: 0,
              fontFamily: "var(--font-display)",
              fontSize: 19,
              fontWeight: 450,
              lineHeight: 1.45,
              letterSpacing: "-0.01em",
              color: "var(--color-neutral-900)",
              flex: 1
            }}>
                {t.quote}
              </blockquote>
              <figcaption style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--color-neutral-200)" }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{t.name}</div>
                <div style={{ marginTop: 4, fontSize: 13, color: "var(--color-neutral-500)" }}>{t.role}</div>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { SocialProofSection });