// Selected work — expandable rows.

function Experience() {
  // Single source of truth for which row is open. Opening one closes the others.
  const [openId, setOpenId] = React.useState(null);

  return (
    <div
      style={{
        padding: "var(--space-6) var(--page-pad-x) var(--space-5)",
        borderTop: "1px solid rgba(var(--fg-rgb), 0.09)",
        marginTop: "auto",
      }}
    >
      {/* Connective beat from the calculator's percentage to the receipts.
          Reads as the lede of a short magazine piece, not a section header. */}
      <div
        style={{
          fontFamily: "var(--font-serif)",
          fontStyle: "italic",
          fontSize: 22,
          lineHeight: 1.3,
          opacity: 0.6,
          color: "var(--fg)",
          marginBottom: "var(--space-5)",
          maxWidth: 640,
        }}
      >
        How every filter got cleared.
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          marginBottom: "var(--space-3)",
        }}
      >
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: "0.22em",
            opacity: 0.55,
          }}
        >
          SELECTED · 2019—NOW
        </div>
        <div
          style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9,
            letterSpacing: "0.18em",
            opacity: 0.5,
          }}
        >
          CLICK ANY ROW TO EXPAND
        </div>
      </div>
      {window.PROJECTS.map((p, i) => (
        <ExperienceRow
          key={p.id}
          p={p}
          isOpen={openId === p.id}
          onToggle={() => setOpenId((cur) => (cur === p.id ? null : p.id))}
          last={i === window.PROJECTS.length - 1}
        />
      ))}
    </div>
  );
}

// Layout for both collapsed header + expanded panel lives in styles/responsive.css
// (.exp-row-header / .exp-row-expanded with media queries). At <1100px the
// stack column hides; at <700px the row stacks vertically with the toggle aside.
function ExperienceRow({ p, isOpen, onToggle }) {
  const [hover, setHover] = React.useState(false);
  const open = isOpen;

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        borderTop: "1px solid rgba(var(--fg-rgb), 0.07)",
        background:
          hover || open ? "rgba(var(--accent-rgb), 0.05)" : "transparent",
        transition: "background 0.2s",
      }}
    >
      <button
        onClick={onToggle}
        style={{
          all: "unset",
          cursor: "pointer",
          display: "block",
          width: "100%",
          boxSizing: "border-box",
          // 12px right keeps the toggle off the section edge; left-pad slides
          // by 8px on hover/open for the existing hover-shift effect.
          padding: hover || open ? "11px 12px 11px 20px" : "11px 12px",
          transition: "padding 0.2s",
        }}
      >
        <div className="exp-row-header" style={{ color: "var(--fg)" }}>
          <div
            className="exp-cell-year"
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              opacity: 0.55,
            }}
          >
            {p.year}
          </div>
          <div className="exp-cell-company">
            <div
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: 18,
                fontWeight: 400,
              }}
            >
              {p.company}
            </div>
            <div
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 9,
                opacity: 0.55,
                letterSpacing: "0.08em",
                marginTop: 1,
              }}
            >
              {p.role.toUpperCase()}
            </div>
          </div>
          <div
            className="exp-cell-fragments"
            style={{
              fontSize: 13,
              lineHeight: 1.45,
              opacity: 0.82,
              fontFamily: "var(--font-serif)",
              display: "flex",
              flexWrap: "wrap",
              gap: "0 6px",
            }}
          >
            {(p.fragments || [p.outcome].filter(Boolean)).map((frag, i) => (
              <span key={i} style={{ opacity: 0.88 }}>
                {frag}
              </span>
            ))}
          </div>
          <div
            className="exp-cell-stack"
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 9,
              opacity: 0.6,
              letterSpacing: "0.06em",
            }}
          >
            {p.stack.join(" · ")}
          </div>
          <div
            className="exp-cell-toggle"
            style={{
              color: "var(--accent)",
              textAlign: "right",
              fontFamily: "var(--font-mono)",
              fontSize: 16,
              lineHeight: 1,
              opacity: hover || open ? 1 : 0.65,
              transition: "opacity 0.2s, transform 0.2s",
              transform: hover && !open ? "translateX(2px)" : "none",
              userSelect: "none",
            }}
          >
            {open ? "–" : "+"}
          </div>
        </div>
      </button>

      <div
        style={{
          maxHeight: open ? 600 : 0,
          overflow: "hidden",
          transition: "max-height 0.45s cubic-bezier(0.22,0.9,0.3,1)",
        }}
      >
        <div
          className="exp-row-expanded"
          style={{
            padding: "0 0 18px",
            paddingLeft: hover || open ? 8 : 0,
            transition: "padding 0.2s",
          }}
        >
          <div
            className="exp-cell-bullets"
            style={{
              fontFamily: "var(--font-serif)",
              fontSize: 14.5,
              lineHeight: 1.55,
              color: "var(--fg)",
            }}
          >
            {(p.bullets || []).map((b, i) => (
              <div
                key={i}
                style={{
                  display: "flex",
                  gap: 10,
                  marginBottom: 8,
                  opacity: 0.88,
                }}
              >
                <span
                  style={{
                    color: "var(--accent)",
                    fontFamily: "var(--font-mono)",
                    fontSize: 11,
                    lineHeight: 1.7,
                    opacity: 0.7,
                  }}
                >
                  {String(i + 1).padStart(2, "0")}
                </span>
                <span style={{ flex: 1, textWrap: "pretty" }}>{b}</span>
              </div>
            ))}
            {p.url && (
              <a
                href={p.url}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-block",
                  marginTop: 6,
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.14em",
                  color: "var(--accent)",
                  textDecoration: "none",
                  borderBottom: "1px solid rgba(var(--accent-rgb), 0.33)",
                  paddingBottom: 1,
                }}
              >
                VISIT {p.company.toUpperCase()} ↗
              </a>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Experience = Experience;