/* iColleges logo system — reusable React components.
   Renders the "i" plaque + the wordmark "Colleges".
   The dot above "i" has three interpretations: pin / drop / check.
*/

const LOGO_TEAL = "#1D9E75";
const LOGO_TEAL_DEEP = "#04342C";
const LOGO_INK = "#1A1A2E";
const LOGO_WHITE = "#FFFFFF";

/* ------------------------- The "i" plaque ------------------------- */
function LogoMark({
  size = 80,
  dot = "check",          // "check" (default) | "pin" | "drop"
  variant = "color",      // "color" | "inverse" | "mono-dark" | "mono-light"
  radiusRatio = 0.18,     // plaque corner radius / size — 18% reads as 10px at 56
  title = "iColleges",
}) {
  // Color resolution
  const palette = {
    color:       { bg: LOGO_TEAL,    fg: LOGO_WHITE },
    inverse:     { bg: LOGO_WHITE,   fg: LOGO_TEAL },
    "mono-dark": { bg: LOGO_INK,     fg: LOGO_WHITE },
    "mono-light":{ bg: LOGO_WHITE,   fg: LOGO_INK   },
  }[variant];

  const bg = palette.bg;
  const fg = palette.fg;

  // Geometry on a 100×100 grid
  const stem = { x: 42, y: 46, w: 16, h: 32, rx: 8 };
  // Dot variants
  const dotEl = (() => {
    if (dot === "pin") {
      return <circle cx="50" cy="28" r="10" fill={fg} />;
    }
    if (dot === "drop") {
      // Tear-drop: round top, point heading down toward the stem.
      // Top circle r=10 around (50,24), tapers down to point at (50, 40).
      const d = "M50 14 C56.1 14 61 18.9 61 25 C61 31 56 34 50 41 C44 34 39 31 39 25 C39 18.9 43.9 14 50 14 Z";
      return <path d={d} fill={fg} />;
    }
    if (dot === "check") {
      // Soft-rounded check.  Drawn as a stroked path with end-caps.
      // Stroke is bumped to 8 so it still reads at 16×16 favicon size.
      return (
        <path
          d="M39 26 L47 34 L62 19"
          fill="none"
          stroke={fg}
          strokeWidth="8"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      );
    }
    return null;
  })();

  const r = 100 * radiusRatio;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      role="img"
      aria-label={title}
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect x="0" y="0" width="100" height="100" rx={r} ry={r} fill={bg} />
      <rect
        x={stem.x}
        y={stem.y}
        width={stem.w}
        height={stem.h}
        rx={stem.rx}
        ry={stem.rx}
        fill={fg}
      />
      {dotEl}
    </svg>
  );
}

/* --------------------- The horizontal lock-up --------------------- */
function LogoLockup({
  size = 56,
  dot = "check",
  variant = "color",       // applies to the mark
  textColor,               // overrides; default depends on variant
  showWord = true,
  gapRatio = 0.22,         // gap between mark and word as a fraction of size
  fontStyle = {},
}) {
  // Default text color matches a "dark on light" lock-up
  const defaultText =
    variant === "inverse" || variant === "mono-light" ? "#FFFFFF" : LOGO_INK;
  const color = textColor || defaultText;

  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: `${size * gapRatio}px`,
        lineHeight: 1,
      }}
    >
      <LogoMark size={size} dot={dot} variant={variant} />
      {showWord && (
        <span
          style={{
            fontFamily: "Onest, Inter, system-ui, sans-serif",
            fontWeight: 600,
            fontSize: size * 0.78,
            letterSpacing: "-0.02em",
            color,
            ...fontStyle,
          }}
        >
          Colleges
        </span>
      )}
    </div>
  );
}

/* Expose to other Babel scripts */
Object.assign(window, { LogoMark, LogoLockup, LOGO_TEAL, LOGO_INK });