const ACCENT = "#6EE7F4";
const INK = "#EDE9E0";
const MUTED = "rgba(237,233,224,0.65)";
const DIM = "rgba(237,233,224,0.4)";
const BORDER = "1px solid rgba(237,233,224,0.1)";

function SectionHeader({ cmd, path, title, summary }) {
  return (
    <header style={{ marginBottom: 36 }}>
      <div style={{
        fontFamily: "'JetBrains Mono', ui-monospace, monospace",
        fontSize: 12,
        color: DIM,
        marginBottom: 18,
        display: "flex",
        alignItems: "center",
        gap: 8,
        flexWrap: "wrap",
      }}>
        <span style={{ color: ACCENT }}>~/baz</span>
        <span style={{ color: DIM }}>$</span>
        <span style={{ color: INK }}>{cmd}</span>
        {path && <span style={{ color: "rgba(237,233,224,0.5)" }}>{path}</span>}
      </div>
      <h2 style={{
        fontFamily: "'Instrument Serif', Georgia, serif",
        fontWeight: 400,
        fontSize: "clamp(42px, 5.4vw, 72px)",
        letterSpacing: "-0.025em",
        lineHeight: 1.02,
        margin: 0,
        color: INK,
      }}>
        {title}
      </h2>
      {summary && (
        <p style={{
          marginTop: 18,
          maxWidth: 720,
          fontSize: 17,
          lineHeight: 1.55,
          color: MUTED,
        }}>
          {summary}
        </p>
      )}
    </header>
  );
}

function SectionShell({ id, children }) {
  return (
    <section
      id={id}
      style={{
        padding: "96px 0 24px",
        borderTop: "1px solid rgba(237,233,224,0.06)",
        scrollMarginTop: 70,
      }}
    >
      {children}
    </section>
  );
}

function StatChip({ v, k }) {
  return (
    <div style={{
      padding: "10px 14px",
      border: BORDER,
      background: "rgba(237,233,224,0.02)",
      borderRadius: 4,
      fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    }}>
      <div style={{ fontSize: 20, color: ACCENT, fontWeight: 500, letterSpacing: "-0.01em" }}>{v}</div>
      <div style={{ fontSize: 10, color: DIM, letterSpacing: "0.16em", textTransform: "uppercase", marginTop: 4 }}>{k}</div>
    </div>
  );
}

function Pill({ children }) {
  return (
    <span style={{
      fontFamily: "'JetBrains Mono', ui-monospace, monospace",
      fontSize: 10.5,
      letterSpacing: "0.12em",
      textTransform: "uppercase",
      color: "rgba(237,233,224,0.7)",
      border: "1px solid rgba(237,233,224,0.14)",
      padding: "4px 9px",
      borderRadius: 3,
    }}>
      {children}
    </span>
  );
}

function EvidenceGrid({ items }) {
  if (!Array.isArray(items) || items.length === 0) return null;

  return (
    <div style={{
      marginTop: 22,
      display: "grid",
      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
      gap: 12,
    }}>
      {items.map((item) => (
        <a
          key={item.src}
          href={item.src}
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: "block",
            border: BORDER,
            borderRadius: 6,
            overflow: "hidden",
            background: "rgba(4,4,5,0.5)",
            textDecoration: "none",
          }}
        >
          <img
            src={item.src}
            alt={item.alt || item.label}
            loading="lazy"
            style={{
              width: "100%",
              aspectRatio: "16 / 10",
              objectFit: "contain",
              display: "block",
              background: "rgba(237,233,224,0.96)",
            }}
          />
          <div style={{
            padding: "8px 10px",
            borderTop: "1px solid rgba(237,233,224,0.08)",
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: 10,
            letterSpacing: "0.16em",
            textTransform: "uppercase",
            color: "rgba(237,233,224,0.58)",
          }}>
            {item.label}
          </div>
        </a>
      ))}
    </div>
  );
}

function resolveEndDate(item) {
  return item.end || new Date().toISOString().slice(0, 10);
}

function dateToMs(dateString) {
  return new Date(dateString).getTime();
}

function formatGanttDate(dateString) {
  return new Date(dateString).toLocaleDateString("en-US", { month: "short", year: "numeric" });
}

function formatExperienceRange(startDate, endDate) {
  return `${formatGanttDate(startDate)} - ${endDate ? formatGanttDate(endDate) : "Present"}`;
}

