// ModusEyebrow.jsx — der „Modus · X" Header-Marker
// Konsequent auf jeder Modus-Seite. Macht visuell explizit, in welchem
// Nutzungskontext sich der User befindet (Trauerfall · Vorsorge · Neutral).
//
// API:
//   <ModusEyebrow tone="trauerfall" />          // Tiefrot, pulsiert (akut)
//   <ModusEyebrow tone="trauerfall" onDark />   // Salmon (auf dunkler Surface)
//   <ModusEyebrow tone="vorsorge" />            // Salbei, statisch (sachlich)
//   <ModusEyebrow tone="neutral" />             // Kupfer, statisch
//   <ModusEyebrow tone="vorsorge" label="…" />  // Custom-Label, gleicher Dot
//
// Die Keyframe-Animation hat zwei Varianten: light (Tiefrot-Glow für helle Surfaces)
// und dark (Salmon-Glow für dunkle Surfaces). Ausgewählt über `onDark`.

function ModusEyebrow({ tone='neutral', onDark=false, label, style }) {
  const cfg = {
    trauerfall: {
      label: label || 'Modus · Trauerfall',
      color: onDark ? 'var(--mode-traue-island-eyebrow)' : 'var(--mode-traue-accent)',
      dot:   onDark ? 'var(--mode-traue-island-eyebrow)' : 'var(--mode-traue-accent)',
      pulse: true,
    },
    vorsorge: {
      label: label || 'Modus · Vorsorge',
      color: onDark ? 'var(--mode-vor-accent)' : 'var(--mode-vor-accent-ink)',
      dot:   'var(--mode-vor-accent)',
      pulse: false,
    },
    neutral: {
      label: label || 'Modus · Neutral',
      color: 'var(--brand-accent)',
      dot:   'var(--brand-accent)',
      pulse: false,
    },
  }[tone] || {};

  return (
    <>
      {cfg.pulse && (
        <style>{`
          @keyframes me-pulse-light {
            0%,100% { box-shadow: 0 0 0 4px rgba(168,48,45,.18); }
            50%     { box-shadow: 0 0 0 8px rgba(168,48,45,.05); }
          }
          @keyframes me-pulse-dark {
            0%,100% { box-shadow: 0 0 0 4px rgba(232,146,128,.18); }
            50%     { box-shadow: 0 0 0 8px rgba(232,146,128,.05); }
          }
        `}</style>
      )}
      <span style={{
        font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color: cfg.color, display:'inline-flex', alignItems:'center', gap:10,
        ...style,
      }}>
        <span style={{
          width:8, height:8, borderRadius:'50%', background: cfg.dot, flexShrink:0,
          ...(cfg.pulse ? { animation: `${onDark ? 'me-pulse-dark' : 'me-pulse-light'} 2.2s ease-in-out infinite` } : {}),
        }}/>
        {cfg.label}
      </span>
    </>
  );
}

Object.assign(window, { ModusEyebrow });