// ── Veritee · Team tab (#team) ──────────────────────────────────────────────
// Static cards: one per core contributor, plus an open "Could be you?" seat
// that links to the repository.
const TEAM = [
  { name: "Stefan", handle: "stefan-contiu", photo: "assets/portrait-stefan.webp" },
  { name: "Dimitar", handle: "djetchev", photo: "assets/portrait-dimitar.webp" },
  { name: "Mehdi", handle: "JoFrost", photo: "assets/portrait-mehdi.webp" },
  { name: "Could be you?", mascot: true, bio: "Passionate about applied cryptography, security, and systems-level engineering? Join this open source project." },
]

const TeamCard = ({ m, repoUrl }) => (
  <div className="v-lift" style={{ ...vCard, display: "flex", flexDirection: "column" }}>
    {m.mascot ? (
      <div style={{ aspectRatio: "1", borderBottom: "var(--v-border)", background: "repeating-conic-gradient(var(--v-wash) 0 25%, var(--v-canvas) 0 50%) 0 0/16px 16px", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden" }}>
        <img src="assets/manatee-bust.png" alt="Veritee mascot" className="v-pixel" style={{ width: "72%", height: "auto", display: "block", marginBottom: -2 }} />
      </div>
    ) : (
      <div style={{ aspectRatio: "1", borderBottom: "var(--v-border)", background: "var(--v-wash)", overflow: "hidden" }}>
        <img src={m.photo} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    )}
    <div style={{ padding: "12px 14px 14px", flex: 1, display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 6 }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 24, lineHeight: 1 }}>{m.name}</span>
        {m.handle && (
          <a href={"https://github.com/" + m.handle} target="_blank" rel="noopener noreferrer" className="v-link" style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--v-teal)", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon.GitHub size={11} />{m.handle}</a>
        )}
      </div>
      {m.bio && <p style={{ fontSize: 12.5, lineHeight: 1.5, opacity: 0.8, margin: "8px 0 0", flex: 1 }}>{m.bio}</p>}
      {m.mascot && (
        <Button variant="primary" as="a" href={repoUrl} style={{ marginTop: 12, padding: "7px 12px", fontSize: 12.5 }}>
          Contribute on GitHub <Icon.ArrowRight />
        </Button>
      )}
    </div>
  </div>
);

const Team = ({ repoUrl }) => (
  <div className="tem-page" style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 56px 96px" }}>
    <div style={{ maxWidth: 760, marginBottom: 40 }}>
      <Eyebrow style={{ marginBottom: 12 }}>The people behind Veritee</Eyebrow>
      <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.86 }}>
        Security enthusiasts building hardware-rooted attestation for Midnight: confidential computing, reproducible builds, and the on-chain plumbing that ties them together.
      </p>
    </div>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 18, maxWidth: 860, alignItems: "start" }}>
      {TEAM.map((m) => <TeamCard key={m.name} m={m} repoUrl={repoUrl} />)}
    </div>
  </div>
);
window.Team = Team;