// Waveform.jsx — small live audio bar animation used inside creator cards
// and the hero "live" indicator. Pure CSS keyframes, no JS timers.

if (typeof document !== 'undefined' && !document.getElementById('waveform-styles')) {
  const s = document.createElement('style');
  s.id = 'waveform-styles';
  s.textContent = `
    .wf {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      height: 14px;
    }
    .wf > span {
      display: block;
      width: 2px;
      background: currentColor;
      border-radius: 2px;
      animation: wf-bounce 1.1s ease-in-out infinite;
      transform-origin: center;
    }
    .wf > span:nth-child(1) { animation-delay: -0.9s; }
    .wf > span:nth-child(2) { animation-delay: -0.7s; }
    .wf > span:nth-child(3) { animation-delay: -0.5s; }
    .wf > span:nth-child(4) { animation-delay: -0.3s; }
    .wf > span:nth-child(5) { animation-delay: -0.1s; }
    .wf > span:nth-child(6) { animation-delay: -0.6s; }
    .wf > span:nth-child(7) { animation-delay: -0.2s; }
    @keyframes wf-bounce {
      0%, 100% { height: 20%; opacity: 0.5; }
      50%      { height: 100%; opacity: 1; }
    }
    .wf.paused > span { animation-play-state: paused; }

    /* Pulsing dot for "live now" presence */
    .pulse-dot {
      position: relative;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: oklch(0.78 0.16 145);
      flex-shrink: 0;
    }
    .pulse-dot::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      background: oklch(0.78 0.16 145 / 0.5);
      animation: pulse-ring 1.8s ease-out infinite;
    }
    @keyframes pulse-ring {
      0%   { transform: scale(0.6); opacity: 0.7; }
      100% { transform: scale(2.2); opacity: 0; }
    }

    /* Concentric voice ripples around the hero presence orb */
    .ripple-stack {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .ripple-stack > span {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid oklch(0.72 0.13 285 / 0.35);
      animation: ripple-out 3.4s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
    }
    .ripple-stack > span:nth-child(2) { animation-delay: 1.1s; }
    .ripple-stack > span:nth-child(3) { animation-delay: 2.2s; }
    @keyframes ripple-out {
      0%   { transform: scale(0.5); opacity: 0; }
      15%  { opacity: 1; }
      100% { transform: scale(2.4); opacity: 0; }
    }
  `;
  document.head.appendChild(s);
}

function Waveform({ bars = 7, color, height = 14, paused = false, style }) {
  const spans = Array.from({ length: bars });
  return (
    <span
      className={"wf" + (paused ? " paused" : "")}
      style={{ color, height, ...style }}
    >
      {spans.map((_, i) => <span key={i}></span>)}
    </span>
  );
}

function PulseDot({ color, style }) {
  return <span className="pulse-dot" style={{ background: color, ...style }}></span>;
}

window.Waveform = Waveform;
window.PulseDot = PulseDot;