// Toddlers Items Unlimited OPC — logo
// Uses the real hand/baby mark PNG + Nexa-style wordmark

function TIULogo({ variant = "full", width = 240, dark = false, className, style }) {
  const C = {
    orange:"#FF7F32", yellow:"#FFB81C", purpleD:"#5F259F", magenta:"#BB29BB",
    cyan:"#00B5E2", blueD:"#007DBA", green:"#78BE20", lime:"#E0E721",
    gray:"#53565A", black:"#101820",
  };
  const ink = dark ? "#FFFFFF" : C.black;

  const Mark = ({ h = 80 }) => (
    <img src="brand/tiu-mark.png" alt="" aria-hidden="true"
      style={{ height: h, width: "auto", display: "block", objectFit: "contain" }} />
  );

  const Wordmark = ({ fontSize = 18 }) => {
    const trackStyle = {
      fontFamily: "'Nexa', 'Barlow', 'Helvetica Neue', Arial, sans-serif",
      fontWeight: 300,
      letterSpacing: "0.18em",
      color: ink,
      fontSize,
      lineHeight: 1,
      whiteSpace: "nowrap",
      display: "inline-flex",
      alignItems: "center",
      gap: "0.35em",
    };
    const boldStyle = { fontWeight: 700 };
    const dotSize = fontSize * 0.32;
    return (
      <div style={trackStyle}>
        <span>TODDLER</span>
        <span style={boldStyle}>ITEMS</span>
        <span style={{ display: "inline-flex", alignItems: "baseline" }}>
          UNL
          <span style={{ position: "relative", display: "inline-block" }}>
            <span style={{
              position: "absolute",
              left: "50%",
              top: `-${fontSize * 0.55}px`,
              transform: "translateX(-50%)",
              width: dotSize, height: dotSize,
              borderRadius: "999px",
              background: C.cyan,
              boxShadow: `0 0 0 2px ${dark ? "rgba(0,0,0,0.2)" : "rgba(255,255,255,0.6)"}`,
            }} />
            I
          </span>
          MITED
        </span>
        <span>OPC</span>
      </div>
    );
  };

  if (variant === "mark") {
    return (
      <div className={className} style={{ display: "inline-flex", ...style }}>
        <Mark h={width} />
      </div>
    );
  }

  if (variant === "stacked") {
    const markH = width * 0.6;
    const fs = Math.max(10, width * 0.052);
    return (
      <div className={className} style={{ display: "inline-flex", flexDirection: "column", alignItems: "center", gap: markH * 0.06, ...style }}>
        <Mark h={markH} />
        <Wordmark fontSize={fs} />
      </div>
    );
  }

  // horizontal
  const markH = width * 0.28;
  const fs = Math.max(9, width * 0.038);
  return (
    <div className={className} style={{ display: "inline-flex", alignItems: "center", gap: markH * 0.2, ...style }}>
      <Mark h={markH} />
      <Wordmark fontSize={fs} />
    </div>
  );
}

window.TIULogo = TIULogo;
window.TIU_BRAND_COLORS = {
  orange:"#E59A57",   // apricot — warm highlight
  yellow:"#F3D7B4",   // soft peach — background accent
  purpleD:"#9B74A0",  // muted plum
  magenta:"#FF7F00",  // claude orange
  cyan:"#A8C98B",     // sage green from logo
  blueD:"#A86A2A",    // warm caramel — script emphasis
  green:"#7BAE6A",    // deeper sage
  lime:"#D4E8A8",     // light sage
  gray:"#666784",     // muted slate
  black:"#2F3152",    // muted navy — primary dark
};