function isUpcomingExperience(startDate) {
  return dateToMs(startDate) > Date.now();
}

function buildExperienceRows(item) {
  if (Array.isArray(item.segments) && item.segments.length > 0) {
    return item.segments.map((segment) => ({
      id: item.id,
      title: segment.title,
      start: segment.start,
      end: segment.end,
      org: item.where,
      location: item.location,
      color: item.color,
    }));
  }

  return [{
    id: item.id,
    title: item.role,
    start: item.start,
    end: item.end,
    org: item.where,
    location: item.location,
    color: item.color,
  }];
}

function ExperienceLogo({ src, alt, hovered }) {
  return (
    <img
      src={src}
      alt={alt}
      style={{
        width: 48,
        height: 48,
        borderRadius: 8,
        objectFit: "contain",
        flexShrink: 0,
        background: "#fff",
        padding: 4,
        cursor: "pointer",
        transform: hovered ? "scale(1.15) rotate(-3deg)" : "none",
        boxShadow: hovered ? "0 0 18px rgba(99,102,241,0.45), 0 4px 14px rgba(0,0,0,0.2)" : "none",
        filter: hovered ? "brightness(1.08)" : "none",
        transition: "transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 350ms ease, filter 350ms ease",
      }}
    />
  );
}

function ExperienceGantt({ items }) {
  const [activeBarKey, setActiveBarKey] = React.useState("");
  const [tooltip, setTooltip] = React.useState(null);
  const tooltipRef = React.useRef(null);
  const orderedItems = [...items].sort((leftItem, rightItem) => dateToMs(rightItem.start) - dateToMs(leftItem.start));
  const timelineStart = dateToMs("2021-05-01");
  const today = new Date();
  const timelineEnd = new Date(today.getFullYear() + 1, 0, 1).getTime();
  const total = timelineEnd - timelineStart;
  const barMargin = 10;
  const barHeight = 12;
  const chartHeight = (orderedItems.length * (barHeight + barMargin)) + 40;
  const years = [];

  for (let year = 2022; year <= today.getFullYear() + 1; year += 1) {
    const left = ((new Date(year, 0, 1).getTime() - timelineStart) / total) * 100;
    if (left >= 0 && left <= 100) years.push({ year, left });
  }

  const updateTooltip = (event, payload) => {
    const tooltipWidth = tooltipRef.current?.offsetWidth ?? 250;
    const tooltipHeight = tooltipRef.current?.offsetHeight ?? 92;
    let left = event.clientX + 15;
    let top = event.clientY + 15;

    if (left + tooltipWidth > window.innerWidth - 10) {
      left = event.clientX - tooltipWidth - 15;
    }

    if (top + tooltipHeight > window.innerHeight - 10) {
      top = event.clientY - tooltipHeight - 15;
    }

    setTooltip({
      ...payload,
      left: Math.max(10, left),
      top: Math.max(10, top),
    });
  };

  const hideTooltip = () => {
    setActiveBarKey("");
    setTooltip(null);
  };

  return (
    <div style={{
      marginBottom: 36,
      border: BORDER,
      borderRadius: 8,
      background: "rgba(237,233,224,0.02)",
      overflow: "hidden",
    }}>
      <div style={{ overflowX: "auto" }}>
        <div style={{ minWidth: 960, padding: "18px" }}>
          <div style={{ position: "relative", height: chartHeight }}>
            {years.map(({ year, left }) => (
              <div
                key={year}
                style={{
                  position: "absolute",
                  top: 0,
                  bottom: 0,
                  left: `${left}%`,
                  borderLeft: "1px dashed rgba(237,233,224,0.12)",
                }}
              >
                <span style={{
                  position: "absolute",
                  top: 2,
                  transform: "translateX(-50%)",
                  fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                  fontSize: 10,
                  color: "rgba(237,233,224,0.42)",
                }}>
                  {year}
                </span>
              </div>
            ))}

            {orderedItems.map((item, index) => {
              const laneTop = 25 + index * (barHeight + barMargin);
              const rows = buildExperienceRows(item);

              return rows.map((row, rowIndex) => {
                const start = dateToMs(row.start);
                const end = dateToMs(resolveEndDate(row));
                const left = ((start - timelineStart) / total) * 100;
                const width = Math.max(0.6, ((end - start) / total) * 100);
                const isFirstSegment = rowIndex === 0;
                const isLastSegment = rowIndex === rows.length - 1;
                const isUpcoming = isUpcomingExperience(row.start);
                const barKey = `${item.id}-${row.title}-${row.start}`;
                const active = activeBarKey === barKey;
                const radius = rows.length === 1
                  ? "9999px"
                  : isFirstSegment
                    ? "9999px 0 0 9999px"
                    : isLastSegment
                      ? "0 9999px 9999px 0"
                      : "0";
                const tooltipPayload = {
                  key: barKey,
                  title: row.title,
                  org: row.org,
                  location: row.location,
                  color: row.color,
                  start: row.start,
                  end: row.end,
                };

                return (
                  <button
                    key={barKey}
                    type="button"
                    aria-label={`${row.title} at ${row.org}, ${formatExperienceRange(row.start, row.end)}`}
                    onMouseEnter={(event) => {
                      setActiveBarKey(barKey);
                      updateTooltip(event, tooltipPayload);
                    }}
                    onMouseMove={(event) => {
                      setActiveBarKey(barKey);
                      updateTooltip(event, tooltipPayload);
                    }}
                    onMouseLeave={hideTooltip}
                    onBlur={hideTooltip}
                    onClick={() => document.getElementById(`exp-${item.id}`)?.scrollIntoView({ behavior: "smooth", block: "center" })}
                    style={{
                      position: "absolute",
                      top: laneTop,
                      left: `${left}%`,
                      width: rows.length > 1 && !isLastSegment ? `calc(${width}% - 3px)` : `${width}%`,
                      height: barHeight,
                      padding: 0,
                      border: "none",
                      borderRadius: radius,
                      background: row.color,
                      cursor: "pointer",
                      animation: isUpcoming ? "bazGanttUpcomingPulse 2.8s ease-in-out infinite" : "none",
                      filter: active ? "brightness(1.15) saturate(1)" : "none",
                      transform: active ? "scaleY(1.25)" : "scaleY(1)",
                      transformOrigin: "center center",
                      transition: "filter 300ms ease, transform 300ms ease, box-shadow 300ms ease",
                      zIndex: active ? 10 : 1,
                    }}
                  />
                );
              });
            })}
          </div>
        </div>
      </div>

      {tooltip && (
        <div
          ref={tooltipRef}
          style={{
            position: "fixed",
            left: tooltip.left,
            top: tooltip.top,
            maxWidth: 250,
            padding: "12px 14px",
            borderRadius: 8,
            border: BORDER,
            background: "rgba(16,16,18,0.96)",
            boxShadow: "0 20px 48px rgba(0,0,0,0.38)",
            pointerEvents: "none",
            zIndex: 100,
          }}
        >
          <div style={{ fontSize: 13, fontWeight: 600, color: tooltip.color }}>{tooltip.title}</div>
          <div style={{ marginTop: 4, fontSize: 12, color: MUTED }}>{tooltip.org}</div>
          <div style={{ marginTop: 2, fontSize: 12, color: MUTED }}>{tooltip.location}</div>
          <div style={{
            marginTop: 8,
            fontFamily: "'JetBrains Mono', ui-monospace, monospace",
            fontSize: 10,
            letterSpacing: "0.08em",
            color: DIM,
            textTransform: "uppercase",
          }}>
            {formatExperienceRange(tooltip.start, tooltip.end)}
          </div>
        </div>
      )}
    </div>
  );
}

