/* listgetbuy — logo marks & wordmark. Simple geometry only. */

/* ── ICON A · descending bars (recommended) ─────────────────
   Three rounded bars, decreasing width, left-aligned → reads as
   list rows AND a falling price (eksiltme). */
function Mark({ size = 120, ios = false, shadow = false, bg = 'var(--green)', bar = '#fff' }) {
  const r = ios ? size * 0.225 : size * 0.26;
  const barH = size * 0.118;
  const gap = size * 0.105;
  const widths = [0.56, 0.40, 0.24]; // of full size
  return (
    <div style={{
      width: size, height: size, borderRadius: r, background: bg,
      display: 'flex', flexDirection: 'column', justifyContent: 'center',
      paddingLeft: size * 0.22, gap,
      boxShadow: shadow ? '0 12px 28px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.06)' : 'none',
    }}>
      {widths.map((w, i) => (
        <div key={i} style={{ width: size * w, height: barH, borderRadius: 999, background: bar,
          opacity: i === 2 ? 1 : 1 - i * 0.0 }} />
      ))}
    </div>
  );
}

/* ── ICON B · down staircase ─────────────────────────────── */
function MarkStair({ size = 120, bg = 'var(--green)', bar = '#fff' }) {
  const r = size * 0.26;
  const cell = size * 0.16;
  const step = size * 0.2;
  const startX = size * 0.24;
  const topY = size * 0.26;
  return (
    <div style={{ width: size, height: size, borderRadius: r, background: bg, position: 'relative' }}>
      {[0, 1, 2].map((i) => (
        <div key={i} style={{ position: 'absolute', width: cell, height: cell, borderRadius: cell * 0.32,
          background: bar, left: startX + i * step, top: topY + i * step }} />
      ))}
    </div>
  );
}

/* ── ICON C · tag + down arrow ───────────────────────────── */
function MarkTag({ size = 120, bg = 'var(--green)', bar = '#fff' }) {
  const r = size * 0.26;
  const stem = size * 0.1;
  const head = size * 0.26;
  return (
    <div style={{ width: size, height: size, borderRadius: r, background: bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ position: 'relative', width: size * 0.5, height: size * 0.5 }}>
        {/* stem */}
        <div style={{ position: 'absolute', left: '50%', top: 0, transform: 'translateX(-50%)',
          width: stem, height: size * 0.4, borderRadius: 999, background: bar }} />
        {/* arrow head — two rounded bars */}
        <div style={{ position: 'absolute', left: '50%', bottom: 2, transform: 'translateX(-50%) rotate(45deg)', transformOrigin: 'center',
          width: head, height: stem, borderRadius: 999, background: bar, marginLeft: -head * 0.25 }} />
        <div style={{ position: 'absolute', left: '50%', bottom: 2, transform: 'translateX(-50%) rotate(-45deg)', transformOrigin: 'center',
          width: head, height: stem, borderRadius: 999, background: bar, marginLeft: head * 0.25 }} />
      </div>
    </div>
  );
}

/* ── WORDMARK ────────────────────────────────────────────── */
function Wordmark({ size = 40, mono = false, dark = false, onGreen = false }) {
  let c1 = 'var(--ink)', c2 = 'var(--ink-2)', c3 = 'var(--green)';
  if (mono) { c1 = c2 = c3 = 'var(--ink)'; }
  if (dark) { c1 = '#fff'; c2 = 'rgba(255,255,255,0.62)'; c3 = 'oklch(0.78 0.13 158)'; }
  if (onGreen) { c1 = c2 = c3 = '#fff'; }
  const base = { fontWeight: 800, fontSize: size, letterSpacing: '-0.045em', lineHeight: 1 };
  return (
    <div style={{ display: 'inline-flex', alignItems: 'baseline' }}>
      <span style={{ ...base, color: c1 }}>list</span>
      <span style={{ ...base, color: c2 }}>get</span>
      <span style={{ ...base, color: c3 }}>buy</span>
      <span style={{ ...base, color: c3 }}>.</span>
    </div>
  );
}

/* ── LOCKUP ──────────────────────────────────────────────── */
function Lockup({ size = 56, dark = false, onGreen = false }) {
  let markBg = 'var(--green)', markBar = '#fff';
  if (dark) { markBg = 'var(--green)'; markBar = '#fff'; }
  if (onGreen) { markBg = '#fff'; markBar = 'var(--green)'; }
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.34 }}>
      <Mark size={size} bg={markBg} bar={markBar} />
      <Wordmark size={size * 0.66} dark={dark} onGreen={onGreen} />
    </div>
  );
}

Object.assign(window, { Mark, MarkStair, MarkTag, Wordmark, Lockup });