// Client + organisation logos — drawn with SVG so they look crafted, not stock
// Each logo is a wordmark + glyph that suggests the real brand without copying it.

function ClientLogo({ name, glyph, color = "currentColor", size = 18, style = {} }) {
  return (
    <span className="logo-mark" style={{ fontSize: size, color, ...style }}>
      {glyph && <span className="glyph">{glyph}</span>}
      <span>{name}</span>
    </span>
  );
}

// ---- Glyphs ----------------------------------------------------------------

function GlyphOnePortal() {
  // Concentric portal — a literal "one portal"
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="12" cy="12" r="5.5" stroke="currentColor" strokeWidth="1.6" />
      <circle cx="12" cy="12" r="1.6" fill="currentColor" />
    </svg>
  );
}

function GlyphHalliday() {
  // Stage spotlight beams
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M12 3 L4 21 L20 21 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <circle cx="12" cy="3" r="1.6" fill="currentColor" />
      <line x1="9" y1="14" x2="15" y2="14" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  );
}

function GlyphCompliantEPC() {
  // Energy gauge / certificate badge
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M3 14a9 9 0 0 1 18 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
      <path d="M12 14 L17 9" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="12" cy="14" r="1.5" fill="currentColor" />
      <line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" strokeWidth="1.4" />
    </svg>
  );
}

function GlyphLeapHub() {
  // Concentric hub with leaping arc
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="14" r="6" stroke="currentColor" strokeWidth="1.6" />
      <path d="M3 14 Q12 1 21 14" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" fill="none" />
      <circle cx="12" cy="14" r="1.6" fill="currentColor" />
    </svg>
  );
}

// ---- Trust-bar logos (NHS, Crown Commercial, etc.) -------------------------

function GlyphNHS() {
  // Plus sign — clean medical glyph
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <rect x="2" y="6" width="20" height="12" rx="2" stroke="currentColor" strokeWidth="1.4" />
      <path d="M9 9 L9 15 M9 12 L13 12 M13 9 L13 15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="17" cy="12" r="1.5" fill="currentColor" />
    </svg>
  );
}

function GlyphCrown() {
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M3 9 L6 16 L12 11 L18 16 L21 9 L17 12 L12 6 L7 12 Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" />
      <line x1="4" y1="19" x2="20" y2="19" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function GlyphMOD() {
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M12 3 L20 7 L20 13 C20 17 16 20 12 21 C8 20 4 17 4 13 L4 7 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <path d="M9 12 L11 14 L15 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function GlyphCyber() {
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <path d="M4 6 L12 3 L20 6 L20 12 C20 17 16 20 12 21 C8 20 4 17 4 12 Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
      <circle cx="12" cy="11" r="2.2" stroke="currentColor" strokeWidth="1.4" />
      <line x1="12" y1="13" x2="12" y2="16" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

function GlyphBuyersDiscovery() {
  return (
    <svg viewBox="0 0 24 24" fill="none">
      <circle cx="11" cy="11" r="6" stroke="currentColor" strokeWidth="1.6" />
      <line x1="15.5" y1="15.5" x2="20" y2="20" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="11" cy="11" r="2" fill="currentColor" />
    </svg>
  );
}

// Convenience: full logo wall row
const TRUST_LOGOS = [
  { name: "NHS Trust", glyph: <GlyphNHS /> },
  { name: "Crown Commercial", glyph: <GlyphCrown /> },
  { name: "MoD", glyph: <GlyphMOD /> },
  { name: "Cyber Essentials", glyph: <GlyphCyber /> },
  { name: "Buyer's Discovery", glyph: <GlyphBuyersDiscovery /> },
];

const CLIENT_LOGOS = {
  oneportal:    { name: "OnePortal",     glyph: <GlyphOnePortal /> },
  halliday:     { name: "Halliday",      glyph: <GlyphHalliday /> },
  compliantepc: { name: "Compliant EPC", glyph: <GlyphCompliantEPC /> },
  leaphub:      { name: "LeapHub",       glyph: <GlyphLeapHub /> },
};

Object.assign(window, {
  ClientLogo, TRUST_LOGOS, CLIENT_LOGOS,
  GlyphOnePortal, GlyphHalliday, GlyphCompliantEPC, GlyphLeapHub,
  GlyphNHS, GlyphCrown, GlyphMOD, GlyphCyber, GlyphBuyersDiscovery,
});