function ProjectDetails({ sections, summary = "more details" }) {
  if (!Array.isArray(sections) || sections.length === 0) return null;

  return (
    <details style={{ marginTop: 20 }}>
      <summary style={{
        cursor: "pointer",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: ACCENT,
        letterSpacing: "0.14em",
        textTransform: "uppercase",
        outline: "none",
      }}>
        {summary}
      </summary>
      <div style={{ marginTop: 14, display: "grid", gap: 16 }}>
        {sections.map((section) => (
          <div key={section.title} style={{
            padding: "16px 18px",
            border: BORDER,
            borderRadius: 6,
            background: "rgba(237,233,224,0.018)",
          }}>
            <h4 style={{
              margin: 0,
              fontFamily: "'Instrument Serif', Georgia, serif",
              fontWeight: 400,
              fontSize: 22,
              lineHeight: 1.15,
              color: INK,
            }}>
              {section.title}
            </h4>
            {section.body && (
              <p style={{ margin: "9px 0 0", maxWidth: 860, fontSize: 14, lineHeight: 1.65, color: MUTED }}>
                {section.body}
              </p>
            )}
            {Array.isArray(section.bullets) && (
              <ul style={{ margin: "10px 0 0", paddingLeft: 18, color: MUTED, fontSize: 14, lineHeight: 1.7 }}>
                {section.bullets.map((bullet) => <li key={bullet}>{bullet}</li>)}
              </ul>
            )}
            {section.code && (
              <pre style={{
                margin: "12px 0 0",
                padding: "12px 14px",
                borderRadius: 6,
                overflowX: "auto",
                background: "rgba(4,4,5,0.72)",
                border: "1px solid rgba(237,233,224,0.1)",
                color: "rgba(237,233,224,0.78)",
                fontFamily: "'JetBrains Mono', ui-monospace, monospace",
                fontSize: 12,
                lineHeight: 1.55,
              }}>
                <code>{section.code}</code>
              </pre>
            )}
          </div>
        ))}
      </div>
    </details>
  );
}

