// Rails Strip — 5 operating guardrails, always visible.
// Static, read-only. No data layer.

const RAILS = [
  { id: 'structure',      label: 'Structure',      def: 'Everything is built on clarity, not chaos.',   bg: 'rgba(42,59,225,0.10)',   fg: '#1b258f' },
  { id: 'efficiency',     label: 'Efficiency',     def: 'Lean thinking embedded in every system.',      bg: 'rgba(212,161,6,0.13)',   fg: '#7a5d04' },
  { id: 'communication',  label: 'Communication',  def: 'Clear flows mean fewer mistakes.',             bg: 'rgba(217,119,87,0.13)',  fg: '#9c4824' },
  { id: 'accountability', label: 'Accountability', def: 'Defined ownership at every level.',            bg: 'rgba(116,115,138,0.12)', fg: '#353446' },
  { id: 'scalability',    label: 'Scalability',    def: 'Every decision tested against growth.',        bg: 'rgba(30,166,114,0.12)',  fg: '#125a3f' },
];

const RAILS_QUOTE = '“You don’t think your way out of confusion. You structure your way out of it.”';

function RailPill({ rail }) {
  const [focused, setFocused] = React.useState(false);
  const [hovered, setHovered] = React.useState(false);
  const show = focused || hovered;
  return (
    <span style={{ position: 'relative', display: 'inline-flex' }}>
      <span
        tabIndex={0}
        role="button"
        aria-label={rail.label + ': ' + rail.def}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        style={{
          display: 'inline-flex', alignItems: 'center',
          padding: '3px 10px',
          borderRadius: 999,
          background: rail.bg,
          color: rail.fg,
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.06em',
          textTransform: 'uppercase',
          cursor: 'default',
          userSelect: 'none',
          outline: 'none',
          boxShadow: focused ? 'var(--focus-ring)' : 'none',
          transition: 'box-shadow 120ms',
        }}
      >
        {rail.label}
      </span>
      {show && (
        <span
          role="tooltip"
          style={{
            position: 'absolute',
            bottom: 'calc(100% + 6px)',
            left: '50%',
            transform: 'translateX(-50%)',
            background: 'var(--ink-900)',
            color: 'var(--ink-0)',
            padding: '5px 10px',
            borderRadius: 6,
            fontSize: 11,
            fontFamily: 'var(--font-mono)',
            whiteSpace: 'nowrap',
            zIndex: 200,
            pointerEvents: 'none',
            boxShadow: 'var(--shadow-md)',
          }}
        >
          {rail.def}
        </span>
      )}
    </span>
  );
}

function RailsStrip() {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexWrap: 'wrap',
      gap: 8,
      padding: '8px 14px',
      background: 'var(--bg-elev)',
      border: '1px solid var(--border)',
      borderRadius: 10,
      minHeight: 40,
    }}>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
        {RAILS.map(r => <RailPill key={r.id} rail={r} />)}
      </div>
      <span style={{
        fontFamily: 'var(--font-mono)',
        fontSize: 11,
        fontStyle: 'italic',
        color: 'var(--fg-3)',
        textAlign: 'right',
        flexShrink: 0,
        maxWidth: '46%',
        lineHeight: 1.4,
      }}>
        {RAILS_QUOTE}
      </span>
    </div>
  );
}

Object.assign(window, { RailsStrip });