// Professional — vertical timeline spine.
// Chronological nodes top→bottom. LinkedIn sidecar always visible.

const { useEffect: useEffectProf, useRef: useRefProf, useState: useStateProf } = React;

function Professional({ onNavigate, fromHome }) {
  const scrollerRef = useRefProf(null);
  const [active, setActive] = useStateProf(0);

  useEffectProf(() => {
    const el = scrollerRef.current;
    if (!el) return;
    const onScroll = () => {
      const nodes = el.querySelectorAll("[data-node]");
      let bestIdx = 0;
      let bestDist = Infinity;
      const center = el.scrollTop + el.clientHeight * 0.35;
      nodes.forEach((n, i) => {
        const mid = n.offsetTop + n.clientHeight / 2;
        const d = Math.abs(mid - center);
        if (d < bestDist) { bestDist = d; bestIdx = i; }
      });
      setActive(bestIdx);
    };
    el.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={`world-enter ${fromHome ? "entry-fresh" : ""}`} data-world="professional" style={prStyles.root}>
      {/* warm dark backdrop */}
      <div style={prStyles.backdrop} />

      {/* header */}
      <header style={prStyles.header}>
        <div>
          <div className="mono" style={{ color: "var(--phosphor)", fontSize: 11, letterSpacing: ".22em" }}>
            // WORLD 02 — PROFESSIONAL
          </div>
          <h1 style={prStyles.h1}>The timeline</h1>
          <p style={prStyles.lede}>
            Where I've been, in chronological order. From the first ticker as a teenager to the seat I'm
            running now, told as a single vertical spine.
          </p>
        </div>

        {/* eras strip */}
        <div style={prStyles.erasStrip}>
          <div className="mono" style={{ color: "var(--muted)", fontSize: 10, letterSpacing: ".22em", marginBottom: 8 }}>
            ERAS — JUMP TO
          </div>
          <div style={prStyles.erasRow}>
            {["EARLY", "SCHOOL", "INTERN", "WORK", "PIVOT", "NOW", "NEXT"].map((era) => {
              const idx = TIMELINE.findIndex(t => t.era === era);
              if (idx < 0) return null;
              return (
                <button key={era} className="mono"
                  onClick={() => {
                    const el = scrollerRef.current;
                    const node = el.querySelectorAll("[data-node]")[idx];
                    el.scrollTo({ top: node.offsetTop - 40, behavior: "smooth" });
                  }}
                  style={prStyles.eraChip}>
                  {era}
                </button>
              );
            })}
          </div>
        </div>
      </header>

      {/* main column */}
      <div ref={scrollerRef} className="scroller" style={prStyles.scroller}>
        <div style={prStyles.spine}>
          {/* the vertical spine line */}
          <div data-anim="spine-line" style={prStyles.spineLine} />
          {/* active position indicator */}
          <div style={{ ...prStyles.spineDot, transform: `translateY(${active * 100}%)` }} />

          {TIMELINE.map((t, i) => (
            <TimelineNode key={i} t={t} i={i} total={TIMELINE.length}
              onProjectLink={(id) => onNavigate({ world: "projects", detail: id })}
              active={i === active}
            />
          ))}

          {/* footer cap */}
          <div style={prStyles.endCap}>
            <div style={prStyles.endDot} />
            <div style={{ marginLeft: 50, paddingTop: 4 }}>
              <div className="mono" style={{ color: "var(--phosphor)", fontSize: 11, letterSpacing: ".22em" }}>
                END / TIMELINE
              </div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 28, marginTop: 6, color: "var(--fg)" }}>
                More to write.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* sidecar — always visible */}
      <aside style={prStyles.sidecar}>
        <div className="mono" style={{ color: "var(--muted)", fontSize: 10, letterSpacing: ".22em" }}>
          SIDECAR — CONTACT
        </div>
        <div style={{ marginTop: 14 }}>
          <div className="mono" style={{ color: "var(--amber)", fontSize: 10, letterSpacing: ".22em" }}>
            LINKEDIN
          </div>
          <a href={`https://${ABOUT.linkedin}`} target="_blank" rel="noreferrer"
             style={prStyles.sidecarLink} className="mono">
            {ABOUT.linkedin}
          </a>
        </div>

        <hr className="hr" style={{ margin: "20px 0" }} />

        <div className="mono" style={{ color: "var(--muted)", fontSize: 10, letterSpacing: ".22em" }}>
          CURRENT
        </div>
        <div style={{ fontFamily: "var(--serif)", fontSize: 20, lineHeight: 1.3, marginTop: 8, color: "var(--fg)" }}>
          Building <span style={{ color: "var(--amber)" }}>Leviathan</span> — looking for the next seat where research rigor and engineering throughput compound.
        </div>

        <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 6 }}>
          <Stat k="EXPERIENCE" v="6+ yrs in markets" />
          <Stat k="SCHOOL" v="Rutgers · Finance & Analytics" />
          <Stat k="LOCATION" v="Greater New York" />
          <Stat k="OPEN TO" v="Quant research · Eng+Finance roles" />
        </div>

        <div style={prStyles.compass}>
          <div className="mono" style={{ color: "var(--muted)", fontSize: 9, letterSpacing: ".22em" }}>POSITION</div>
          <div className="mono" style={{ color: "var(--amber)", fontSize: 11, letterSpacing: ".22em", marginTop: 4 }}>
            {String(active+1).padStart(2,"0")} / {String(TIMELINE.length).padStart(2,"0")}
          </div>
          <div style={{ marginTop: 8, fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 16 }}>
            {TIMELINE[active].title}
          </div>
        </div>
      </aside>
    </div>
  );
}