function ResultsSection() {
  const { COMPETITIONS } = window;

  return (
    <SectionShell id="results">
      <SectionHeader
        cmd="cat"
        path="results.json"
        title="Results."
      />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 12 }}>
        {COMPETITIONS.map((competition, index) => (
          <article
            key={competition.name}
            style={{
              position: "relative",
              padding: "18px 20px",
              border: BORDER,
              borderRadius: 6,
              background: "rgba(237,233,224,0.015)",
              overflow: "hidden",
            }}
          >
            <div aria-hidden style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 1, background: competition.color || ACCENT, opacity: 0.7 }} />
            <div style={{
              display: "flex",
              justifyContent: "space-between",
              gap: 10,
              flexWrap: "wrap",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              letterSpacing: "0.12em",
              textTransform: "uppercase",
              color: DIM,
            }}>
              <span>{competition.when}</span>
              <span>{String(index + 1).padStart(2, "0")}</span>
            </div>
            <div style={{
              marginTop: 12,
              fontFamily: "'Instrument Serif', serif",
              fontWeight: 400,
              fontSize: 22,
              lineHeight: 1.1,
              letterSpacing: "-0.01em",
              color: INK,
            }}>
              {competition.name}
            </div>
            <div style={{
              marginTop: 14,
              display: "flex",
              alignItems: "baseline",
              justifyContent: "space-between",
              gap: 16,
              flexWrap: "wrap",
            }}>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 24,
                letterSpacing: "-0.03em",
                color: competition.color || ACCENT,
              }}>
                {competition.headline}
              </div>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 10,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                color: DIM,
              }}>
                result
              </div>
            </div>
            <div style={{
              marginTop: 8,
              fontSize: 13,
              lineHeight: 1.55,
              color: MUTED,
              maxWidth: 440,
            }}>
              {competition.detail}
            </div>
          </article>
        ))}
      </div>
    </SectionShell>
  );
}

