// Team — about page lead + team grid with hover-to-reveal bios.
//
// Hover (or focus) any portrait → the card flips to show the bio.
// On touch, tapping toggles. Bios scroll inside the card if long.
function Team({ lead, members }) {
  const [active, setActive] = React.useState(null); // card index pinned by tap
  return (
    <section style={{ background: "#F1F5F5", color: "#213A2C", padding: "120px 48px 140px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Lead block */}
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)", gap: 80, alignItems: "start", marginBottom: 96 }}>
          <div>
            <h1 style={{ margin: 0, fontWeight: 700, fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.035em" }}>
              A team of investors and operators to help you build a category defining company.
            </h1>
          </div>
          <div style={{ paddingTop: 12 }}>
            <p style={{ margin: 0, fontSize: 20, lineHeight: 1.5, color: "#213A2C", letterSpacing: "-0.01em", textWrap: "pretty" }}>
              {lead}
            </p>
          </div>
        </div>

        {/* Team grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {members.map((m, i) => (
            <TeamCard
              key={m.name}
              member={m}
              isActive={active === i}
              onToggle={() => setActive(active === i ? null : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function TeamCard({ member, isActive, onToggle }) {
  const [hover, setHover] = React.useState(false);
  const showing = hover || isActive;

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onToggle}
      style={{
        position: "relative",
        background: "#FFFFFF",
        aspectRatio: "4 / 5",
        overflow: "hidden",
        cursor: "pointer",
        userSelect: "none",
        boxShadow: "0 1px 0 rgba(33,58,44,0.06)",
      }}
    >
      {/* Portrait layer */}
      <div style={{
        position: "absolute", inset: 0,
        opacity: showing ? 0 : 1,
        transition: "opacity 320ms ease",
      }}>
        {member.portrait ? (
          <img
            src={member.portrait}
            alt={member.name}
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block", filter: "grayscale(1) contrast(1.02)" }}
          />
        ) : (
          <div style={{
            width: "100%", height: "100%",
            background: "#DFE9E9",
            display: "flex", alignItems: "center", justifyContent: "center",
            color: "#7B937D", fontSize: 64, fontWeight: 700, letterSpacing: "-0.02em",
          }}>
            {member.name.split(" ").map(s => s[0]).join("").slice(0, 2)}
          </div>
        )}
        {/* Name plate */}
        <div style={{
          position: "absolute", left: 0, right: 0, bottom: 0,
          padding: "28px 28px 24px",
          background: "linear-gradient(180deg, rgba(33,58,44,0) 0%, rgba(33,58,44,0.85) 80%)",
          color: "#FFFFFF",
        }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{member.name}</div>
          <div style={{ fontSize: 13, color: "#CDF6B0", marginTop: 6, letterSpacing: "0.02em" }}>{member.title}</div>
        </div>
      </div>

      {/* Bio layer */}
      <div style={{
        position: "absolute", inset: 0,
        background: "#213A2C",
        color: "#FFFFFF",
        padding: "32px 32px 28px",
        display: "flex", flexDirection: "column", gap: 16,
        opacity: showing ? 1 : 0,
        transform: showing ? "translateY(0)" : "translateY(8px)",
        transition: "opacity 320ms ease, transform 320ms ease",
        pointerEvents: showing ? "auto" : "none",
      }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1 }}>{member.name}</div>
          <div style={{ fontSize: 13, color: "#CDF6B0", marginTop: 6, letterSpacing: "0.02em" }}>{member.title}</div>
        </div>
        <div style={{
          fontSize: 13.5, lineHeight: 1.55, color: "rgba(255,255,255,0.88)",
          overflowY: "auto", paddingRight: 6,
          textWrap: "pretty",
          flex: 1,
        }}>
          {member.bio.split("\n\n").map((para, i) => (
            <p key={i} style={{ margin: i === 0 ? "0 0 12px" : "0 0 12px" }}>{para}</p>
          ))}
        </div>
      </div>
    </article>
  );
}

window.Team = Team;