// Leadership page — grid of headshots, click to open bio modal
// Matches homepage system: paper bg, italic display headlines, mono eyebrows, sketch underline

const LeadershipPage = () => {
  const [openId, setOpenId] = React.useState(null);
  const open = openId ? LEADERSHIP.find((p) => p.id === openId) : null;

  React.useEffect(() => {
    document.body.style.overflow = openId ? "hidden" : "";
    const onKey = (e) => { if (e.key === "Escape") setOpenId(null); };
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [openId]);

  return (
    <main style={{ background: "var(--paper)", paddingTop: 24, paddingBottom: 80 }}>
      {/* Header */}
      <section className="container r-page-head" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 24 }}>
          <span style={{ color: "var(--blue)" }}>◆</span>&nbsp;&nbsp;01 / Leadership
        </div>
        <div className="r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end" }}>
          <h1 className="display r-h2-massive" style={{
            fontSize: "clamp(80px, 11vw, 168px)",
            margin: 0,
            lineHeight: 0.88,
            letterSpacing: "-0.035em",
          }}>
            <span style={{ fontStyle: "italic", fontWeight: 500 }}>{copyText("leadership.title")}</span>
          </h1>
          <div>
            <div className="mono" style={{ color: "var(--blue)", marginBottom: 14 }}>↳ {copyText("leadership.kicker")}</div>
            <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink)", margin: 0, maxWidth: 540 }}>
              {copyText("leadership.intro")}
            </p>
          </div>
        </div>
      </section>

      <div className="container"><div className="hairline" /></div>

      {/* Grid */}
      <section className="container r-page-section" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40 }}>
          <span className="mono" style={{ color: "var(--muted)" }}>The team · {LEADERSHIP.length} leaders</span>
          <span className="mono" style={{ color: "var(--muted)" }}>↓ Click any portrait for bio</span>
        </div>
        <div
          className="r-grid-leadership"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            columnGap: 40,
            rowGap: 56,
          }}
        >
          {LEADERSHIP.map((p, i) => (
            <LeaderCard key={p.id} person={p} index={i} onOpen={() => setOpenId(p.id)} />
          ))}
        </div>
      </section>

      {/* Modal */}
      {open && <BioModal person={open} onClose={() => setOpenId(null)} />}
    </main>
  );
};

const LeaderCard = ({ person, index, onOpen }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "transparent",
        border: "none",
        padding: 0,
        textAlign: "left",
        cursor: "pointer",
        display: "block",
        width: "100%",
      }}
    >
      <div style={{
        position: "relative",
        background: "var(--paper-2)",
        aspectRatio: "1/1.15",
        overflow: "hidden",
        borderRadius: 4,
        marginBottom: 18,
        transition: "transform .35s ease",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
      }}>
        {/* Headshot — real photo if present, otherwise drop-target slot */}
        {person.photo ? (
          <img
            src={person.photo}
            alt={person.name}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(1) contrast(1.05)" }}
          />
        ) : (
          <image-slot
            id={`leader-${person.id}`}
            shape="rect"
            placeholder={`Drop ${person.name.split(" ")[0]}'s photo`}
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", filter: "grayscale(1) contrast(1.05)" }}
          ></image-slot>
        )}

        {/* Hover affordance */}
        <div style={{
          position: "absolute", bottom: 12, right: 12,
          background: "var(--blue)",
          color: "#fff",
          width: 36, height: 36, borderRadius: 999,
          display: "flex", alignItems: "center", justifyContent: "center",
          opacity: hover ? 1 : 0,
          transform: hover ? "translateY(0)" : "translateY(8px)",
          transition: "opacity .25s, transform .25s",
          zIndex: 2,
        }}>
          <Plus size={14} />
        </div>
      </div>
      <h3 style={{
        fontFamily: "var(--display)",
        fontWeight: 600,
        fontSize: 24,
        letterSpacing: "-0.015em",
        margin: "0 0 4px 0",
        color: "var(--ink)",
      }}>
        {person.name}
      </h3>
      <div style={{ fontSize: 13, color: "var(--muted)", lineHeight: 1.4 }}>
        {person.role}
      </div>
    </button>
  );
};