function WorkSection() {
  const { WORK } = window;
  const [hoveredWorkId, setHoveredWorkId] = React.useState("");

  return (
    <SectionShell id="work">
      <SectionHeader
        cmd="cat"
        path="experience.json"
        title="Work."
        summary="A three-year drift from satellites and compressors toward markets."
      />

      <ExperienceGantt items={WORK} />

      <div style={{ position: "relative", paddingLeft: 28, borderLeft: "1px solid rgba(237,233,224,0.12)" }}>
        {WORK.map((work, index) => (
          <article
            key={work.id}
            id={`exp-${work.id}`}
            onMouseEnter={() => setHoveredWorkId(work.id)}
            onMouseLeave={() => setHoveredWorkId("")}
            style={{
              position: "relative",
              padding: "0 0 34px",
              animation: "bazFadeIn 420ms ease-out both",
              animationDelay: `${index * 30}ms`,
            }}
          >
            <span style={{
              position: "absolute",
              left: -34,
              top: 6,
              width: 12,
              height: 12,
              display: "grid",
              placeItems: "center",
              color: work.color || (work.tag === "now" ? ACCENT : work.tag === "incoming" ? "#22c55e" : "rgba(237,233,224,0.5)"),
              transform: hoveredWorkId === work.id ? "scale(1.2)" : "scale(1)",
              transition: "transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease",
              boxShadow: hoveredWorkId === work.id ? `0 0 12px ${work.color || ACCENT}` : "none",
            }}>
              <span style={{
                width: "100%",
                height: "100%",
                borderRadius: 999,
                background: work.color || (work.tag === "now" ? ACCENT : work.tag === "incoming" ? "#22c55e" : "rgba(237,233,224,0.5)"),
                animation: isUpcomingExperience(work.start) ? "bazPendingDotPulse 2.8s ease-in-out infinite" : "none",
              }} />
            </span>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              color: work.color || (work.tag === "now" ? ACCENT : work.tag === "incoming" ? "#22c55e" : DIM),
              letterSpacing: "0.12em",
              textTransform: "uppercase",
              display: "flex",
              gap: 12,
              alignItems: "center",
              flexWrap: "wrap",
            }}>
              <span style={{ animation: isUpcomingExperience(work.start) ? "bazPendingDatePulse 2.8s ease-in-out infinite" : "none" }}>{work.when}</span>
              {work.tag && (
                <span style={{
                  padding: "1px 7px",
                  borderRadius: 3,
                  border: `1px solid ${work.color || (work.tag === "now" ? "rgba(110,231,244,0.35)" : work.tag === "incoming" ? "rgba(34,197,94,0.35)" : "rgba(237,233,224,0.18)")}`,
                  fontSize: 9,
                }}>
                  {work.tag}
                </span>
              )}
              {work.location && <span style={{ color: "rgba(237,233,224,0.42)" }}>{work.location}</span>}
            </div>
            <div style={{ marginTop: 8, display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "center" }}>
              {work.logo && (
                <ExperienceLogo src={work.logo} alt={`${work.where} logo`} hovered={hoveredWorkId === work.id} />
              )}
              <div style={{ minWidth: 0 }}>
                <h3 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontWeight: 400,
                  fontSize: 28,
                  lineHeight: 1.1,
                  margin: 0,
                  color: INK,
                  letterSpacing: "-0.01em",
                }}>
                  {work.role}
                </h3>
                <div style={{ marginTop: 4, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, color: MUTED, letterSpacing: "0.04em" }}>{work.where}</div>
              </div>
            </div>
            {work.body && <p style={{ marginTop: 10, marginBottom: 0, maxWidth: 780, fontSize: 15, lineHeight: 1.58, color: MUTED }}>{work.body}</p>}
            {Array.isArray(work.bullets) && work.bullets.length > 0 && (
              <ul style={{ margin: "12px 0 0", paddingLeft: 18, maxWidth: 820, color: MUTED, fontSize: 14, lineHeight: 1.72 }}>
                {work.bullets.map((bullet) => <li key={bullet}>{bullet}</li>)}
              </ul>
            )}
            {Array.isArray(work.segments) && work.segments.length > 0 && (
              <div style={{ marginTop: 14, display: "grid", gap: 9, maxWidth: 680 }}>
                {work.segments.map((segment) => (
                  <div key={segment.title} style={{
                    display: "grid",
                    gridTemplateColumns: "auto 1fr auto",
                    gap: 10,
                    alignItems: "baseline",
                    color: MUTED,
                    fontSize: 13,
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: 999, background: work.color, alignSelf: "center" }} />
                    <span style={{ color: INK }}>{segment.title}</span>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "rgba(237,233,224,0.45)" }}>
                      {formatGanttDate(segment.start)} - {segment.end ? formatGanttDate(segment.end) : "Present"}
                    </span>
                  </div>
                ))}
              </div>
            )}
          </article>
        ))}
      </div>
    </SectionShell>
  );
}

