// Shared UI pieces: Placeholder, Marquee, MusicBars, LanguagePill, ThemePill
const { useEffect, useRef, useState } = React;

function Placeholder({ label, aspect = '4/5', className = '', theme }) {
  const dark = theme.placeholderMode === 'stripes-dark';
  const stripeA = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)';
  const stripeB = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
  const bg = dark ? '#1a1614' : theme.bg2;
  return (
    <div className={`ls-placeholder ${className}`}
      style={{
        aspectRatio: aspect,
        background: `repeating-linear-gradient(135deg, ${stripeA} 0 10px, ${stripeB} 10px 20px), ${bg}`,
        borderRadius: theme.radius,
        color: theme.ink2,
        fontFamily: theme.mono,
        fontSize: '11px',
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        display: 'flex', alignItems: 'flex-end',
        padding: '14px',
        position: 'relative',
        overflow: 'hidden',
      }}>
      <span style={{ opacity: 0.8 }}>↳ {label}</span>
    </div>
  );
}

function Marquee({ text, theme, reverse = false }) {
  return (
    <div className="ls-marquee" style={{
      borderTop: `1px solid ${theme.line}`,
      borderBottom: `1px solid ${theme.line}`,
      background: theme.accent,
      color: theme.bg,
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      padding: '14px 0',
    }}>
      <div className="ls-marquee-text" style={{
        display: 'inline-block',
        animation: `ls-marquee ${reverse ? 38 : 32}s linear infinite`,
        animationDirection: reverse ? 'reverse' : 'normal',
        fontFamily: theme.display,
        fontStyle: theme.displayItalic ? 'italic' : 'normal',
        fontWeight: theme.displayWeight,
        fontSize: '42px',
        letterSpacing: '-0.01em',
      }}>
        {Array.from({ length: 8 }, (_, i) => (
          <span key={i} style={{ marginRight: '0.4em' }}>{text}</span>
        ))}
      </div>
    </div>
  );
}

function MusicBars({ color, height = 16, count = 4 }) {
  return (
    <span style={{ display: 'inline-flex', gap: '2px', alignItems: 'flex-end', height }}>
      {Array.from({ length: count }, (_, i) => (
        <span key={i} style={{
          display: 'inline-block',
          width: '3px',
          background: color,
          height: '100%',
          animation: `ls-bar 0.9s ease-in-out ${i * 0.12}s infinite`,
          transformOrigin: 'bottom',
        }} />
      ))}
    </span>
  );
}

function Kicker({ children, theme, color }) {
  return (
    <div style={{
      fontFamily: theme.mono,
      fontSize: '12px',
      letterSpacing: '0.14em',
      textTransform: 'uppercase',
      color: color || theme.ink2,
      marginBottom: '24px',
      display: 'inline-flex',
      alignItems: 'center',
      gap: '10px',
    }}>
      <span style={{ width: '24px', height: '1px', background: 'currentColor', display: 'inline-block' }} />
      {children}
    </div>
  );
}

function DisplayText({ children, theme, size = 'clamp(44px, 7vw, 112px)', color, style = {} }) {
  return (
    <h2 style={{
      fontFamily: theme.display,
      fontWeight: theme.displayWeight,
      fontStyle: theme.displayItalic ? 'italic' : 'normal',
      fontSize: size,
      lineHeight: 0.95,
      letterSpacing: theme.displayItalic ? '-0.005em' : '-0.035em',
      color: color || theme.ink,
      margin: 0,
      whiteSpace: 'pre-line',
      textWrap: 'balance',
      ...style,
    }}>{children}</h2>
  );
}

Object.assign(window, { Placeholder, Marquee, MusicBars, Kicker, DisplayText });