function TimelineItem({ item, isCurrent, isDimmed, activeFilters, onTagClick, onHover, highlight }) {
  const endLabel = item.end == null ? "now" : item.end;
  const yearText = item.kind === "project"
    ? item.dateLabel
    : item.start === item.end
      ? `${item.start}`
      : `${item.start} → ${endLabel}`;

  return (
    <article
      id={item.id}
      className={[
        "tl__item",
        isCurrent ? "tl__item--current" : "",
        isDimmed ? "tl__item--dimmed" : "",
      ].join(" ")}
      onMouseEnter={() => onHover && onHover(item.id)}
      onMouseLeave={() => onHover && onHover(null)}
      style={highlight ? {
        background: "color-mix(in oklab, var(--accent) 4%, transparent)",
        borderRadius: "var(--radius-md)",
        outline: "1px solid color-mix(in oklab, var(--accent) 25%, transparent)",
        outlineOffset: 8,
      } : undefined}
    >
      <div className="tl__node"></div>

      <div className={`tl__year ${isCurrent ? "tl__year--current" : ""}`}>
        <span>{yearText}</span>
        {isCurrent && <span style={{
          width: 6, height: 6, borderRadius: "50%",
          background: "var(--accent)",
        }} />}
      </div>

      <div className="tl__head">
        <div>
          <h3 className="tl__role">{item.role}</h3>
          <div className="tl__company">
            <strong>{item.company}</strong>
            {item.location && <span className="tl__muted"> · {item.location}</span>}
          </div>
        </div>
        <div className="tl__dates">{item.dateLabel}</div>
      </div>

      <ul className="tl__bullets">
        {item.bullets.map((b, i) => (
          <li key={i} className="tl__bullet">{b}</li>
        ))}
      </ul>

      {item.tech && item.tech.length > 0 && (
        <div className="tl__tags">
          {item.tech.map(t => {
            const isMatch = activeFilters.includes(t);
            return (
              <button
                key={t}
                className={`tl__tag ${isMatch ? "tl__tag--match" : ""}`}
                onClick={() => onTagClick && onTagClick(t)}
              >
                {t}
              </button>
            );
          })}
        </div>
      )}
    </article>
  );
}

function Timeline({ items, activeFilters, onTagClick, hoveredId, onHover }) {
  const matches = (item) => {
    if (activeFilters.length === 0) return true;
    if (!item.tech) return false;
    return activeFilters.some(f => item.tech.includes(f));
  };

  return (
    <div className="tl">
      {items.map(item => (
        <TimelineItem
          key={item.id}
          item={item}
          isCurrent={item.end == null && item.kind === "role"}
          isDimmed={!matches(item)}
          activeFilters={activeFilters}
          onTagClick={onTagClick}
          onHover={onHover}
          highlight={hoveredId === item.id}
        />
      ))}
    </div>
  );
}

window.Timeline = Timeline;
window.TimelineItem = TimelineItem;