function ProjectsSection() {
  const { PROJECTS } = window;
  const { HedgeRLDemo, HoopsProfileSummary, BlackScholesPlayground } = window;

  return (
    <SectionShell id="projects">
      <SectionHeader
        cmd="ls"
        path="~/projects"
        title="Projects."
        summary="A couple I had fun working on."
      />

      <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        {PROJECTS.map((project, index) => (
          <article
            key={project.id}
            id={`project-${project.id}`}
            style={{
              border: BORDER,
              borderRadius: 6,
              background: "rgba(237,233,224,0.02)",
              padding: "30px 32px",
              animation: "bazFadeIn 420ms ease-out both",
              animationDelay: `${index * 60}ms`,
            }}
          >
            <header style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 14 }}>
              <div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 10,
                  letterSpacing: "0.22em",
                  textTransform: "uppercase",
                  color: ACCENT,
                  marginBottom: 6,
                }}>
                  project {String(index + 1).padStart(2, "0")}{project.status ? ` · ${project.status}` : ""}
                </div>
                <h3 style={{
                  fontFamily: "'Instrument Serif', serif",
                  fontWeight: 400,
                  fontSize: 36,
                  lineHeight: 1.05,
                  margin: 0,
                  color: INK,
                  letterSpacing: "-0.02em",
                }}>
                  {project.name}
                </h3>
              </div>
              <a
                href={`https://github.com/${project.repo}`}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 12,
                  color: ACCENT,
                  textDecoration: "none",
                  borderBottom: `1px solid ${ACCENT}`,
                  paddingBottom: 1,
                }}
              >
                github.com/{project.repo} →
              </a>
            </header>

            <p style={{ marginTop: 18, maxWidth: 780, fontSize: 15.5, lineHeight: 1.6, color: MUTED }}>{project.blurb}</p>

            {Array.isArray(project.highlights) && project.highlights.length > 0 && (
              <ul style={{ margin: "14px 0 0", paddingLeft: 18, maxWidth: 840, color: MUTED, fontSize: 14, lineHeight: 1.72 }}>
                {project.highlights.map((highlight) => <li key={highlight}>{highlight}</li>)}
              </ul>
            )}

            <div style={{
              marginTop: 20,
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
              gap: 10,
            }}>
              {project.stats.map((stat) => <StatChip key={stat.k} v={stat.v} k={stat.k} />)}
            </div>

            <div style={{ marginTop: 20, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {project.methods.map((method) => <Pill key={method}>{method}</Pill>)}
            </div>

            <EvidenceGrid items={project.visuals} />

            {project.id === "hedgerl" && (
              <details style={{ marginTop: 20 }} open>
                <summary style={{
                  cursor: "pointer",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  color: ACCENT,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  outline: "none",
                }}>
                  live rBergomi stream
                </summary>
                <HedgeRLDemo />
              </details>
            )}

            {project.id === "hoops" && (
              <details style={{ marginTop: 20 }} open>
                <summary style={{
                  cursor: "pointer",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  color: ACCENT,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  outline: "none",
                }}>
                  profile comparison
                </summary>
                <HoopsProfileSummary />
              </details>
            )}

            {project.id === "pricer" && (
              <details style={{ marginTop: 20 }}>
                <summary style={{
                  cursor: "pointer",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  color: ACCENT,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  outline: "none",
                }}>
                  Black-Scholes playground
                </summary>
                <BlackScholesPlayground />
              </details>
            )}

            <ProjectDetails sections={project.detailSections} />

            {project.notes && (
              <details style={{ marginTop: 20 }}>
                <summary style={{
                  cursor: "pointer",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  color: ACCENT,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  outline: "none",
                }}>
                  setup + caveats
                </summary>
                <p style={{ marginTop: 12, maxWidth: 780, fontSize: 14, lineHeight: 1.65, color: MUTED }}>{project.notes}</p>
              </details>
            )}
          </article>
        ))}
      </div>
    </SectionShell>
  );
}

