// Four logo directions for In Turn.
// Each accepts { size, ink, accent } props; the host App uses them on the
// nav, footer, and brand showcase. All are SVG-based, no raster assets.

function LogoEditorial({ size = 36, ink = "#1A1410", accent = "#D85F2D" }) {
  // Direction 1 — wordmark with serif italic accent on "turn"
  // Says: editorial, sophisticated, quiet
  return (
    <svg
      viewBox="0 0 240 56"
      style={{ height: size, width: "auto", display: "block" }}
      aria-label="In Turn"
    >
      <text
        x="0"
        y="42"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="500"
        fontSize="44"
        letterSpacing="-0.03em"
        fill={ink}
      >
        in
      </text>
      <text
        x="56"
        y="42"
        fontFamily="'Instrument Serif', Georgia, serif"
        fontStyle="italic"
        fontSize="48"
        letterSpacing="-0.02em"
        fill={ink}
      >
        turn
      </text>
      <circle cx="200" cy="40" r="5" fill={accent} />
    </svg>
  );
}

function LogoRotate({ size = 36, ink = "#1A1410", accent = "#D85F2D" }) {
  // Direction 2 — rotational mark between "in" and "turn"
  // Says: kinetic, playful, your-turn-now
  return (
    <svg
      viewBox="0 0 260 56"
      style={{ height: size, width: "auto", display: "block" }}
      aria-label="In Turn"
    >
      <text
        x="0"
        y="42"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="600"
        fontSize="44"
        letterSpacing="-0.03em"
        fill={ink}
      >
        in
      </text>
      <g transform="translate(74 28)">
        <circle r="18" fill="none" stroke={accent} strokeWidth="3" />
        <path
          d="M 0 -18 L 6 -12 L -6 -12 Z"
          fill={accent}
          transform="rotate(135)"
        />
      </g>
      <text
        x="104"
        y="42"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="600"
        fontSize="44"
        letterSpacing="-0.03em"
        fill={ink}
      >
        turn
      </text>
    </svg>
  );
}

function LogoStack({ size = 36, ink = "#1A1410", accent = "#D85F2D" }) {
  // Direction 3 — stacked block monogram with rule
  // Says: bold, editorial masthead, magazine-y
  const w = (size / 56) * 130;
  return (
    <svg
      viewBox="0 0 130 56"
      style={{ height: size, width: w, display: "block" }}
      aria-label="In Turn"
    >
      <text
        x="0"
        y="24"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="700"
        fontSize="22"
        letterSpacing="-0.02em"
        fill={ink}
      >
        IN
      </text>
      <line
        x1="0"
        y1="30"
        x2="64"
        y2="30"
        stroke={accent}
        strokeWidth="2"
      />
      <text
        x="0"
        y="50"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="700"
        fontSize="22"
        letterSpacing="-0.02em"
        fill={ink}
      >
        TURN
      </text>
    </svg>
  );
}

function LogoToken({ size = 36, ink = "#1A1410", accent = "#D85F2D" }) {
  // Direction 4 — token mark + wordmark, the iT badge
  // Says: app-ready, friendly, modern
  return (
    <svg
      viewBox="0 0 240 56"
      style={{ height: size, width: "auto", display: "block" }}
      aria-label="In Turn"
    >
      <rect x="0" y="6" width="44" height="44" rx="11" fill={ink} />
      <text
        x="22"
        y="38"
        textAnchor="middle"
        fontFamily="'Instrument Serif', Georgia, serif"
        fontStyle="italic"
        fontSize="30"
        fill={accent}
      >
        iT
      </text>
      <text
        x="56"
        y="40"
        fontFamily="Geist, ui-sans-serif, system-ui"
        fontWeight="500"
        fontSize="36"
        letterSpacing="-0.03em"
        fill={ink}
      >
        In Turn
      </text>
    </svg>
  );
}

// Map id -> component for the host to pick from.
window.IN_TURN_LOGOS = {
  editorial: { id: "editorial", name: "Editorial", Component: LogoEditorial },
  rotate:    { id: "rotate",    name: "Rotational", Component: LogoRotate },
  stack:     { id: "stack",     name: "Stacked",    Component: LogoStack },
  token:     { id: "token",     name: "Token mark", Component: LogoToken },
};

Object.assign(window, {
  LogoEditorial, LogoRotate, LogoStack, LogoToken,
});