// Mark D · Speech Frame — refinement set.
// 8 variants explore tail position, aperture treatment, and fill vs. outline.
// All built with primitives (rect + circle + rotated rect).

// Shared chrome: a chat-tail (rotated square) that sits BEHIND the frame.
// `pos` = which corner / side the tail anchors to.
function Tail({ pos = 'br', fg = '#15151A', size = 16 }) {
  // Position the tail center; rotation 45° makes it a diamond/chat tail.
  const cfg = {
    br: { x: 70, y: 70 },
    bl: { x: 30, y: 70 },
    tr: { x: 74, y: 24 },
    tl: { x: 26, y: 24 },
  }[pos];
  return (
    <rect
      x={cfg.x - size / 2}
      y={cfg.y - size / 2}
      width={size}
      height={size}
      rx="3"
      fill={fg}
      transform={`rotate(45 ${cfg.x} ${cfg.y})`}
    />
  );
}

// D1 · Baseline — filled frame, tail BR, paper aperture with coral center
function MarkD1({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="16" fill={paper} />
      <circle cx="50" cy="46" r="7" fill={accent} />
    </svg>
  );
}

// D2 · Crowd inside — aperture contains a small cluster (3 dots).
// Strongest concept: literally shows "the crowd inside the snap".
function MarkD2({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="18" fill={paper} />
      {/* three crowd dots inside */}
      <circle cx="44" cy="46" r="4.2" fill={fg} />
      <circle cx="56" cy="46" r="4.2" fill={fg} />
      <circle cx="50" cy="38" r="4.2" fill={accent} />
    </svg>
  );
}

// D3 · Outline — frame as outlined squircle, coral aperture
function MarkD3({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={paper} stroke={fg} strokeWidth="6" />
      <circle cx="50" cy="46" r="11" fill={accent} />
    </svg>
  );
}

// D4 · Bottom-left tail — mirrored, reads as "outgoing" message
function MarkD4({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="bl" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="16" fill={paper} />
      <circle cx="50" cy="46" r="7" fill={accent} />
    </svg>
  );
}

// D5 · Coral dot only — most reductive, scales smallest
function MarkD5({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="13" fill={accent} />
    </svg>
  );
}

// D6 · Stacked frames — combines D + Frame Stack (two filled rects, slight offset)
function MarkD6({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} size={14} />
      <rect x="22" y="10" width="64" height="58" rx="12" fill={fg} opacity="0.25" transform="rotate(-6 54 39)" />
      <rect x="14" y="18" width="72" height="58" rx="13" fill={fg} />
      <circle cx="50" cy="47" r="14" fill={paper} />
      <circle cx="50" cy="47" r="6" fill={accent} />
    </svg>
  );
}

// D7 · Top-right tail (notification-style)
function MarkD7({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="tr" fg={fg} size={14} />
      <rect x="14" y="20" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="52" r="16" fill={paper} />
      <circle cx="50" cy="52" r="7" fill={accent} />
    </svg>
  );
}

// D8 · Live-pulse — coral dot offset top-right (like a notification badge)
//   Center is a paper aperture, accent dot is OUTSIDE: live indicator.
function MarkD8({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB' }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <Tail pos="br" fg={fg} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="14" fill={paper} />
      <circle cx="82" cy="14" r="9" fill={accent} stroke={paper} strokeWidth="3" />
    </svg>
  );
}

// HERO — chosen for the system. D2 (Crowd Inside) with refined proportions.
// All system pieces below should call this.
function MarkDHero({ size = 140, fg = '#15151A', accent = '#FF6A52', paper = '#F6F2EB', live = false }) {
  return (
    <svg viewBox="0 0 100 100" width={size} height={size} aria-label="CrowdSnap">
      <Tail pos="br" fg={fg} size={15} />
      <rect x="14" y="14" width="72" height="64" rx="14" fill={fg} />
      <circle cx="50" cy="46" r="18" fill={paper} />
      <circle cx="44" cy="46" r="4.2" fill={fg} />
      <circle cx="56" cy="46" r="4.2" fill={fg} />
      <circle cx="50" cy="38" r="4.2" fill={accent} />
      {live && (
        <circle cx="50" cy="38" r="4.2" fill={accent}>
          <animate attributeName="r" values="4.2;7;4.2" dur="1.4s" repeatCount="indefinite" />
          <animate attributeName="opacity" values="1;0.4;1" dur="1.4s" repeatCount="indefinite" />
        </circle>
      )}
    </svg>
  );
}

// SnapCrew — wordmark logo, using the official PNG asset. `size` is the
// rendered height in px; width auto-scales by the image's aspect ratio.
// `fg` controls coloring: dark text (default) stays black; pass a light
// color like T.paper to invert the PNG so it shows white on dark
// backgrounds. `live` adds a glowing accent dot to the right.
function SnapCrewLogo({ size = 32, fg = '#15151A', accent = '#FF6A52', live = false }) {
  // Cheap brightness check on the red channel of the hex color: anything
  // brighter than mid-gray (e.g. T.paper #F6F2EB) triggers PNG inversion.
  const r = parseInt((fg.replace('#', '') + '00').slice(0, 2), 16);
  const isLight = r >= 128;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: Math.round(size * 0.35), lineHeight: 0 }} aria-label="snap crew">
      <img src="snapcrew-logo.png" alt="snap crew"
        style={{ display: 'block', height: size, width: 'auto', filter: isLight ? 'invert(1)' : 'none' }} />
      {live && (
        <span style={{
          width: Math.round(size * 0.22), height: Math.round(size * 0.22),
          borderRadius: '50%', background: accent,
          boxShadow: `0 0 ${Math.round(size * 0.5)}px ${accent}`,
          animation: 'snapcrew-pulse 1.4s ease-in-out infinite',
        }}></span>
      )}
    </span>
  );
}

Object.assign(window, {
  MarkD1, MarkD2, MarkD3, MarkD4, MarkD5, MarkD6, MarkD7, MarkD8,
  MarkDHero, SnapCrewLogo,
});