function ResearchSection() {
  const { RESEARCH } = window;

  return (
    <SectionShell id="research">
      <SectionHeader cmd="open" path="paper.pdf" title="Research." summary={RESEARCH.abstract} />

      <div style={{
        padding: "28px 32px",
        border: BORDER,
        borderRadius: 6,
        background: "rgba(237,233,224,0.02)",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: "0.22em",
          textTransform: "uppercase",
          color: ACCENT,
        }}>
          {RESEARCH.venue}
        </div>
        <h3 style={{
          fontFamily: "'Instrument Serif', serif",
          fontWeight: 400,
          fontSize: 32,
          lineHeight: 1.1,
          margin: "8px 0 20px",
          letterSpacing: "-0.015em",
          color: INK,
        }}>
          {RESEARCH.title}
        </h3>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
          gap: 10,
          marginBottom: RESEARCH.numbersNote ? 8 : 26,
        }}>
          {RESEARCH.numbers.map((number) => <StatChip key={number.k} v={number.v} k={number.k} />)}
        </div>
        {RESEARCH.numbersNote && (
          <p style={{
            margin: "0 0 26px",
            maxWidth: 920,
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
            lineHeight: 1.55,
            color: DIM,
          }}>
            {RESEARCH.numbersNote}
          </p>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
          {RESEARCH.findings.map((finding) => (
            <div key={finding.h} style={{ paddingLeft: 14, borderLeft: `2px solid ${ACCENT}` }}>
              <div style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontSize: 19,
                lineHeight: 1.25,
                color: INK,
                marginBottom: 6,
              }}>
                → {finding.h}
              </div>
              <div style={{ fontSize: 14, lineHeight: 1.55, color: MUTED }}>{finding.b}</div>
            </div>
          ))}
        </div>

        <EvidenceGrid items={RESEARCH.visuals} />

        {Array.isArray(RESEARCH.implications) && RESEARCH.implications.length > 0 && (
          <div style={{ marginTop: 30 }}>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: DIM,
              marginBottom: 12,
            }}>
              Trading implications
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 12 }}>
              {RESEARCH.implications.map((item) => (
                <div key={item.h} style={{
                  padding: "15px 16px",
                  border: BORDER,
                  borderRadius: 6,
                  background: "rgba(110,231,244,0.025)",
                }}>
                  <div style={{
                    fontFamily: "'Instrument Serif', Georgia, serif",
                    fontStyle: "italic",
                    fontSize: 20,
                    lineHeight: 1.2,
                    color: INK,
                    marginBottom: 7,
                  }}>
                    {item.h}
                  </div>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: MUTED }}>{item.b}</p>
                </div>
              ))}
            </div>
          </div>
        )}

        <ProjectDetails sections={RESEARCH.detailSections} summary="full methods, reproducibility, limitations" />

        <div style={{ marginTop: 28, display: "flex", gap: 20, flexWrap: "wrap", fontFamily: "'JetBrains Mono', monospace", fontSize: 12 }}>
          <a href={RESEARCH.pdf} target="_blank" rel="noopener noreferrer" style={{ color: ACCENT, textDecoration: "none", borderBottom: `1px solid ${ACCENT}` }}>read the paper →</a>
          <a href={`https://github.com/${RESEARCH.repo}`} target="_blank" rel="noopener noreferrer" style={{ color: ACCENT, textDecoration: "none", borderBottom: `1px solid ${ACCENT}` }}>data & code →</a>
        </div>
      </div>
    </SectionShell>
  );
}

function SkillsSection({ companyConfig }) {
  const { DEFAULT_TOP_SKILLS, DEFAULT_FULL_SKILLS_LIST, SkillsExperienceMap, SkillsCatalog } = window;
  const topSkills = Array.isArray(companyConfig?.topSkills) && companyConfig.topSkills.length > 0
    ? companyConfig.topSkills
    : DEFAULT_TOP_SKILLS;
  const skillsGraph = companyConfig?.skillsVisualizer?.skillsData;
  const fullSkillsList = companyConfig?.skillsVisualizer?.fullSkillsList || DEFAULT_FULL_SKILLS_LIST;

  return (
    <SectionShell id="skills">
      <SectionHeader
        cmd="tree"
        path="skills/"
        title="Skills."
        summary={companyConfig
          ? `A fuller skills view for ${companyConfig.company}. The graph is the compressed version; the catalog underneath is the long one.`
          : "Full map plus searchable catalog. The graph is the compressed version; the catalog keeps the long tail visible."}
      />

      <div data-skills-layout="true" style={{
        display: "grid",
        gridTemplateColumns: "minmax(280px, 360px) 1fr",
        gap: 22,
        alignItems: "start",
      }}>
        <aside style={{
          border: BORDER,
          borderRadius: 8,
          background: "rgba(237,233,224,0.02)",
          padding: "20px 22px",
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            color: DIM,
            marginBottom: 14,
          }}>
            top of stack
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 18 }}>
            {topSkills.map((skill) => <Pill key={skill}>{skill}</Pill>)}
          </div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.65, color: MUTED }}>
            The short version stays visible here. The map on the right shows where the skill clusters came from, and the catalog below preserves the longer tail that the pared-down redesign hid.
          </p>
        </aside>

        <SkillsExperienceMap skillsData={skillsGraph} />
      </div>

      <div style={{ marginTop: 22 }}>
        <SkillsCatalog fullSkillsList={fullSkillsList} />
      </div>
    </SectionShell>
  );
}

