// Shift10 Landingpage — Authority / TKB section
function AuthoritySection() {
  const lp = useSanityLP();

  const fallbackWordmarks = [
    { kind: "logo", text: "MIGROS", font: "var(--font-display)", weight: 700, size: 38, letter: "0.02em" },
    { kind: "logo", text: "QuantumBasel", font: "var(--font-display)", weight: 600, size: 36, letter: "-0.02em", color: "var(--color-neutral-500)", prefix: "∞" },
    { kind: "copy" },
    { kind: "logo", text: "Futurise", font: "var(--font-display)", weight: 800, size: 38, letter: "-0.04em", italic: true },
    { kind: "logo", text: "TKB", font: "var(--font-display)", weight: 700, size: 38, letter: "0.04em" },
    { kind: "logo", text: "Stadler", font: "var(--font-display)", weight: 600, size: 36, letter: "-0.02em" },
    { kind: "logo", text: "BÜHLER", font: "var(--font-display)", weight: 700, size: 36, letter: "0.06em" },
    { kind: "logo", text: "swisscom", font: "var(--font-display)", weight: 500, size: 36, letter: "-0.01em", color: "var(--color-neutral-500)" },
    { kind: "logo", text: "Helvetia", font: "var(--font-display)", weight: 600, size: 36, letter: "-0.02em" },
    { kind: "logo", text: "RICOLA", font: "var(--font-display)", weight: 800, size: 36, letter: "0.04em" },
    { kind: "logo", text: "Mobiliar", font: "var(--font-display)", weight: 600, size: 36, letter: "-0.02em" },
    { kind: "logo", text: "EMMI", font: "var(--font-display)", weight: 700, size: 38, letter: "0.06em" },
    { kind: "logo", text: "Geberit", font: "var(--font-display)", weight: 500, size: 36, letter: "-0.01em" },
    { kind: "logo", text: "Swissmem", font: "var(--font-display)", weight: 600, size: 36, letter: "-0.02em", color: "var(--color-neutral-500)" },
    { kind: "logo", text: "Bossard", font: "var(--font-display)", weight: 700, size: 36, letter: "-0.02em" },
    { kind: "logo", text: "SIKA", font: "var(--font-display)", weight: 800, size: 38, letter: "0.04em" },
  ];

  // If Sanity has image logos, build items from those; else use text wordmarks.
  const sanityLogos = lp?.authorityLogos;
  const count = lp?.authorityCount || "50";

  const items = sanityLogos?.length
    ? [
        ...sanityLogos.map(l => ({ kind: "img", name: l.name, asset: l.logo?.asset })),
        { kind: "copy" },
      ]
    : fallbackWordmarks;

  const renderItem = (it, idx) => {
    if (it.kind === "copy") {
      return (
        <span key={idx} style={{
          display: "inline-flex", alignItems: "center",
          fontSize: 22, fontWeight: 400, color: "var(--color-black)",
          whiteSpace: "nowrap"
        }}>
          Über{" "}
          <span style={{ color: "var(--color-accent)", fontWeight: 600, marginLeft: 8, marginRight: 8 }}>
            {count} Workshops
          </span>
          mit Schweizer Unternehmen
        </span>
      );
    }
    if (it.kind === "img") {
      const src = sanityImgUrl(it.asset, 160);
      if (src) {
        return (
          <span key={idx} style={{ display: "inline-flex", alignItems: "center", whiteSpace: "nowrap" }}>
            <img
              src={src}
              alt={it.name}
              style={{ height: 36, width: "auto", objectFit: "contain", filter: "grayscale(100%)", opacity: 0.7 }}
            />
          </span>
        );
      }
      // img not yet uploaded — fall back to text
      return (
        <span key={idx} style={{
          display: "inline-flex", alignItems: "center",
          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 32,
          letterSpacing: "-0.02em", color: "var(--color-neutral-500)",
          whiteSpace: "nowrap"
        }}>
          {it.name}
        </span>
      );
    }
    return (
      <span key={idx} style={{
        display: "inline-flex", alignItems: "center", gap: 10,
        fontFamily: it.font,
        fontWeight: it.weight,
        fontSize: it.size,
        letterSpacing: it.letter,
        color: it.color || "var(--color-black)",
        fontStyle: it.italic ? "italic" : "normal",
        whiteSpace: "nowrap"
      }}>
        {it.prefix && <span style={{ color: "var(--color-accent)", fontSize: it.size * 0.95 }}>{it.prefix}</span>}
        {it.text}
      </span>
    );
  };

  const eyebrow = lp?.authorityEyebrow || "Hauptberuf · KI-Spezialist bei der Thurgauer Kantonalbank";
  const headline = lp?.authorityHeadline || "Freitags bei euch auf der Bühne.";
  const headlineMuted = lp?.authorityHeadlineMuted || "Mo - Do bei einer Regionalen Bank.";

  return (
    <section id="autoritaet" className="section section--white" style={{
      paddingTop: 120, paddingBottom: 120,
      position: "relative", overflow: "hidden"
    }}>
      <style>{`
        @keyframes s10-marquee-ltr {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
      `}</style>

      <div className="container" style={{ marginBottom: 56, textAlign: "center" }}>
        <span className="eyebrow" style={{ display: "inline-block" }}>
          <span style={{
            width: 6, height: 6, borderRadius: "50%",
            background: "var(--color-accent)",
            display: "inline-block", marginRight: 10, verticalAlign: "middle"
          }} />
          {eyebrow}
        </span>
        <h2 style={{
          marginTop: 24,
          fontFamily: "var(--font-display)",
          fontSize: "clamp(28px, 2.8vw, 40px)",
          fontWeight: 500, letterSpacing: "-0.025em",
          maxWidth: 720, marginInline: "auto",
          textWrap: "balance",
          color: "var(--color-black)"
        }}>
          <span style={{ display: "block" }}>{headline}</span>
          <span style={{ display: "block", color: "var(--color-neutral-500)" }}>{headlineMuted}</span>
        </h2>
      </div>

      <div aria-hidden="true" style={{
        position: "relative",
        maskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)",
        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)"
      }}>
        <div style={{
          display: "flex",
          width: "max-content",
          animation: "s10-marquee-ltr 60s linear infinite",
          alignItems: "center",
          gap: 80,
          whiteSpace: "nowrap"
        }}>
          {[...items, ...items].map((it, idx) => renderItem(it, idx))}
        </div>
      </div>
    </section>
  );
}