/* Bevillingen.no — themed iconography for alcohol-licensing exams.
   Drawn at a 100x100 viewBox, sized via `size` prop. Use brand tokens for color. */

const Glyph = {};

/* Stemmed wine glass (signature mark). Optional `fill` 0..1 sets liquid height. */
Glyph.Glass = function ({ size = 64, fill = 0.55, color = "var(--accent)" }) {
  const s = size;
  const liquidY = 30 + (52 - 30) * (1 - fill); // top of liquid; full at y=30
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Glass">
      {/* bowl outline */}
      <path d="M28 14 L72 14 C72 36 64 52 50 54 C36 52 28 36 28 14 Z"
            fill="#fff" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      {/* liquid */}
      <clipPath id={`glassClip-${Math.round(fill*100)}-${size}`}>
        <path d="M30 16 L70 16 C70 36 63 50 50 52 C37 50 30 36 30 16 Z" />
      </clipPath>
      <rect x="28" y={liquidY} width="44" height="40"
            fill={color}
            clipPath={`url(#glassClip-${Math.round(fill*100)}-${size})`} />
      {/* stem */}
      <rect x="48" y="54" width="4" height="24" fill="var(--ink)" />
      {/* base */}
      <rect x="34" y="80" width="32" height="4" rx="2" fill="var(--ink)" />
    </svg>
  );
};

/* Beer mug — for skjenke/etablerer */
Glyph.BeerMug = function ({ size = 64, color = "var(--signal)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Beer mug">
      {/* handle */}
      <path d="M68 32 C84 32 84 64 68 64" fill="none" stroke="var(--ink)" strokeWidth="6" />
      {/* mug body */}
      <rect x="22" y="28" width="46" height="56" rx="4" fill="#fff" stroke="var(--ink)" strokeWidth="4" />
      {/* beer fill */}
      <rect x="26" y="40" width="38" height="40" fill={color} />
      {/* foam */}
      <path d="M22 28 C28 22 36 22 40 26 C46 20 56 22 58 28 C64 22 70 26 68 32 L22 32 Z"
            fill="#fff" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
    </svg>
  );
};

/* Wine bottle silhouette (for salg/skjenke) */
Glyph.Bottle = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Bottle">
      <path d="M42 8 L58 8 L58 24 C58 30 64 32 64 40 L64 88 C64 92 60 94 56 94 L44 94 C40 94 36 92 36 88 L36 40 C36 32 42 30 42 24 Z"
            fill={color} stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      {/* cork */}
      <rect x="42" y="4" width="16" height="8" rx="1" fill="var(--ink)" />
      {/* label */}
      <rect x="38" y="56" width="24" height="22" fill="#fff" stroke="var(--ink)" strokeWidth="2" />
      <line x1="42" y1="63" x2="58" y2="63" stroke="var(--ink)" strokeWidth="1.5" />
      <line x1="42" y1="68" x2="54" y2="68" stroke="var(--ink)" strokeWidth="1.5" />
    </svg>
  );
};

/* Storefront — for Salgsbevilling */
Glyph.Storefront = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Storefront">
      {/* awning */}
      <path d="M10 22 L90 22 L86 38 L14 38 Z" fill={color} stroke="var(--ink)" strokeWidth="3" strokeLinejoin="round" />
      <line x1="30" y1="22" x2="26" y2="38" stroke="var(--ink)" strokeWidth="2" />
      <line x1="50" y1="22" x2="50" y2="38" stroke="var(--ink)" strokeWidth="2" />
      <line x1="70" y1="22" x2="74" y2="38" stroke="var(--ink)" strokeWidth="2" />
      {/* body */}
      <rect x="14" y="38" width="72" height="50" fill="#fff" stroke="var(--ink)" strokeWidth="3" />
      {/* door */}
      <rect x="42" y="56" width="16" height="32" fill="var(--ink)" />
      <circle cx="54" cy="72" r="1.5" fill={color} />
      {/* window left */}
      <rect x="22" y="46" width="14" height="14" fill={color} opacity="0.25" stroke="var(--ink)" strokeWidth="2" />
      {/* window right */}
      <rect x="64" y="46" width="14" height="14" fill={color} opacity="0.25" stroke="var(--ink)" strokeWidth="2" />
    </svg>
  );
};

/* Serving tray with dome — for Etablererprøven (restaurant) */
Glyph.Tray = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Serving tray">
      {/* dome handle */}
      <circle cx="50" cy="22" r="3.5" fill="var(--ink)" />
      <rect x="48" y="24" width="4" height="6" fill="var(--ink)" />
      {/* dome */}
      <path d="M14 66 C14 40 32 30 50 30 C68 30 86 40 86 66 Z"
            fill={color} stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      {/* steam line */}
      <path d="M40 50 C42 46 44 46 42 42" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.6" />
      <path d="M58 50 C60 46 62 46 60 42" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.6" />
      {/* tray plate */}
      <rect x="8" y="66" width="84" height="8" rx="2" fill="#fff" stroke="var(--ink)" strokeWidth="3" />
      <rect x="14" y="74" width="72" height="4" rx="1" fill="var(--ink)" opacity="0.15" />
    </svg>
  );
};