function Stat({ k, v }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3, paddingTop: 6 }}>
      <span className="mono" style={{ fontSize: 9, color: "var(--muted)", letterSpacing: ".22em" }}>{k}</span>
      <span className="mono" style={{ fontSize: 12, color: "var(--fg)", letterSpacing: ".02em" }}>{v}</span>
    </div>
  );
}

function TimelineNode({ t, i, total, onProjectLink, active }) {
  const isLeft = i % 2 === 0;
  // center-out stagger: nodes near the middle of the timeline appear first
  const mid = (total - 1) / 2;
  const centerDist = Math.abs(i - mid);
  return (
    <div data-node style={{
      ...nodeStyles.row,
      flexDirection: isLeft ? "row" : "row-reverse",
      "--i": i,
      "--center-dist": centerDist,
    }}>
      <div style={{ ...nodeStyles.side, textAlign: isLeft ? "right" : "left" }}>
        <div className="mono" style={{ color: "var(--muted)", fontSize: 10, letterSpacing: ".22em" }}>
          NODE {String(t.n).padStart(2, "0")} · {t.era}
        </div>
      </div>

      {/* spine connector */}
      <div style={nodeStyles.center}>
        <div style={{
          ...nodeStyles.dot,
          background: active ? "var(--amber)" : "var(--surface-2)",
          borderColor: active ? "var(--amber)" : "var(--line-2)",
          boxShadow: active ? "0 0 0 6px oklch(80% 0.14 70 / 0.18)" : "none",
        }} />
        <div className="mono" style={{
          position: "absolute",
          top: 30,
          left: "50%",
          transform: "translateX(-50%)",
          fontSize: 9,
          color: active ? "var(--amber)" : "var(--dim)",
          letterSpacing: ".22em",
        }}>
          {String(t.n).padStart(2,"0")}
        </div>
      </div>

      <div style={{ ...nodeStyles.side, textAlign: isLeft ? "left" : "right" }}>
        <Card t={t} isLeft={isLeft} onProjectLink={onProjectLink} active={active} />
      </div>
    </div>
  );
}

function Card({ t, isLeft, onProjectLink, active }) {
  return (
    <article style={{
      ...nodeStyles.card,
      borderColor: active ? "oklch(70% 0.10 70 / 0.4)" : "var(--line)",
      background: active ? "oklch(17% 0.018 65 / 0.85)" : "oklch(15% 0.015 60 / 0.7)",
    }}>
      <div style={{ display: "flex", justifyContent: isLeft ? "flex-start" : "flex-end", alignItems: "center", gap: 10 }}>
        <span className="mono" style={nodeStyles.era}>{t.era}</span>
      </div>

      <h3 style={{ ...nodeStyles.h3, textAlign: isLeft ? "left" : "right" }}>{t.title}</h3>
      <p style={{ ...nodeStyles.body, textAlign: isLeft ? "left" : "right" }}>{t.body}</p>

      {t.tags && (
        <div style={{ ...nodeStyles.tags, justifyContent: isLeft ? "flex-start" : "flex-end" }}>
          {t.tags.map((tag, j) => (
            <span key={j} className="mono" style={nodeStyles.tag}>{tag}</span>
          ))}
        </div>
      )}

      {t.link && (
        <div style={{ marginTop: 14, textAlign: isLeft ? "left" : "right" }}>
          <button className="mono" onClick={() => onProjectLink(t.link.to)} style={nodeStyles.linkBtn}>
            {t.link.label}
          </button>
        </div>
      )}
    </article>
  );
}

