// LogoLockup.jsx — cream typographic stand-in for use on navy backgrounds
// until a proper cream-knockout SVG is provided.
const LogoLockup = ({ height = 48, withRibbon = true }) => {
  const scale = height / 64;
  return (
    <div style={{
      display: "inline-flex", flexDirection: "column", alignItems: "center",
      lineHeight: 1, color: "var(--tp-cream)",
      transform: `scale(${scale})`, transformOrigin: "left center",
      height, // collapse height to match prop after scale
    }}>
      <div style={{
        fontFamily: "var(--font-script)",
        fontSize: 44, lineHeight: 1, color: "var(--tp-cream)",
        letterSpacing: "-0.01em", whiteSpace: "nowrap",
        textShadow: "0 1px 0 rgba(0,0,0,0.25)",
      }}>
        <span style={{display: "inline-block"}}>Triple</span>
        <span style={{display: "inline-block", marginLeft: 6, color: "var(--tp-cream)"}}>Play</span>
      </div>
      {withRibbon && (
        <div style={{
          marginTop: 4, padding: "2px 10px",
          background: "var(--tp-red)", color: "var(--tp-cream)",
          fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 400,
          letterSpacing: "0.14em", textTransform: "uppercase",
          borderRadius: 2, whiteSpace: "nowrap",
          boxShadow: "0 1px 0 rgba(0,0,0,0.25)",
        }}>
          Established 1988
        </div>
      )}
    </div>
  );
};

Object.assign(window, { LogoLockup });