// SlotsBadge — editorial "limited edition" ticker.
// Looks like a luxury certificate / serial stamp: corner brackets, monospace ticker,
// prominent "02" filled + "02" outlined numerals, diagonal slash detail.

function SlotsBadge({ lang }) {
  const t = (de, pl) => lang === 'de' ? de : pl;

  return (
    <div style={{
      position: 'relative',
      display: 'inline-flex', alignItems: 'center', gap: 18,
      padding: '12px 20px 12px 16px',
      marginBottom: 36,
      border: '1px solid rgba(212,175,55,.28)',
      borderRadius: 2,
      background: `
        repeating-linear-gradient(-45deg, rgba(212,175,55,.04) 0 8px, transparent 8px 16px),
        linear-gradient(180deg, rgba(212,175,55,.06), rgba(212,175,55,.01))
      `,
      overflow: 'hidden'
    }}>
      {/* Corner brackets — hand-stamped certificate feel */}
      <Bracket pos="tl"/>
      <Bracket pos="tr"/>
      <Bracket pos="bl"/>
      <Bracket pos="br"/>

      {/* Animated gold sweep */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(110deg, transparent 40%, rgba(240,208,96,.14) 50%, transparent 60%)',
        animation: 'slotSweep 3.8s ease-in-out infinite',
        pointerEvents: 'none'
      }}/>

      {/* LIVE red dot */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        position: 'relative', zIndex: 2
      }}>
        <span style={{
          width: 8, height: 8, borderRadius: '50%',
          background: '#ff3b3b',
          boxShadow: '0 0 12px rgba(255,59,59,.7)',
          animation: 'slotPulse 1.4s ease-in-out infinite'
        }}/>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
          letterSpacing: '.2em', color: '#ff8080', textTransform: 'uppercase'
        }}>LIVE</span>
      </div>

      {/* Vertical divider */}
      <div style={{ width: 1, height: 22, background: 'rgba(212,175,55,.2)', position: 'relative', zIndex: 2 }}/>

      {/* Big serial-style numeral: 02 / 04 */}
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, position: 'relative', zIndex: 2 }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 700,
          color: 'var(--gold)', lineHeight: 1, letterSpacing: '-.03em',
          background: 'linear-gradient(180deg,#F6E08A,#D4AF37 60%,#8a6f1a)',
          WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent'
        }}>02</span>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 500,
          color: 'rgba(212,175,55,.4)', lineHeight: 1, margin: '0 3px'
        }}>/</span>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 400,
          color: 'rgba(255,255,255,.35)', lineHeight: 1, letterSpacing: '-.01em'
        }}>04</span>
      </div>

      {/* Label stack */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, position: 'relative', zIndex: 2 }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 600,
          color: 'var(--text)', letterSpacing: '-.005em', lineHeight: 1.1
        }}>
          {t('Plätze verfügbar','Wolne miejsca')}
        </span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
          letterSpacing: '.22em', color: 'var(--text-3)', textTransform: 'uppercase'
        }}>
          {t('Q1·2025 Sonderpreis','Q1·2025 Oferta')}
        </span>
      </div>

      <style>{`
        @keyframes slotPulse {
          0%,100% { opacity: 1; transform: scale(1); }
          50% { opacity: .35; transform: scale(.8); }
        }
        @keyframes slotSweep {
          0% { transform: translateX(-60%); opacity: 0; }
          50% { opacity: 1; }
          100% { transform: translateX(60%); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

function Bracket({ pos }) {
  const size = 8;
  const color = 'rgba(212,175,55,.7)';
  const thick = 1.5;
  const common = { position: 'absolute', width: size, height: size, zIndex: 3 };
  const styles = {
    tl: { ...common, top: 4, left: 4, borderTop: `${thick}px solid ${color}`, borderLeft: `${thick}px solid ${color}` },
    tr: { ...common, top: 4, right: 4, borderTop: `${thick}px solid ${color}`, borderRight: `${thick}px solid ${color}` },
    bl: { ...common, bottom: 4, left: 4, borderBottom: `${thick}px solid ${color}`, borderLeft: `${thick}px solid ${color}` },
    br: { ...common, bottom: 4, right: 4, borderBottom: `${thick}px solid ${color}`, borderRight: `${thick}px solid ${color}` },
  };
  return <div style={styles[pos]}/>;
}

window.SlotsBadge = SlotsBadge;