/* Finance Family — the team: Director, Brokers, Support crew, AI staff.
   Click any person to open their bio in a modal. */
(function () {
  const e = React.createElement;

  function PersonModal({ person, onClose }) {
    const { Button, Badge } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    React.useEffect(() => {
      const onKey = (ev) => { if (ev.key === "Escape") onClose(); };
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
    }, [onClose]);
    if (!person) return null;
    const p = person;
    return (
      <div onClick={onClose} role="dialog" aria-modal="true" aria-label={p.name + " bio"}
        style={{ position: "fixed", inset: 0, zIndex: 200, background: "rgba(15,20,24,0.55)", backdropFilter: "blur(3px)", display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "max(24px, 4vh) 18px", overflowY: "auto" }}>
        <div onClick={(ev) => ev.stopPropagation()}
          style={{ background: "#fff", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)", maxWidth: 560, width: "100%", position: "relative", overflow: "hidden" }}>
          <button onClick={onClose} aria-label="Close" style={{ position: "absolute", top: 16, right: 16, zIndex: 2, width: 38, height: 38, borderRadius: "50%", border: "none", background: "var(--surface-subtle)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name="x" size={18} color="var(--text-muted)" />
          </button>
          <div style={{ padding: "clamp(24px,3.5vw,34px)" }}>
            <div className="row" style={{ gap: 18, alignItems: "flex-start", paddingRight: 40 }}>
              {e(window.PhotoAvatar, { name: p.name, src: p.photo, tone: p.tone, icon: (p.ai && !p.photo) ? "sparkles" : undefined, size: 76 })}
              <div style={{ flex: 1 }}>
                <div className="row" style={{ gap: 9, flexWrap: "wrap", alignItems: "center" }}>
                  <h3 className="ff-h3" style={{ margin: 0 }}>{p.name}</h3>
                  {p.director && <Badge color="yellow" size="sm">Director</Badge>}
                  {p.leader && <Badge color="blue" size="sm">Team lead</Badge>}
                  {p.ai && <Badge color="mint" size="sm">AI staff</Badge>}
                </div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--brand-primary)", fontWeight: 600, marginTop: 4 }}>{p.role}</div>
                {p.languages && <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-muted)", marginTop: 6 }}>Speaks {p.languages.join(", ")}</div>}
              </div>
            </div>

            {(p.tags && p.tags.length > 0) && (
              <div className="row wrap" style={{ gap: 8, marginTop: 18 }}>
                {p.tags.map((t) => <Badge key={t} color="grey" size="sm">{t}</Badge>)}
              </div>
            )}

            {p.tagline && <p style={{ fontFamily: "var(--font-display)", fontSize: 17, color: "var(--text-strong)", margin: "20px 0 14px", lineHeight: 1.35 }}>{p.tagline}</p>}

            <div style={{ maxHeight: "min(42vh, 420px)", overflowY: "auto", paddingRight: 6 }}>
              {p.bio.map((para, i) => (
                <p key={i} className="ff-body muted" style={{ fontSize: 15, lineHeight: 1.65, marginBottom: 12 }}>{para}</p>
              ))}
              {p.credit && <p style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--text-faint)", marginTop: 8 }}>{p.credit}</p>}
            </div>

            {p.bookable && (
              <div style={{ marginTop: 22, paddingTop: 20, borderTop: "1.5px solid var(--border-subtle)" }}>
                <a href={p.booking || "/book"} target={p.booking ? "_blank" : undefined} rel={p.booking ? "noopener noreferrer" : undefined} style={{ textDecoration: "none", display: "block" }}>
                  <Button block iconRight={<Icon name="arrowRight" size={18} />}>Book with {p.name.split(" ")[0]}</Button>
                </a>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  function PersonCard({ person, onOpen }) {
    const { Card } = window.FinanceFamilyDesignSystem_66efc3;
    const Icon = window.Icon;
    const p = person;
    return (
      <Card interactive padding="md" as="button" onClick={() => onOpen(p)}
        style={{ width: "100%", height: "100%", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", cursor: "pointer", border: "1.5px solid var(--border-subtle)", background: "#fff" }}>
        {e(window.PhotoAvatar, { name: p.name, src: p.photo, tone: p.tone, icon: (p.ai && !p.photo) ? "sparkles" : undefined, size: 84, style: { margin: "4px auto 14px" } })}
        <div style={{ fontFamily: "var(--font-display)", fontSize: 16.5, color: "var(--text-strong)" }}>{p.name}</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-muted)", marginTop: 3, flex: 1 }}>{p.role}</div>
        <span className="link-arrow" style={{ marginTop: 12, fontSize: 13.5, justifyContent: "center" }}>Read bio <Icon name="arrowRight" size={14} color="var(--brand-primary)" /></span>
      </Card>
    );
  }

  function Group({ eyebrow, title, sub, people, cols, onOpen, delayMod }) {
    const m = delayMod || 4;
    const colCount = parseInt(String(cols).replace("grid-", ""), 10) || 3;
    // Pad short rows with empty grid cells so every tile keeps the SAME width and the row stays centered.
    const lead = people.length < colCount ? Math.floor((colCount - people.length) / 2) : 0;
    const trail = people.length < colCount ? (colCount - people.length - lead) : 0;
    const spacer = (k) => <div key={k} aria-hidden="true" />;
    return (
      <div style={{ marginTop: 56 }}>
        <div className="center" style={{ marginBottom: 28 }}>
          <window.Eyebrow>{eyebrow}</window.Eyebrow>
          <h3 className="ff-h2" style={{ margin: "8px 0 6px" }}>{title}</h3>
          {sub && <p className="ff-body muted" style={{ maxWidth: 540, margin: "0 auto", fontSize: 15 }}>{sub}</p>}
        </div>
        <div className={"grid " + cols} style={{ alignItems: "stretch" }}>
          {Array.from({ length: lead }, (_, i) => spacer("lead" + i))}
          {people.map((p, i) => (
            <window.Reveal key={p.name} delay={(i % m) + 1} style={{ display: "flex" }}>
              <PersonCard person={p} onOpen={onOpen} />
            </window.Reveal>
          ))}
          {Array.from({ length: trail }, (_, i) => spacer("trail" + i))}
        </div>
      </div>
    );
  }

  function HomeTeam() {
    const [active, setActive] = React.useState(null);
    const director = window.FF_BROKERS.filter((b) => b.director);
    const brokers = window.FF_BROKERS.filter((b) => !b.director);
    return (
      <section id="team" className="section bg-subtle">
        <div className="container">
          <window.SectionHead center eyebrow="Meet the family" title="The whole Finance Family" sub="Brokers who came from the big banks, a support crew who keep everything moving, and — yes — a few AI team members too. Whoever you work with, you're family." style={{ marginBottom: 8 }} />

          <Group eyebrow="At the helm" title="Our Director" people={director} cols="grid-3" onOpen={setActive} />
          <Group eyebrow="Your specialists" title="Your Family Brokers" sub="Pick the broker whose niche fits you — or let our flow match you automatically." people={brokers} cols="grid-3" onOpen={setActive} delayMod={3} />
          <Group eyebrow="Behind the scenes" title="Your support crew" sub="The people guiding your application from first chat to settlement day." people={window.FF_SUPPORT} cols="grid-4" onOpen={setActive} />
          <Group eyebrow="Always on" title="Meet the AI team" sub="Our 24/7 crew — answering calls, chasing details and keeping the pipeline humming. Yes, really." people={window.FF_AI} cols="grid-4" onOpen={setActive} />
        </div>
        {active && <PersonModal person={active} onClose={() => setActive(null)} />}
      </section>
    );
  }
  window.HomeTeam = HomeTeam;
})();