// Brand-style wordmarks for case-study cards.
// Each company gets a typographic treatment that suggests its real identity
// without copying any trademarked artwork.

function WordmarkOnePortal({ ink = "#fff" }) {
  // Stacked "ONE / PORTAL" with a circular mark — crisp, school/admin feel
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 18, color: ink }}>
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden>
        <circle cx="28" cy="28" r="26" stroke={ink} strokeWidth="2.5" />
        <circle cx="28" cy="28" r="14" stroke={ink} strokeWidth="2.5" />
        <circle cx="28" cy="28" r="4.5" fill={ink} />
      </svg>
      <div style={{ lineHeight: 0.92 }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 22, fontWeight: 600, letterSpacing: "0.18em",
          textTransform: "uppercase", opacity: 0.85,
        }}>One</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 38, fontWeight: 600, letterSpacing: "-0.02em",
          marginTop: 2,
        }}>Portal</div>
      </div>
    </div>
  );
}

function WordmarkHalliday({ ink = "#fff" }) {
  // Italic serif wordmark with floodlight beam — "Halliday" energy
  const accent = "oklch(0.78 0.18 70)";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, color: ink }}>
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden>
        {/* Mast */}
        <rect x="26" y="14" width="4" height="34" rx="1" fill={ink} />
        {/* Lamp head */}
        <rect x="18" y="10" width="20" height="8" rx="1.5" fill={ink} />
        {/* Beam */}
        <path d="M28 18 L4 50 L52 50 Z" fill={accent} fillOpacity="0.35" />
        <path d="M28 18 L14 48 M28 18 L42 48" stroke={accent} strokeWidth="1.2" />
      </svg>
      <div style={{ lineHeight: 0.95 }}>
        <div style={{
          fontFamily: "Instrument Serif, var(--font-display)",
          fontStyle: "italic",
          fontSize: 44, fontWeight: 400, letterSpacing: "-0.02em",
        }}>Halliday</div>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11, letterSpacing: "0.32em",
          textTransform: "uppercase", marginTop: 6, opacity: 0.7,
        }}>Lighting</div>
      </div>
    </div>
  );
}

function WordmarkCompliantEPC({ ink = "#fff" }) {
  // Compliant EPC — energy-rating bar + bold sans
  const bars = ["A", "B", "C", "D"];
  const colors = ["oklch(0.7 0.2 145)", "oklch(0.78 0.18 130)", "oklch(0.82 0.18 100)", "oklch(0.8 0.18 80)"];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 18, color: ink }}>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        {bars.map((b, i) => (
          <div key={b} style={{
            display: "flex", alignItems: "center",
            background: colors[i],
            color: "oklch(0.2 0.02 145)",
            fontFamily: "var(--font-display)",
            fontWeight: 700, fontSize: 11,
            paddingLeft: 6, paddingRight: 6,
            height: 12,
            width: 24 + i * 6,
            borderRadius: 1,
          }}>{b}</div>
        ))}
      </div>
      <div style={{ lineHeight: 0.95 }}>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em",
        }}>Compliant</div>
        <div style={{
          fontFamily: "var(--font-display)",
          fontSize: 32, fontWeight: 300, letterSpacing: "0.02em",
          marginTop: 2,
        }}>EPC</div>
      </div>
    </div>
  );
}

function WordmarkLeapHub({ ink = "#fff" }) {
  // Leaping arc + "LeapHub" — work-experience platform energy
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16, color: ink }}>
      <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden>
        {/* Arc — the "leap" */}
        <path d="M6 42 Q28 4 50 42" stroke={ink} strokeWidth="3" strokeLinecap="round" fill="none" />
        {/* Start dot */}
        <circle cx="6" cy="42" r="4" fill={ink} />
        {/* End dot — slightly offset, larger */}
        <circle cx="50" cy="42" r="5.5" fill={ink} />
        <circle cx="50" cy="42" r="2" fill="currentColor" style={{ color: "oklch(0.5 0.2 18)" }} />
      </svg>
      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: 42, fontWeight: 600, letterSpacing: "-0.025em",
        lineHeight: 1,
      }}>
        Leap<span style={{ fontWeight: 300 }}>Hub</span>
      </div>
    </div>
  );
}

function CaseCardWordmark({ slug, ink }) {
  if (slug === "oneportal")    return <WordmarkOnePortal    ink={ink} />;
  if (slug === "halliday")     return <WordmarkHalliday     ink={ink} />;
  if (slug === "compliantepc") return <WordmarkCompliantEPC ink={ink} />;
  if (slug === "leaphub")      return <WordmarkLeapHub      ink={ink} />;
  return null;
}

Object.assign(window, {
  CaseCardWordmark,
  WordmarkOnePortal, WordmarkHalliday, WordmarkCompliantEPC, WordmarkLeapHub,
});