/* global React */
const { useState: useTLState } = React;

const CAREER = [
  { id: "xbox", year: "2001", role: "Xbox Contest", org: "Toys R Us launch", note: "Won the world's first Xbox contest. Grand-opened with Bill Gates and The Rock.", tags: ["microsoft","gaming","story"] },
  { id: "pro", year: "'01–'11", role: "Pro Gamer", org: "Tribes / Street Fighter", note: "2nd in the world in Star Siege Tribes. LAN-circuit FPS + fighting games.", tags: ["gaming"] },
  { id: "store", year: "2012", role: "Microsoft Store", org: "Part-time → #1 Sales", note: "Store became #1 in the company. Mentored by Judson Althoff.", tags: ["microsoft","sales","retail"] },
  { id: "learning", year: "'13–'15", role: "Learning Specialist", org: "Microsoft global", note: "Trained the region, then U.S. retail, then the first 3 stores in China.", tags: ["microsoft","training"] },
  { id: "ae", year: "'15–'18", role: "Account Executive", org: "Microsoft Ed. NJ", note: "575% revenue-to-quota. $1.1M B2B sales. 31% O365 seat growth.", tags: ["microsoft","sales","edtech"] },
  { id: "augmented", year: "'18–'23", role: "Co-Founder & CXO", org: "AugmentED", note: "Raised $3M from Mark Cuban & Robert Kraft. 5-product EdTech platform.", tags: ["founder","edtech","story"] },
  { id: "icims", year: "'21–'25", role: "Sr. Implementation", org: "iCIMS", note: "Enterprise SaaS. J&J, Merck, GM, Ford, Prudential.", tags: ["enterprise","saas"] },
  { id: "velocity", year: "Dec '24+", role: "Sr. Solutions", org: "Velocity HCM", note: "Solutions consulting in HCM space.", tags: ["enterprise","saas"] },
  { id: "ai", year: "Aug '25+", role: "AI Architect", org: "Independent", note: "14 public repos. AIOS, BMO, Apply Assistant, paper trader, SpellBook.", tags: ["ai","builder","current"] },
];

const FILTERS = [
  { id: "all", label: "All" },
  { id: "microsoft", label: "Microsoft" },
  { id: "ai", label: "AI / Builder" },
  { id: "founder", label: "Founder" },
  { id: "enterprise", label: "Enterprise" },
  { id: "sales", label: "Sales" },
];

window.CareerTimeline = function CareerTimeline() {
  const [filter, setFilter] = useTLState("all");
  const isActive = (item) => filter === "all" || item.tags.includes(filter);

  return (
    <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: 28 }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        {FILTERS.map(f => {
          const active = filter === f.id;
          return (
            <button
              key={f.id}
              onClick={() => setFilter(f.id)}
              style={{
                padding: "9px 22px",
                fontSize: 14,
                fontFamily: "var(--font-mono)",
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                background: active ? "var(--ink)" : "transparent",
                color: active ? "var(--paper)" : "var(--ink-2)",
                border: `1px solid ${active ? "var(--ink)" : "var(--ink-5)"}`,
                cursor: "pointer",
                transition: "all 200ms",
              }}
            >{f.label}</button>
          );
        })}
      </div>

      <div style={{ position: "relative", paddingTop: 8 }}>
        <div style={{
          position: "absolute",
          top: 28, left: 0, right: 0,
          height: 1,
          background: "var(--ink-5)",
        }} />
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${CAREER.length}, 1fr)`,
          gap: 4,
          position: "relative",
        }}>
          {CAREER.map((item) => {
            const active = isActive(item);
            return (
              <div
                key={item.id}
                style={{
                  display: "flex", flexDirection: "column", alignItems: "center",
                  opacity: active ? 1 : 0.18,
                  transition: "opacity 300ms",
                }}
              >
                <div style={{
                  width: active ? 18 : 10,
                  height: active ? 18 : 10,
                  borderRadius: "50%",
                  background: active ? "var(--accent)" : "var(--ink-5)",
                  border: active ? "3px solid var(--paper)" : "none",
                  boxShadow: active ? "0 0 0 1px var(--accent)" : "none",
                  marginTop: active ? 19 : 23,
                  marginBottom: 14,
                  transition: "all 300ms",
                  zIndex: 2,
                }} />
                <div style={{
                  fontFamily: "var(--font-serif)",
                  fontStyle: "italic",
                  fontWeight: 600,
                  fontSize: 22,
                  color: "var(--accent)",
                  letterSpacing: "-0.01em",
                  marginBottom: 6,
                }}>{item.year}</div>
                <div style={{
                  fontSize: 16, fontWeight: 600,
                  color: "var(--ink)",
                  textAlign: "center",
                  lineHeight: 1.2,
                  marginBottom: 4,
                  padding: "0 4px",
                  fontFamily: "var(--font-sans)",
                }}>{item.role}</div>
                <div style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 11,
                  color: "var(--ink-3)",
                  textAlign: "center",
                  lineHeight: 1.3,
                  letterSpacing: "0.04em",
                  textTransform: "uppercase",
                  padding: "0 4px",
                }}>{item.org}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{
        padding: "20px 28px",
        background: "var(--paper-2)",
        borderLeft: "3px solid var(--accent)",
        minHeight: 100,
      }}>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 13, fontWeight: 500, letterSpacing: "0.16em",
          textTransform: "uppercase", color: "var(--accent-deep)",
          marginBottom: 12,
        }}>
          {filter === "all" ? "Notes from the road" : `Filter — ${FILTERS.find(f => f.id === filter)?.label}`}
        </div>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(2, 1fr)",
          gap: "10px 36px",
          fontFamily: "var(--font-sans)",
          fontSize: 17,
          lineHeight: 1.45,
          color: "var(--ink-2)",
        }}>
          {CAREER.filter(isActive).map(item => (
            <div key={item.id}>
              <span style={{ fontWeight: 600, color: "var(--ink)" }}>{item.role}.</span>{" "}
              {item.note}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};