// Atmosphere.jsx — atmospheric layer (fog, embers, vignette)

function SbpAtmosphere({ embers = 14 }) {
  const sparks = [];
  for (let i = 0; i < embers; i++) {
    const left = (i * 37 + 7) % 100;
    const delay = (i * 0.7) % 6;
    const drift = ((i * 53) % 80) - 40;
    const size = 2 + ((i * 7) % 4);
    sparks.push(
      <span key={i} className="sbp-ember" style={{
        left: `${left}%`,
        bottom: `-${10 + (i % 5) * 8}px`,
        width: `${size}px`, height: `${size}px`,
        animationDelay: `${delay}s`,
        animationDuration: `${5 + (i % 4)}s`,
        '--drift': `${drift}px`,
      }} />
    );
  }
  return (
    <div className="sbp-atmos" aria-hidden="true">
      <div className="sbp-atmos__base"/>
      <div className="sbp-atmos__fog"/>
      <div className="sbp-atmos__grain"/>
      {sparks}
      <div className="sbp-atmos__vignette"/>
    </div>
  );
}

// Bottom nav — shared across screens
function SbpBottomNav({ active, onChange, role = 'user', hidden = false }) {
  if (hidden) return null;
  const items = [
    { id: 'home',    label: 'Home',    Icon: IconHome },
    { id: 'news',    label: 'News',    Icon: IconNews },
    { id: 'events',  label: 'Termine', Icon: IconEvents },
    { id: 'profile', label: 'Profil',  Icon: IconProfile },
  ];
  if (role === 'admin' || role === 'moderator') {
    items.push({ id: 'admin', label: 'Admin', Icon: IconShield });
  }
  return (
    <nav className="sbp-bottom-nav" style={{ paddingBottom: 6 }}>
      {items.map(({ id, label, Icon }) => (
        <button key={id}
          className="sbp-bottom-nav__btn"
          aria-current={active === id ? 'true' : 'false'}
          onClick={() => onChange(id)}>
          <span className="sbp-bottom-nav__icon"><Icon size={22}/></span>
          <span>{label}</span>
        </button>
      ))}
    </nav>
  );
}

// Decorative top header used inside screens
function SbpTopBar({ title, subtitle, leading, trailing }) {
  return (
    <header style={{
      padding: '14px 20px 12px',
      display: 'flex', alignItems: 'center', gap: 12,
      borderBottom: '1px solid var(--sbp-border)',
      position: 'relative',
    }}>
      <div style={{ width: 40 }}>{leading}</div>
      <div style={{ flex: 1, textAlign: 'center' }}>
        <div className="sbp-display" style={{ fontSize: 13, letterSpacing: '0.22em' }}>{title}</div>
        {subtitle && <div className="sbp-meta" style={{ marginTop: 2 }}>{subtitle}</div>}
      </div>
      <div style={{ width: 40, display: 'flex', justifyContent: 'flex-end' }}>{trailing}</div>
    </header>
  );
}

// Brand mark — eigenes Logo
function SbpMark({ size = 44 }) {
  return (
    <img
      src="/logo.webp"
      width={size}
      height={size}
      alt="Schafberg-Pass"
      style={{
        width: size, height: size,
        objectFit: 'contain',
        filter: 'drop-shadow(0 0 14px var(--sbp-accent))',
      }}
    />
  );
}

Object.assign(window, { SbpAtmosphere, SbpBottomNav, SbpTopBar, SbpMark });