// Twelve simple logo options for JGL
function Logo({ variant = "mono", small = false }) {
  const size = small ? 28 : 34;
  const stroke = small ? 1.4 : 1.6;

  switch (variant) {
    case "mono":
      return <span className="ed-logo-mono" aria-label="JGL">JGL</span>;

    case "serif":
      return <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: small ? 20 : 26, fontStyle: "italic", letterSpacing: "-0.02em", color: "var(--accent)", lineHeight: 1 }} aria-label="J·G·L">J·G·L</span>;

    case "crest":
      return (
        <svg width={size} height={size} viewBox="0 0 40 40" aria-label="JGL crest">
          <circle cx="20" cy="20" r="18" fill="none" stroke="currentColor" strokeWidth={stroke} />
          <circle cx="20" cy="20" r="14" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.5" />
          <text x="20" y="24" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fontWeight="600" letterSpacing="1.5" fill="currentColor">JGL</text>
        </svg>
      );

    case "stamp":
      return <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: size, height: size, background: "var(--accent)", color: "var(--accent-ink)", fontFamily: "'JetBrains Mono', monospace", fontSize: small ? 10 : 12, fontWeight: 600, letterSpacing: "0.12em" }} aria-label="JGL">JGL</span>;

    case "dot":
      return (
        <span style={{ fontFamily: "'Inter Tight', sans-serif", fontSize: small ? 18 : 22, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1, display: "inline-flex", alignItems: "baseline", gap: 2 }} aria-label="jgl">
          <span>jgl</span>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block", transform: "translateY(-1px)" }} />
        </span>
      );

    case "stacked":
      // Three stacked letters, tight monospace
      return (
        <span style={{ display: "inline-flex", flexDirection: "column", fontFamily: "'JetBrains Mono', monospace", fontSize: small ? 7 : 9, fontWeight: 700, letterSpacing: "0.15em", lineHeight: 1.05, padding: "3px 5px", border: "1px solid currentColor" }} aria-label="JGL">
          <span>J</span><span>G</span><span>L</span>
        </span>
      );

    case "bar":
      // Horizontal accent bar with name
      return (
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }} aria-label="JGL">
          <span style={{ width: 18, height: 2, background: "var(--accent)" }} />
          <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: small ? 11 : 13, fontWeight: 600, letterSpacing: "0.18em" }}>JGL</span>
        </span>
      );

    case "slash":
      // J/G/L with slash dividers
      return (
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: small ? 12 : 14, fontWeight: 500, letterSpacing: "0.08em" }} aria-label="J/G/L">
          <span>J</span><span style={{ color: "var(--accent)", margin: "0 2px" }}>/</span><span>G</span><span style={{ color: "var(--accent)", margin: "0 2px" }}>/</span><span>L</span>
        </span>
      );

    case "hex":
      // Hexagonal seal
      return (
        <svg width={size} height={size} viewBox="0 0 40 40" aria-label="JGL hex">
          <polygon points="20,3 35,12 35,28 20,37 5,28 5,12" fill="none" stroke="currentColor" strokeWidth={stroke} />
          <text x="20" y="24" textAnchor="middle" fontFamily="'JetBrains Mono', monospace" fontSize="10" fontWeight="600" letterSpacing="1" fill="currentColor">JGL</text>
        </svg>
      );

    case "line":
      // J·G·L with long underline - elegant editorial
      return (
        <span style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-start", gap: 2 }} aria-label="JGL">
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: small ? 16 : 20, fontStyle: "italic", letterSpacing: "0.1em", lineHeight: 1 }}>JGL</span>
          <span style={{ width: 22, height: 1, background: "var(--accent)" }} />
        </span>
      );

    case "ampersand":
      // J & L with centered G
      return (
        <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: small ? 22 : 28, fontStyle: "italic", letterSpacing: "-0.02em", lineHeight: 1, display: "inline-flex", alignItems: "baseline", gap: 1 }} aria-label="John G Lesley">
          <span>J</span>
          <span style={{ color: "var(--accent)", fontSize: "0.7em", transform: "translateY(-0.1em)", display: "inline-block" }}>g</span>
          <span>L</span>
        </span>
      );

    case "numeric":
      // Case-file style — LESLEY / JGL-001
      return (
        <span style={{ display: "inline-flex", flexDirection: "column", alignItems: "flex-start", lineHeight: 1.1, fontFamily: "'JetBrains Mono', monospace" }} aria-label="JGL">
          <span style={{ fontSize: small ? 8 : 9, letterSpacing: "0.2em", color: "var(--ink-3)" }}>FILE №</span>
          <span style={{ fontSize: small ? 11 : 13, letterSpacing: "0.1em", fontWeight: 600 }}>JGL<span style={{ color: "var(--accent)" }}>-01</span></span>
        </span>
      );

    case "target":
      // Target / crosshair — thriller-appropriate
      return (
        <svg width={size} height={size} viewBox="0 0 40 40" aria-label="JGL target">
          <circle cx="20" cy="20" r="16" fill="none" stroke="currentColor" strokeWidth={stroke} />
          <circle cx="20" cy="20" r="9" fill="none" stroke="currentColor" strokeWidth={stroke * 0.7} opacity="0.6" />
          <circle cx="20" cy="20" r="2.5" fill="var(--accent)" />
          <line x1="20" y1="0" x2="20" y2="6" stroke="currentColor" strokeWidth={stroke} />
          <line x1="20" y1="34" x2="20" y2="40" stroke="currentColor" strokeWidth={stroke} />
          <line x1="0" y1="20" x2="6" y2="20" stroke="currentColor" strokeWidth={stroke} />
          <line x1="34" y1="20" x2="40" y2="20" stroke="currentColor" strokeWidth={stroke} />
        </svg>
      );

    default:
      return <span className="ed-logo-mono">JGL</span>;
  }
}

window.Logo = Logo;