const prStyles = {
  root: {
    position: "absolute", inset: 0,
    display: "grid",
    gridTemplateColumns: "minmax(0,1fr) 340px",
  },
  backdrop: {
    position: "absolute", inset: 0,
    background:
      "radial-gradient(ellipse at 80% 0%, oklch(20% 0.02 70 / 0.6) 0%, transparent 55%)," +
      "radial-gradient(ellipse at 0% 100%, oklch(18% 0.015 60 / 0.5) 0%, transparent 60%)",
    zIndex: -1,
  },
  header: {
    gridColumn: "1 / -1",
    padding: "44px 56px 16px",
    display: "grid",
    gridTemplateColumns: "1fr auto",
    gap: 40,
    alignItems: "end",
  },
  h1: {
    fontFamily: "var(--serif)",
    fontSize: "clamp(36px, 4.0vw, 50px)",
    fontStyle: "italic",
    fontWeight: 400,
    margin: "16px 0 10px",
    letterSpacing: "-0.01em",
    lineHeight: 1.05,
  },
  lede: {
    margin: 0,
    fontFamily: "var(--serif)",
    fontSize: "clamp(15px, 1.1vw, 17px)",
    lineHeight: 1.5,
    color: "var(--fg-2)",
    maxWidth: "60ch",
  },
  erasStrip: { textAlign: "right" },
  erasRow: { display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "flex-end" },
  eraChip: {
    appearance: "none",
    background: "transparent",
    color: "var(--fg-2)",
    border: "1px solid var(--line)",
    padding: "6px 10px",
    fontSize: 10,
    letterSpacing: ".2em",
    cursor: "pointer",
    transition: "border-color 200ms, color 200ms",
  },
  scroller: {
    position: "relative",
    overflowY: "auto",
    height: "100%",
    paddingBottom: 120,
  },
  spine: {
    position: "relative",
    padding: "20px 56px calc(var(--terminal-h) + 24px)",
  },
  spineLine: {
    position: "absolute",
    top: 16, bottom: 16,
    left: "50%",
    transform: "translateX(-0.5px)",
    width: 1,
    background:
      "linear-gradient(180deg, transparent, var(--line-2) 6%, var(--line-2) 94%, transparent)",
    pointerEvents: "none",
  },
  spineDot: {
    display: "none", // visual cue handled per-node
  },
  endCap: {
    display: "flex",
    alignItems: "center",
    marginTop: 24,
    paddingLeft: "calc(50% - 8px)",
  },
  endDot: {
    width: 16, height: 16, borderRadius: 16, background: "var(--bg)", border: "1px dashed var(--line-2)", flexShrink: 0,
  },

  sidecar: {
    borderLeft: "1px solid var(--line)",
    padding: "32px 28px",
    background: "oklch(11% 0.012 60 / 0.7)",
    backdropFilter: "blur(8px)",
    overflowY: "auto",
    paddingBottom: 120,
    position: "relative",
  },
  sidecarLink: {
    display: "block",
    marginTop: 6,
    fontSize: 13,
    color: "var(--fg)",
    textDecoration: "none",
    borderBottom: "1px dashed var(--line-2)",
    paddingBottom: 6,
    letterSpacing: ".02em",
    transition: "color 200ms",
  },
  compass: {
    marginTop: 26,
    padding: "14px 16px",
    border: "1px solid var(--line)",
    background: "oklch(14% 0.014 60 / 0.6)",
  },
};

const nodeStyles = {
  row: {
    display: "flex",
    alignItems: "stretch",
    gap: 0,
    minHeight: 160,
    padding: "26px 0",
  },
  side: { flex: 1, padding: "0 36px", display: "flex", flexDirection: "column", justifyContent: "center" },
  center: {
    position: "relative",
    width: 1,
    flexShrink: 0,
    display: "flex",
    justifyContent: "center",
    alignItems: "flex-start",
    paddingTop: 22,
  },
  dot: {
    width: 14, height: 14, borderRadius: 14,
    border: "1px solid var(--line-2)",
    background: "var(--surface-2)",
    position: "relative",
    zIndex: 2,
    transition: "background 220ms ease, box-shadow 220ms ease, border-color 220ms ease",
  },
  card: {
    padding: "18px 22px",
    border: "1px solid var(--line)",
    background: "oklch(15% 0.015 60 / 0.7)",
    boxShadow: "0 6px 24px oklch(0% 0 0 / 0.35)",
    transition: "border-color 250ms, background 250ms",
    maxWidth: 520,
    marginLeft: "auto",
    marginRight: 0,
    width: "100%",
  },
  era: {
    fontSize: 9, letterSpacing: ".24em",
    color: "var(--amber)",
    border: "1px solid oklch(70% 0.10 70 / 0.4)",
    padding: "2px 7px",
  },
  h3: {
    fontFamily: "var(--serif)",
    fontStyle: "italic",
    fontSize: 30,
    fontWeight: 400,
    margin: "10px 0 8px",
    letterSpacing: "-0.005em",
    lineHeight: 1.15,
    color: "var(--fg)",
  },
  body: {
    margin: 0,
    fontFamily: "var(--serif)",
    fontSize: 16,
    lineHeight: 1.55,
    color: "var(--fg-2)",
    textWrap: "pretty",
  },
  tags: {
    display: "flex", flexWrap: "wrap", gap: 6,
    marginTop: 12,
  },
  tag: {
    fontSize: 10, letterSpacing: ".12em",
    padding: "3px 8px",
    border: "1px solid var(--line)",
    color: "var(--muted)",
  },
  linkBtn: {
    appearance: "none",
    background: "transparent",
    border: "1px solid var(--amber)",
    color: "var(--amber)",
    padding: "7px 12px",
    fontSize: 11,
    letterSpacing: ".22em",
    cursor: "pointer",
  },
};

window.Professional = Professional;