// ─────────────────────────────────────────────────────────────
// GITWRAP — logo explorations. Each mark is crisp vector, built
// from the brand atom: the GitHub contribution cell + a "wrap".
// All marks render in a 0..96 user space; scale via width/height.
// ─────────────────────────────────────────────────────────────

const G = {
  bg:      '#090c10',
  surface: '#0d1117',
  border:  '#21262d',
  green:   '#3fb950',
  l1:      '#0e4429',
  l2:      '#196c2e',
  l3:      '#2ea043',
  l4:      '#39d353',
  white:   '#f0f6fc',
  muted:   '#8b949e',
};

// ── A · THE WRAP CELL ──────────────────────────────────────────
// One contribution cell with its top-right corner peeled back.
// git (the cell) + wrap (the fold). The brand reduced to one atom.
function MarkWrapCell({ s = 96 }) {
  const F = 40; // fold size
  const body = `M0,22 Q0,0 22,0 H${96 - F} L96,${F} V74 Q96,96 74,96 H22 Q0,96 0,74 Z`;
  // underside flap (folded paper)
  const flap = `M${96 - F},0 L96,${F} L${96 - F},${F} Z`;
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      <defs>
        <linearGradient id="wc-body" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={G.l4} />
          <stop offset="100%" stopColor={G.l3} />
        </linearGradient>
        <linearGradient id="wc-flap" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={G.l1} />
          <stop offset="100%" stopColor="#072a18" />
        </linearGradient>
      </defs>
      <path d={body} fill="url(#wc-body)" />
      <path d={flap} fill="url(#wc-flap)" />
      {/* crease highlight along the diagonal */}
      <line x1={96 - F} y1="0" x2="96" y2={F} stroke={G.l4} strokeWidth="1.5" strokeOpacity="0.55" />
    </svg>
  );
}

// ── B · THE FOLD (wrapped card w/ contribution grid) ───────────
// A card whose surface is a contribution heatmap, top-right dog-eared.
function MarkFoldGrid({ s = 96 }) {
  const F = 30;
  const body = `M0,16 Q0,0 16,0 H${96 - F} L96,${F} V80 Q96,96 80,96 H16 Q0,96 0,80 Z`;
  const flap = `M${96 - F},0 L96,${F} L${96 - F},${F} Z`;
  // 5×5 heat pattern (0..4)
  const heat = [
    [2, 1, 3, 0, 0],
    [1, 3, 4, 2, 1],
    [3, 4, 2, 3, 4],
    [2, 3, 4, 1, 2],
    [4, 2, 1, 3, 3],
  ];
  const ramp = ['#0f2a1c', G.l1, G.l2, G.l3, G.l4];
  const cs = 13, gap = 3.4, off = 9;
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      <clipPath id="fg-clip"><path d={body} /></clipPath>
      <g clipPath="url(#fg-clip)">
        <rect x="0" y="0" width="96" height="96" fill={G.surface} />
        {heat.flatMap((row, r) =>
          row.map((v, c) => (
            <rect key={`${r}-${c}`} x={off + c * (cs + gap)} y={off + r * (cs + gap)}
              width={cs} height={cs} rx="2.6" fill={ramp[v]} />
          ))
        )}
      </g>
      <path d={body} fill="none" stroke={G.border} strokeWidth="1.5" />
      <path d={flap} fill={G.bg} />
      <line x1={96 - F} y1="0" x2="96" y2={F} stroke={G.l3} strokeWidth="1.5" />
    </svg>
  );
}

// ── C · THE RETURN (wrap glyph from cells) ─────────────────────
// The text-wrap / carriage-return arrow ↵ built from contribution
// cells. "wrap" as in line-wrap — a coder's double meaning.
function MarkReturn({ s = 96 }) {
  const c = 16, g = 4; // cell + gap → pitch 20
  const P = (col, row) => [8 + col * (c + g), 8 + row * (c + g)];
  // a carriage-return ↵ : stem drops on the right, turns left, arrowhead at left
  const cells = [
    // vertical stem (right), dimmer so the arrow leads
    [3, 0, G.l2], [3, 1, G.l2],
    // elbow + horizontal bar travelling left
    [3, 2, G.l3], [2, 2, G.l3], [1, 2, G.l4],
    // arrowhead chevron pointing left (brightest)
    [0, 2, G.l4], [1, 1, G.green], [1, 3, G.green],
  ];
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      {cells.map(([col, row, fill], i) => {
        const [x, y] = P(col, row);
        return <rect key={i} x={x} y={y} width={c} height={c} rx="3" fill={fill} />;
      })}
    </svg>
  );
}

// ── D · PIXEL G (monogram from the heatmap) ────────────────────
// A capital G rendered in contribution cells.
function MarkPixelG({ s = 96 }) {
  // 5×5 bitmap of a G, value = green level
  const bmp = [
    [0, 1, 1, 1, 0],
    [1, 0, 0, 0, 0],
    [1, 0, 1, 1, 1],
    [1, 0, 0, 0, 1],
    [0, 1, 1, 1, 0],
  ];
  const lvl = [
    [0, 3, 4, 3, 0],
    [3, 0, 0, 0, 0],
    [4, 0, 2, 3, 4],
    [3, 0, 0, 0, 3],
    [0, 4, 3, 4, 0],
  ];
  const ramp = [null, G.l2, G.l2, G.l3, G.l4];
  const c = 14, g = 4, off = 9;
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      {bmp.flatMap((row, r) =>
        row.map((on, col) => on
          ? <rect key={`${r}-${col}`} x={off + col * (c + g)} y={off + r * (c + g)}
              width={c} height={c} rx="3" fill={ramp[lvl[r][col]] || G.l3} />
          : null)
      )}
    </svg>
  );
}

// ── E · THE RIBBON (contribution row tied into a bow) ──────────
// A horizontal strip of cells that loops into a gift bow.
function MarkRibbon({ s = 96 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      <defs>
        <linearGradient id="rb" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor={G.l4} />
          <stop offset="100%" stopColor={G.l2} />
        </linearGradient>
      </defs>
      {/* left loop */}
      <path d="M48 48 C 24 30, 8 34, 14 48 C 8 62, 24 66, 48 48 Z" fill="url(#rb)" />
      {/* right loop */}
      <path d="M48 48 C 72 30, 88 34, 82 48 C 88 62, 72 66, 48 48 Z" fill="url(#rb)" />
      {/* trailing ribbon tails */}
      <path d="M44 54 L36 78 L44 74 Z" fill={G.l2} />
      <path d="M52 54 L60 78 L52 74 Z" fill={G.l2} />
      {/* knot — the brand cell */}
      <rect x="40" y="40" width="16" height="16" rx="4" fill={G.green} />
    </svg>
  );
}

// ── F · BLOCK CURSOR (terminal) ────────────────────────────────
// A bracketed block cursor — the wordmark's natural companion.
function MarkCursor({ s = 96 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 96 96" fill="none">
      {/* brackets */}
      <path d="M30 16 H16 V80 H30" stroke={G.muted} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <path d="M66 16 H80 V80 H66" stroke={G.muted} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      {/* blinking block */}
      <rect x="40" y="32" width="16" height="32" rx="3" fill={G.green} />
    </svg>
  );
}

Object.assign(window, {
  G, MarkWrapCell, MarkFoldGrid, MarkReturn, MarkPixelG, MarkRibbon, MarkCursor,
});