// About page — interactive life-arc chart + full bio.
// Exposes window.AboutPageContent (used by app.jsx's AboutPage).

(function() {
  var useState = React.useState, useMemo = React.useMemo;

  function isMobileNow() { return window.innerWidth <= 768; }
  function useMobile() {
    var s = useState(isMobileNow());
    React.useEffect(function() {
      function h() { s[1](isMobileNow()); }
      window.addEventListener("resize", h);
      return function() { window.removeEventListener("resize", h); };
    }, []);
    return s[0];
  }

  // ════════════════ Life-arc chart ════════════════
  function LifeArcChart() {
    var mobile = useMobile();
    var tracks = window.ARC_TRACKS, series = window.ARC_SERIES,
        steep = window.ARC_STEEP, detail = window.ARC_DETAIL;
    var years = series.map(function(r) { return r[0]; });
    var firstYear = years[0], lastYear = years[years.length - 1];

    var sel = useState(2026);            // selected year
    var selectedYear = sel[0], setYear = sel[1];
    var hov = useState(null);
    var hoverYear = hov[0], setHover = hov[1];
    var off = useState({});              // toggled-off tracks
    var hidden = off[0], setHidden = off[1];

    // SVG geometry
    var W = 1000, H = 470, padL = 46, padR = 62, padT = 22, padB = 46;
    var n = series.length;
    var EXT = 44; // px the lines trail off past the last year, signalling "still in motion"
    function xAt(i) { return padL + (i / (n - 1)) * (W - padL - padR - EXT); }
    function yAt(v) { return (H - padB) - (v / 10) * (H - padB - padT); }
    var activeYear = hoverYear != null ? hoverYear : selectedYear;
    var activeIdx = years.indexOf(activeYear);

    function lineFor(tIdx) {
      return series.map(function(r, i) { return xAt(i) + "," + yAt(r[tIdx + 1]); }).join(" ");
    }

    var d = detail[activeYear] || {};
    var activeRow = series[activeIdx] || [];

    var legendChip = function(t, i) {
      var isOff = hidden[t.id];
      return (
        <button key={t.id} onClick={function() {
          var nx = Object.assign({}, hidden); nx[t.id] = !isOff; setHidden(nx);
        }} style={{
          display: "inline-flex", alignItems: "center", gap: 7, background: "none",
          border: 0, padding: "3px 2px", cursor: "pointer", opacity: isOff ? 0.38 : 1,
          fontFamily: "var(--sans)", fontSize: mobile ? 12 : 13, color: "var(--ink-2)" }}>
          <span style={{ width: 13, height: 13, borderRadius: 3, background: t.color,
            flexShrink: 0, textDecoration: isOff ? "line-through" : "none" }} />
          <span style={{ textDecoration: isOff ? "line-through" : "none" }}>{t.label}</span>
        </button>
      );
    };

    return (
      <div>
        {/* legend */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: mobile ? 12 : 22, marginBottom: 6 }}>
          {tracks.map(legendChip)}
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7,
            fontFamily: "var(--sans)", fontSize: mobile ? 12 : 13, color: "var(--ink-2)" }}>
            <span style={{ width: 13, height: 13, borderRadius: 999, border: "2px dashed var(--accent)", flexShrink: 0 }} />
            Steep / challenging phase
          </span>
        </div>

        {/* usage note — placed above the chart, right after the legend */}
        <div style={{ fontFamily: "var(--sans)", fontSize: mobile ? 13 : 14, color: "var(--ink-2)",
          marginBottom: 18 }}>
          Hover over any year for details · click a legend category above to show or hide it.
        </div>

        {/* chart */}
        <div style={{ width: "100%", overflowX: mobile ? "auto" : "visible" }}>
          <svg viewBox={"0 0 " + W + " " + H} width="100%"
            style={{ minWidth: mobile ? 640 : "auto", display: "block" }}
            preserveAspectRatio="xMidYMid meet">
            {/* horizontal gridlines */}
            {[0, 2, 4, 6, 8, 10].map(function(g) {
              return (
                <g key={g}>
                  <line x1={padL} y1={yAt(g)} x2={W - padR} y2={yAt(g)}
                    stroke="var(--rule-2)" strokeWidth="1" />
                  <text x={padL - 10} y={yAt(g) + 4} textAnchor="end"
                    fontFamily="var(--mono)" fontSize="12" fill="var(--ink-3)">{g}</text>
                </g>
              );
            })}

            {/* active-year highlight band */}
            {activeIdx >= 0 && (
              <line x1={xAt(activeIdx)} y1={padT - 6} x2={xAt(activeIdx)} y2={H - padB}
                stroke="var(--ink)" strokeWidth="1" opacity="0.16" />
            )}

            {/* steep-phase dashed verticals */}
            {steep.map(function(yr) {
              var i = years.indexOf(yr); if (i < 0) return null;
              return <line key={yr} x1={xAt(i)} y1={padT - 6} x2={xAt(i)} y2={H - padB}
                stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="5 5" opacity="0.85" />;
            })}

            {/* x labels */}
            {years.map(function(yr, i) {
              if (mobile && i % 2 !== 0 && yr !== activeYear) return null;
              return <text key={yr} x={xAt(i)} y={H - padB + 20} textAnchor="middle"
                fontFamily="var(--mono)" fontSize={mobile ? 11 : 12}
                fill={yr === activeYear ? "var(--ink)" : "var(--ink-3)"}
                fontWeight={yr === activeYear ? 700 : 400}>{yr}</text>;
            })}

            {/* track lines + dots */}
            {tracks.map(function(t, ti) {
              if (hidden[t.id]) return null;
              var lastX = xAt(n - 1), lastY = yAt(series[n - 1][ti + 1]);
              return (
                <g key={t.id}>
                  <polyline points={lineFor(ti)} fill="none" stroke={t.color}
                    strokeWidth="2.5" strokeLinejoin="round" strokeLinecap="round" />
                  <line x1={lastX} y1={lastY} x2={lastX + EXT} y2={lastY}
                    stroke={t.color} strokeWidth="2" strokeDasharray="1 4"
                    strokeLinecap="round" opacity="0.4" />
                  {series.map(function(r, i) {
                    var on = i === activeIdx;
                    return <circle key={i} cx={xAt(i)} cy={yAt(r[ti + 1])}
                      r={on ? 5 : 3} fill={on ? t.color : "var(--paper)"}
                      stroke={t.color} strokeWidth="2" />;
                  })}
                </g>
              );
            })}

            {/* "still in motion" cue past the last year */}
            <text x={xAt(n - 1) + EXT + 8} y={padT + 6} textAnchor="start"
              fontFamily="var(--serif)" fontStyle="italic" fontSize="13" fill="var(--ink-3)">
              &#8230;continuing
            </text>

            {/* hit columns */}
            {years.map(function(yr, i) {
              var w = (W - padL - padR) / (n - 1);
              return <rect key={yr} x={xAt(i) - w / 2} y={padT - 6} width={w} height={H - padB - padT + 6}
                fill="transparent" style={{ cursor: "pointer" }}
                onMouseEnter={function() { setHover(yr); }}
                onMouseLeave={function() { setHover(null); }}
                onClick={function() { setYear(yr); }} />;
            })}
          </svg>
        </div>

        {/* detail panel */}
        <div style={{ marginTop: 16, background: "var(--paper-2)", borderRadius: 10,
          padding: mobile ? "18px 18px" : "22px 26px", borderLeft: "3px solid " +
          (steep.indexOf(activeYear) >= 0 ? "var(--accent)" : "var(--ink)") }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap", marginBottom: 18 }}>
            <span style={{ fontFamily: "var(--serif)", fontSize: mobile ? 28 : 34,
              fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.01em" }}>{activeYear}</span>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.1em",
              textTransform: "uppercase", color: steep.indexOf(activeYear) >= 0 ? "var(--accent)" : "var(--ink-3)",
              fontWeight: 600 }}>{d.era || ""}</span>
            <span style={{ marginLeft: "auto", display: "flex", gap: 10, flexWrap: "wrap" }}>
              {tracks.map(function(t, ti) {
                return <span key={t.id} title={t.label} style={{ display: "inline-flex", alignItems: "center",
                  gap: 5, fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>
                  <span style={{ width: 9, height: 9, borderRadius: 2, background: t.color }} />
                  {activeRow[ti + 1]}
                </span>;
              })}
            </span>
          </div>
          {(d.theme || d.company) && (
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 22 }}>
              {d.theme && (
                <span style={{ display: "inline-flex", alignSelf: "flex-start", alignItems: "center",
                  fontFamily: "var(--serif)", fontStyle: "italic", fontSize: mobile ? 15 : 16.5,
                  color: "var(--accent)", background: "var(--accent-soft)", borderRadius: 6,
                  padding: "5px 14px" }}>{d.theme}</span>
              )}
              {d.company && (
                <div style={{ display: "flex", alignItems: "baseline", gap: 9 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.1em",
                    textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 700 }}>At</span>
                  <span style={{ fontFamily: "var(--sans)", fontSize: mobile ? 12.5 : 13, color: "var(--ink-2)" }}>
                    {d.company}{d.location ? " \u00b7 " + d.location : ""}
                  </span>
                </div>
              )}
            </div>
          )}

          <div style={{ display: mobile ? "block" : "grid",
            gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginBottom: d.comment ? 14 : 0 }}>
            {[["Primary", d.primary], ["Secondary", d.secondary], ["Soft skills", d.soft]].map(function(p, i) {
              if (!p[1]) return null;
              return (
                <div key={i} style={{ marginBottom: mobile ? 12 : 0 }}>
                  <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.1em",
                    textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 5,
                    fontWeight: 700 }}>{p[0]}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 15, lineHeight: 1.45,
                    color: "var(--ink)" }}>{p[1]}</div>
                </div>
              );
            })}
          </div>

          {d.comment && (
            <div style={{ fontFamily: "var(--serif)", fontSize: mobile ? 15 : 16.5,
              lineHeight: 1.55, fontStyle: "italic", color: "var(--ink-2)",
              borderTop: "1px solid var(--rule)", paddingTop: 12 }}>
              {d.comment}
            </div>
          )}
        </div>
      </div>
    );
  }

  window.LifeArcChart = LifeArcChart;
})();