/* global React */
// ─── Logo variants for Kaitlynn's Dog Walking ───
// Three wordmark options with a little paw/dog mark.

const LogoWordmarkPaw = ({ size = 1, color = "currentColor", accent }) => {
  const a = accent || "var(--c-primary)";
  return (
    <svg viewBox="0 0 320 80" style={{ height: 40 * size, width: "auto", display: "block" }} aria-label="Kaitlynn's Dog Walking">
      {/* paw mark */}
      <g transform="translate(8, 18)" fill={a}>
        <ellipse cx="20" cy="32" rx="14" ry="11" />
        <ellipse cx="8" cy="14" rx="5.5" ry="7.5" />
        <ellipse cx="20" cy="8" rx="5.5" ry="8" />
        <ellipse cx="32" cy="14" rx="5.5" ry="7.5" />
      </g>
      <text x="60" y="44" fontFamily="Caprasimo, serif" fontSize="32" fill={color}>Kaitlynn's</text>
      <text x="60" y="68" fontFamily="Nunito, sans-serif" fontWeight="800" fontSize="14" letterSpacing="0.18em" fill={color} opacity="0.7">DOG WALKING CO.</text>
    </svg>
  );
};

const LogoStackedBadge = ({ size = 1, color = "currentColor", accent }) => {
  const a = accent || "var(--c-primary)";
  return (
    <svg viewBox="0 0 220 80" style={{ height: 40 * size, width: "auto", display: "block" }} aria-label="Kaitlynn's Dog Walking">
      <g transform="translate(0, 6)">
        {/* small dog silhouette */}
        <g transform="translate(0, 12)" fill={a}>
          <path d="M2 32 C2 22, 12 16, 22 16 L30 16 L34 10 L40 16 L46 16 C56 16, 60 22, 60 30 L60 44 L52 44 L52 38 L18 38 L18 44 L10 44 Z" />
          <circle cx="50" cy="22" r="2" fill="white" />
        </g>
        <text x="72" y="32" fontFamily="Caprasimo, serif" fontSize="26" fill={color}>Kaitlynn's</text>
        <text x="72" y="56" fontFamily="Caveat, cursive" fontSize="22" fill={a}>dog walking</text>
      </g>
    </svg>
  );
};

const LogoMonogramKF = ({ size = 1, color = "currentColor", accent }) => {
  const a = accent || "var(--c-primary)";
  return (
    <svg viewBox="0 0 240 80" style={{ height: 40 * size, width: "auto", display: "block" }} aria-label="Kaitlynn's Dog Walking">
      {/* badge */}
      <g transform="translate(4, 4)">
        <rect x="0" y="0" width="72" height="72" rx="20" fill={a} />
        <text x="36" y="42" textAnchor="middle" fontFamily="Caprasimo, serif" fontSize="32" fill="white">KF</text>
        {/* tiny paw */}
        <g transform="translate(46, 46)" fill="white" opacity="0.9">
          <ellipse cx="6" cy="10" rx="5" ry="4" />
          <circle cx="1" cy="4" r="2" />
          <circle cx="6" cy="2" r="2" />
          <circle cx="11" cy="4" r="2" />
        </g>
      </g>
      <text x="92" y="34" fontFamily="Caprasimo, serif" fontSize="22" fill={color}>Kaitlynn's</text>
      <text x="92" y="58" fontFamily="Nunito, sans-serif" fontWeight="800" fontSize="12" letterSpacing="0.16em" fill={color} opacity="0.6">DOG WALKING · MAPLETON UT</text>
    </svg>
  );
};

// Simple paw icon (for decorations)
const PawIcon = ({ size = 32, color = "currentColor", style }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" style={style} fill={color}>
    <ellipse cx="20" cy="26" rx="11" ry="9" />
    <ellipse cx="9" cy="12" rx="4.5" ry="6" />
    <ellipse cx="20" cy="6" rx="4.5" ry="6" />
    <ellipse cx="31" cy="12" rx="4.5" ry="6" />
  </svg>
);

const LOGO_VARIANTS = {
  wordmark: { label: "Wordmark + paw", Comp: LogoWordmarkPaw },
  stacked: { label: "Pup + script", Comp: LogoStackedBadge },
  monogram: { label: "KF badge", Comp: LogoMonogramKF },
};

Object.assign(window, {
  LogoWordmarkPaw, LogoStackedBadge, LogoMonogramKF,
  PawIcon, LOGO_VARIANTS,
});