function AboutSection() {
  const { ABOUT_BULLETS, FACTS } = window;

  return (
    <SectionShell id="about">
      <SectionHeader cmd="whoami" title="About." summary="The short version." />

      <div data-about-grid="true" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "start" }}>
        <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 24, lineHeight: 1.45, color: "rgba(237,233,224,0.86)" }}>
          {ABOUT_BULLETS.map((bullet, index) => (
            <p key={index} style={{ marginTop: index === 0 ? 0 : 22, marginBottom: 0 }}>
              <span style={{ color: ACCENT, fontFamily: "'JetBrains Mono', monospace", fontSize: 14, marginRight: 12 }}>{String(index + 1).padStart(2, "0")}</span>
              {bullet}
            </p>
          ))}
        </div>

        <aside style={{
          border: BORDER,
          borderRadius: 6,
          padding: "22px 24px",
          background: "rgba(237,233,224,0.02)",
        }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            color: DIM,
            marginBottom: 14,
          }}>
            facts
          </div>
          <dl style={{ margin: 0, display: "grid", gap: 12 }}>
            {FACTS.map((fact) => (
              <div key={fact.k} style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 14, alignItems: "baseline" }}>
                <dt style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  letterSpacing: "0.12em",
                  textTransform: "uppercase",
                  color: DIM,
                }}>
                  {fact.k}
                </dt>
                <dd style={{ margin: 0, fontSize: 15, color: INK, fontFamily: "'Instrument Serif', serif", fontStyle: "italic" }}>{fact.v}</dd>
              </div>
            ))}
          </dl>
        </aside>
      </div>
    </SectionShell>
  );
}

function ContactSection() {
  const links = [
    { label: "email", value: "bcosm@umich.edu", href: "mailto:bcosm@umich.edu" },
    { label: "github", value: "github.com/bcosm", href: "https://github.com/bcosm" },
    { label: "linkedin", value: "in/baz-cosmopoulos", href: "https://www.linkedin.com/in/baz-cosmopoulos/" },
    { label: "résumé", value: "Cosmopoulos-Trading.pdf", href: "/downloads/Cosmopoulos-Trading.pdf" },
  ];

  return (
    <SectionShell id="contact">
      <SectionHeader cmd="echo" path="$CONTACT" title="Slide into my DMs." summary="I will respond to literally anything." />

      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 14 }}>
        {links.map((link) => (
          <a
            key={link.label}
            href={link.href}
            target={link.href.startsWith("mailto") ? "_self" : "_blank"}
            rel="noopener noreferrer"
            style={{
              textDecoration: "none",
              padding: "20px 22px",
              border: BORDER,
              borderRadius: 6,
              background: "rgba(237,233,224,0.02)",
              display: "block",
              transition: "border-color 180ms ease, background 180ms ease",
            }}
            onMouseEnter={(event) => {
              event.currentTarget.style.borderColor = "rgba(110,231,244,0.38)";
              event.currentTarget.style.background = "rgba(110,231,244,0.05)";
            }}
            onMouseLeave={(event) => {
              event.currentTarget.style.borderColor = "rgba(237,233,224,0.1)";
              event.currentTarget.style.background = "rgba(237,233,224,0.02)";
            }}
          >
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 10,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: ACCENT,
              marginBottom: 8,
            }}>
              {link.label}
            </div>
            <div style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 22,
              lineHeight: 1.15,
              color: INK,
              letterSpacing: "-0.01em",
            }}>
              {link.value}
            </div>
          </a>
        ))}
      </div>

      <div style={{
        marginTop: 40,
        padding: "24px 28px",
        border: "1px dashed rgba(237,233,224,0.16)",
        borderRadius: 6,
        fontFamily: "'Instrument Serif', serif",
        fontStyle: "italic",
        fontSize: 22,
        lineHeight: 1.4,
        color: "rgba(237,233,224,0.8)",
        maxWidth: 760,
      }}>
        "If in doubt, just ask the AI in the corner."
      </div>
    </SectionShell>
  );
}

Object.assign(window, { ResultsSection, WorkSection, ProjectsSection, ResearchSection, SkillsSection, AboutSection, ContactSection });