const BioModal = ({ person, onClose }) => {
  return ReactDOM.createPortal(
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      className="r-bio-modal"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 100,
        background: "rgba(10,10,15,0.86)",
        backdropFilter: "blur(6px)",
        WebkitBackdropFilter: "blur(6px)",
        overflowY: "auto",
        padding: "60px 32px",
        animation: "bio-fade-in .25s ease",
      }}
    >
      <style>{`
        @keyframes bio-fade-in { from { opacity: 0 } to { opacity: 1 } }
        @keyframes bio-slide-up { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
      `}</style>

      <button
        onClick={onClose}
        aria-label="Close bio"
        style={{
          position: "fixed",
          top: 24, right: 32,
          background: "transparent",
          border: "1px solid var(--rule-on-dark)",
          color: "#fff",
          width: 44, height: 44,
          borderRadius: 999,
          cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
          fontSize: 18,
          zIndex: 101,
        }}
      >
        ✕
      </button>

      <div
        onClick={(e) => e.stopPropagation()}
        className="r-bio-grid"
        style={{
          maxWidth: 1280,
          margin: "0 auto",
          display: "grid",
          gridTemplateColumns: "minmax(0, 460px) 1fr",
          gap: 72,
          alignItems: "start",
          color: "#fff",
          animation: "bio-slide-up .35s ease",
        }}
      >
        {/* Photo column */}
        <div>
          <div style={{
            position: "relative",
            background: "rgba(255,255,255,0.04)",
            aspectRatio: "1/1.15",
            overflow: "hidden",
            borderRadius: 4,
          }}>
            {person.photo ? (
              <img
                src={person.photo}
                alt={person.name}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(1)" }}
              />
            ) : (
              <image-slot
                id={`leader-${person.id}`}
                shape="rect"
                placeholder={`Drop ${person.name.split(" ")[0]}'s photo`}
                style={{ position: "absolute", inset: 0, width: "100%", height: "100%", filter: "grayscale(1)" }}
              ></image-slot>
            )}
          </div>
          <div className="mono" style={{ color: "var(--blue)", marginTop: 24, fontSize: 11 }}>↳ Leadership</div>
          <h2 className="r-bio-name" style={{
            fontFamily: "var(--display)",
            fontWeight: 600,
            fontSize: 40,
            letterSpacing: "-0.02em",
            lineHeight: 1.05,
            margin: "10px 0 8px 0",
          }}>
            {person.name}
          </h2>
          <div style={{ fontSize: 14, color: "var(--muted-on-dark)", lineHeight: 1.5 }}>
            {person.role}
          </div>
        </div>

        {/* Bio column */}
        <div className="r-bio-body" style={{ paddingTop: 8 }}>
          {person.expertise && person.expertise.length > 0 && (
            <div style={{ marginBottom: 36 }}>
              <div className="mono" style={{ color: "var(--blue)", marginBottom: 16 }}>Areas of expertise</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {person.expertise.map((e, i) => (
                  <li key={i} style={{
                    display: "grid",
                    gridTemplateColumns: "auto 1fr",
                    gap: 14,
                    alignItems: "baseline",
                    fontSize: 16,
                    lineHeight: 1.5,
                    paddingBottom: 10,
                    borderBottom: "1px solid var(--rule-on-dark)",
                  }}>
                    <span className="mono" style={{ color: "var(--blue)", fontSize: 11 }}>{String(i + 1).padStart(2, "0")}</span>
                    <span>{e}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            {person.bio.map((p, i) => (
              <p key={i} style={{
                margin: 0,
                fontSize: 17,
                lineHeight: 1.6,
                color: "rgba(255,255,255,0.92)",
                textWrap: "pretty",
              }}>{p}</p>
            ))}
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
};

window.LeadershipPage = LeadershipPage;