/* Coffee/cup — for Etablerer (non-alcoholic serving) */
Glyph.Cup = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Cup">
      <path d="M68 38 C82 38 82 62 68 62" fill="none" stroke="var(--ink)" strokeWidth="5" />
      <path d="M20 32 L68 32 L66 76 C65 84 60 88 54 88 L34 88 C28 88 23 84 22 76 Z"
            fill="#fff" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      <path d="M24 40 L64 40 L62 72 C61 78 58 80 54 80 L34 80 C30 80 27 78 26 72 Z" fill={color} />
      {/* steam */}
      <path d="M36 24 C38 18 34 14 36 8" stroke="var(--ink)" strokeWidth="3" fill="none" strokeLinecap="round" />
      <path d="M50 24 C52 18 48 14 50 8" stroke="var(--ink)" strokeWidth="3" fill="none" strokeLinecap="round" />
    </svg>
  );
};

/* Age badge — circular, big number (18 or 20) */
Glyph.Age = function ({ size = 64, value = 18 }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label={`Aldersgrense ${value}`}>
      <circle cx="50" cy="50" r="46" fill="#fff" stroke="#C2362B" strokeWidth="8" />
      <text x="50" y="62" textAnchor="middle" fontSize="36" fontWeight="800" fontFamily="var(--font-sans)" fill="var(--ink)">{value}</text>
      <text x="50" y="78" textAnchor="middle" fontSize="9" fontWeight="700" fontFamily="var(--font-mono)" fill="#C2362B" letterSpacing="1">ÅR</text>
    </svg>
  );
};

/* Clock — for opening hours / skjenketid */
Glyph.Clock = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Clock">
      <circle cx="50" cy="50" r="42" fill="#fff" stroke="var(--ink)" strokeWidth="5" />
      <circle cx="50" cy="50" r="34" fill={color} opacity="0.12" />
      {/* tick marks */}
      <g stroke="var(--ink)" strokeWidth="3" strokeLinecap="round">
        <line x1="50" y1="14" x2="50" y2="20" />
        <line x1="50" y1="80" x2="50" y2="86" />
        <line x1="14" y1="50" x2="20" y2="50" />
        <line x1="80" y1="50" x2="86" y2="50" />
      </g>
      {/* hands: pointing 3:00 (15:00) — opening hour cue */}
      <line x1="50" y1="50" x2="50" y2="28" stroke="var(--ink)" strokeWidth="4" strokeLinecap="round" />
      <line x1="50" y1="50" x2="72" y2="50" stroke={color} strokeWidth="4" strokeLinecap="round" />
      <circle cx="50" cy="50" r="3.5" fill="var(--ink)" />
    </svg>
  );
};

/* Godkjent stamp — circular with checkmark */
Glyph.Stamp = function ({ size = 64, color = "var(--good)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Godkjent">
      <circle cx="50" cy="50" r="44" fill="none" stroke={color} strokeWidth="5" strokeDasharray="4 4" />
      <circle cx="50" cy="50" r="34" fill={color} />
      <path d="M34 50 L46 62 L68 38" stroke="#fff" strokeWidth="6" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

/* Document/certificate */
Glyph.Document = function ({ size = 64, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Document">
      <path d="M22 8 L62 8 L82 28 L82 92 L22 92 Z"
            fill="#fff" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      <path d="M62 8 L62 28 L82 28" fill="none" stroke="var(--ink)" strokeWidth="4" strokeLinejoin="round" />
      <line x1="32" y1="44" x2="72" y2="44" stroke="var(--ink)" strokeWidth="3" />
      <line x1="32" y1="54" x2="72" y2="54" stroke="var(--ink)" strokeWidth="3" />
      <line x1="32" y1="64" x2="60" y2="64" stroke="var(--ink)" strokeWidth="3" />
      <rect x="32" y="74" width="22" height="10" rx="2" fill={color} />
    </svg>
  );
};

/* No-serve — crossed-out glass (for "ikke skjenk over promillegrense") */
Glyph.NoServe = function ({ size = 64 }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="No serve">
      <circle cx="50" cy="50" r="44" fill="#fff" stroke="#C2362B" strokeWidth="8" />
      <g opacity="0.7">
        <path d="M38 28 L62 28 C62 44 56 54 50 56 C44 54 38 44 38 28 Z" fill="#888" />
        <rect x="49" y="56" width="2" height="14" fill="#888" />
        <rect x="42" y="70" width="16" height="2" fill="#888" />
      </g>
      <line x1="20" y1="20" x2="80" y2="80" stroke="#C2362B" strokeWidth="8" strokeLinecap="round" />
    </svg>
  );
};

/* Vinmonopolet-style monopoly mark (single bottle in circle) */
Glyph.Pol = function ({ size = 64, color = "#1A5A4F" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 100 100" role="img" aria-label="Monopol">
      <circle cx="50" cy="50" r="44" fill={color} />
      <g transform="translate(50 50)" fill="#fff">
        <rect x="-4" y="-22" width="8" height="6" />
        <path d="M-7 -16 L7 -16 L7 -10 C10 -8 10 -4 10 0 L10 18 C10 21 7 22 4 22 L-4 22 C-7 22 -10 21 -10 18 L-10 0 C-10 -4 -10 -8 -7 -10 Z" />
      </g>
    </svg>
  );
};

/* Glyph.Cert (fake bevillingsbevis-dokument) ble fjernet 2026-07-14:
   falske dokument-ID-er med ekte kommunenavn skal ikke kunne rendres. */

/* Pour drop — small accent shape (for streak/score cards) */
Glyph.Drop = function ({ size = 24, color = "var(--accent)" }) {
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2 C12 2 4 12 4 16 a8 8 0 0 0 16 0 C20 12 12 2 12 2 Z" fill={color} />
    </svg>
  );
};

window.Glyph = Glyph;
