// Concept A — Cadence Pro (refined from v1)
// Asymmetric equalizer V — the shape of a real conversation flowing.
// Bars are no longer symmetric; they rise and fall like speech.

function CadenceProMark({ size = 160, color = '#0B0B0C', accent = '#2F6BFF', showAccent = false }) {
  // Asymmetric heights — one side falls, other rises, like a conversation turn.
  const heights = [0.88, 0.62, 0.38, 0.74, 1.00];
  const barW = 7;
  const gap = 9;
  const totalW = heights.length * barW + (heights.length - 1) * gap;
  const startX = (100 - totalW) / 2;
  const maxH = 78;
  const baseY = 90;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      {heights.map((h, i) => {
        const x = startX + i * (barW + gap);
        const barH = h * maxH;
        const y = baseY - barH;
        const isPeak = i === heights.length - 1;
        return (
          <rect key={i} x={x} y={y} width={barW} height={barH} rx={barW / 2}
            fill={isPeak && showAccent ? accent : color} />
        );
      })}
    </svg>
  );
}

function CadenceProWordmark({ size = 48, color = '#0B0B0C' }) {
  return (
    <div style={{ fontFamily: '"General Sans", "Inter", ui-sans-serif', fontWeight: 500,
      fontSize: size, color, letterSpacing: '-0.025em', lineHeight: 1 }}>Voxera</div>
  );
}

function CadenceProLockup({ markSize = 72, textSize = 44, color = '#0B0B0C', accent = '#2F6BFF', vertical = false, showAccent = false }) {
  if (vertical) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: markSize * 0.3 }}>
        <CadenceProMark size={markSize} color={color} accent={accent} showAccent={showAccent} />
        <CadenceProWordmark size={textSize} color={color} />
      </div>
    );
  }
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: markSize * 0.24 }}>
      <CadenceProMark size={markSize} color={color} accent={accent} showAccent={showAccent} />
      <CadenceProWordmark size={textSize} color={color} />
    </div>
  );
}

Object.assign(window, { CadenceProMark, CadenceProWordmark, CadenceProLockup });