function CareerStrip({ data, activeId, onHover, onClick }) {
  const start = data.axisStart;
  const end   = data.axisEnd;
  const span  = end - start;
  const nowYear = new Date().getFullYear();

  const rows = data.experience.slice();

  const ticks = [];
  for (let y = start; y <= end; y += 2) ticks.push(y);

  const ROW_H = 18;
  const ROW_GAP = 5;

  const merlinRows = rows.filter(r => r.company === "Merlin CSI");
  const merlinBgs  = ["var(--slate-07)", "var(--slate-08)", "var(--slate-09)"];

  const getColor = (r) => {
    if (r.company === "Fusion Media") return "var(--accent)";
    const mi = merlinRows.indexOf(r);
    return merlinBgs[mi] || "var(--slate-07)";
  };

  const scrollRef = React.useRef(null);
  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
    }
  }, []);

  const [tooltip, setTooltip] = React.useState(null);
  const lastTouchRef = React.useRef(0);

  return (
    <div className="strip">
      <div className="strip__head">
        <div className="strip__title">Career at a glance</div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-tertiary)", display: "flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--accent)", display: "inline-block", flexShrink: 0 }} />
            Fusion Media
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--fg-tertiary)", display: "flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--slate-07)", display: "inline-block", flexShrink: 0 }} />
            Merlin CSI
          </span>
        </div>
      </div>
      <div ref={scrollRef} className="strip__scroll">
        <div style={{ minWidth: 480, paddingRight: 12 }}>
          <div className="strip__plot" style={{ height: rows.length * (ROW_H + ROW_GAP) + 32 }}>
            <div className="strip__grid">
              {ticks.map(y => {
                const x = ((y - start) / span) * 100;
                return <div key={y} className="strip__grid-line" style={{ left: `${x}%` }} />;
              })}
            </div>

            {rows.map((r, i) => {
              const s = r.start;
              const e = r.end == null ? nowYear : r.end;
              const left  = ((s - start) / span) * 100;
              const width = ((e - s) / span) * 100;
              const isCurrent = r.end == null;
              const bg = getColor(r);
              return (
                <a
                  key={r.id}
                  href={`#${r.id}`}
                  className={`strip__bar ${isCurrent ? "strip__bar--current" : ""}`}
                  style={{
                    left:         `${left}%`,
                    width:        `${Math.max(width, 1)}%`,
                    top:          i * (ROW_H + ROW_GAP) + 8,
                    height:       ROW_H,
                    background:   bg,
                    color:        "#fff",
                    textOverflow: "ellipsis",
                    outline:      "none",
                  }}
                  onTouchStart={() => { lastTouchRef.current = Date.now(); setTooltip(null); }}
                  onMouseEnter={(ev) => {
                    if (Date.now() - lastTouchRef.current < 600) return;
                    onHover && onHover(r.id);
                    setTooltip({ text: `${r.role} · ${r.dateLabel}`, x: ev.clientX, y: ev.clientY });
                  }}
                  onMouseMove={(ev) => {
                    if (Date.now() - lastTouchRef.current < 600) return;
                    setTooltip(prev => prev ? { ...prev, x: ev.clientX, y: ev.clientY } : null);
                  }}
                  onMouseLeave={() => {
                    onHover && onHover(null);
                    setTooltip(null);
                  }}
                  onClick={(ev) => { ev.preventDefault(); setTooltip(null); onClick && onClick(r.id); }}
                >
                  {r.role}
                </a>
              );
            })}

            <div className="strip__axis">
              {ticks.map(y => (
                <span key={y} style={{
                  position: "absolute",
                  left: `${((y - start) / span) * 100}%`,
                  transform: y === end ? "translateX(-100%)" : "translateX(-50%)",
                }}>
                  {y === end ? "now" : `'${String(y).slice(2)}`}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>

      {tooltip && (
        <div style={{
          position: "fixed",
          left: tooltip.x,
          top:  tooltip.y - 36,
          transform: "translateX(-50%)",
          background:   "var(--surface)",
          border:       "1px solid var(--border)",
          borderRadius: "var(--radius-sm)",
          padding:      "3px 9px",
          fontSize:     11,
          fontFamily:   "var(--font-mono)",
          color:        "var(--fg)",
          pointerEvents:"none",
          zIndex:       200,
          whiteSpace:   "nowrap",
          boxShadow:    "var(--shadow-sm)",
        }}>
          {tooltip.text}
        </div>
      )}
    </div>
  );
}

window.CareerStrip = CareerStrip;