/* ClientLogos — text-set client wordmarks strip. Real site shows Murphy & Son,
 * Utopia, Hopkins, Answer4U, Boneham. Rendered as bold text wordmarks until
 * real logo files are dropped in. */

function ClientLogos({ tone = "paper" }) {
  const onInk = tone === "ink";
  const clients = [
    { name: "Murphy & Son", style: { fontFamily: "Georgia, serif", fontStyle: "italic", letterSpacing: "-0.01em" } },
    { name: "Utopia",       style: { fontWeight: 800, letterSpacing: "0.32em", textTransform: "uppercase", fontSize: "0.85em" } },
    { name: "Hopkins",      style: { fontWeight: 700, letterSpacing: "-0.02em" } },
    { name: "Answer4U",     style: { fontWeight: 800, letterSpacing: "-0.015em", fontStyle: "italic" } },
    { name: "Boneham",      style: { fontFamily: "Georgia, serif", fontWeight: 600, letterSpacing: "0.04em" } },
  ];
  return (
    <section style={{
      background: onInk ? "var(--ri-ink)" : "var(--ri-paper)",
      color: onInk ? "var(--fg-inverse)" : "var(--fg)",
      padding: "56px 0",
      borderTop: onInk ? "1px solid var(--border-ink)" : "1px solid var(--border)",
      borderBottom: onInk ? "1px solid var(--border-ink)" : "1px solid var(--border)",
    }}>
      <Container>
        <div style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          gap: 32, flexWrap: "wrap",
        }} className="ri-logos-row">
          <div style={{
            fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase",
            fontWeight: 600, color: onInk ? "var(--ri-pink)" : "var(--ri-pink)",
            whiteSpace: "nowrap",
          }}>
            Trusted by
          </div>
          <ul style={{
            listStyle: "none", padding: 0, margin: 0,
            display: "flex", gap: "28px 48px", flexWrap: "wrap",
            alignItems: "center", flex: 1, justifyContent: "flex-end",
            fontSize: 22, lineHeight: 1,
            color: onInk ? "rgba(245,245,247,0.78)" : "var(--fg-muted)",
          }} className="ri-logos-list">
            {clients.map((c) => (
              <li key={c.name} style={c.style}>{c.name}</li>
            ))}
          </ul>
        </div>
      </Container>
      <style>{`
        @media (max-width: 720px) {
          .ri-logos-row { flex-direction: column !important; align-items: flex-start !important; }
          .ri-logos-list { justify-content: flex-start !important; gap: 18px 32px !important; font-size: 18px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ClientLogos });