// Reverse Vox logo — cassette boombox aesthetic.
// Layout: REVERSE [cassette icon] VOX «
// "R" is permanently mirrored (Ɐ-style). Other letters randomly mirror-flip.

function CassetteIcon({ size = 32, color = '#EEE4DA' }) {
  return (
    <svg width={size * 1.5} height={size} viewBox="0 0 60 40" fill="none" style={{ display: 'block' }}>
      {/* body */}
      <rect x="2" y="4" width="56" height="32" rx="3" fill={color} />
      {/* tape window */}
      <rect x="8" y="10" width="44" height="14" rx="1" fill="#000" />
      {/* reels */}
      <circle cx="20" cy="17" r="4" fill={color} />
      <circle cx="20" cy="17" r="1.5" fill="#000" />
      <circle cx="40" cy="17" r="4" fill={color} />
      <circle cx="40" cy="17" r="1.5" fill="#000" />
      {/* arrows under */}
      <path d="M14 30 L18 33 L18 27 Z" fill="#000" />
      <path d="M22 30 L26 33 L26 27 Z" fill="#000" />
      <path d="M30 30 L34 33 L34 27 Z" fill="#000" />
      <path d="M38 30 L42 33 L42 27 Z" fill="#000" />
    </svg>
  );
}

function RVLogo({ size = 1, color = '#E75002', glow = false, font = '"Fredoka", "Baloo 2", system-ui, sans-serif' }) {
  // Two halves so the cassette can sit in the middle
  const left = 'EVERSE'.split('');
  const right = 'VOX'.split('');
  const [flipped, setFlipped] = React.useState(() => new Set());

  const totalLetters = 1 + left.length + right.length; // 1 = the leading R

  React.useEffect(() => {
    let timer;
    const tick = () => {
      setFlipped(prev => {
        const next = new Set(prev);
        // pool of indices excluding 0 (R is permanently flipped)
        const pool = [];
        for (let i = 1; i < totalLetters; i++) pool.push(i);
        const count = Math.random() < 0.5 ? 1 : 2;
        for (let i = 0; i < count && pool.length; i++) {
          const idx = Math.floor(Math.random() * pool.length);
          const [pick] = pool.splice(idx, 1);
          if (next.has(pick)) next.delete(pick); else next.add(pick);
        }
        return next;
      });
      timer = setTimeout(tick, 1800 + Math.random() * 1700);
    };
    timer = setTimeout(tick, 1200);
    return () => clearTimeout(timer);
  }, [totalLetters]);

  const baseFont = 64 * size;
  const letterStyle = (idx, opts = {}) => {
    const isFlip = idx === 0 ? true : flipped.has(idx);
    return {
      display: 'inline-block',
      transform: isFlip ? 'scaleX(-1) scale(1.05)' : 'scaleX(1) scale(1)',
      transition: 'transform 0.65s cubic-bezier(.34, 1.56, .64, 1)',
      ...opts,
    };
  };

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      gap: 6 * size,
      fontFamily: font,
      fontWeight: 700,
      fontSize: baseFont,
      lineHeight: 0.9,
      color,
      letterSpacing: -1.5 * size,
      textShadow: glow ? `0 0 ${28 * size}px ${color}66` : 'none',
      userSelect: 'none',
      whiteSpace: 'nowrap',
    }}>
      {/* R (permanently mirrored) + EVERSE */}
      <span style={{ display: 'inline-flex', alignItems: 'baseline' }}>
        <span style={letterStyle(0)}>R</span>
        {left.map((ch, i) => (
          <span key={i} style={letterStyle(i + 1)}>{ch}</span>
        ))}
      </span>

      {/* cassette in the middle */}
      <span style={{ display: 'inline-flex', alignSelf: 'center', padding: `0 ${4 * size}px` }}>
        <CassetteIcon size={baseFont * 0.55} color={color === '#E75002' ? '#EEE4DA' : color} />
      </span>

      {/* VOX */}
      <span style={{ display: 'inline-flex', alignItems: 'baseline' }}>
        {right.map((ch, i) => (
          <span key={i} style={letterStyle(i + 1 + left.length)}>{ch}</span>
        ))}
      </span>

      {/* trailing «« */}
      <span style={{
        fontSize: baseFont * 0.7, fontWeight: 800, marginLeft: 4 * size,
        color, opacity: 0.95, letterSpacing: -2 * size,
      }}>«</span>
    </div>
  );
}

window.RVLogo = RVLogo;
window.CassetteIcon = CassetteIcon;