// Meet the Team — expandable bio cards

const { useState: useTeamState } = React;

const TEAM = [
  {
    mono: "W",
    sigil: "watchdog",
    name: "Watchdog",
    role: "the auditor",
    tag: "EMP · 001",
    type: "3-day engagement",
    bio: "A 3-day operational deep-dive, on-site or remote. Shadows your team, maps your workflows end to end, identifies the highest-leverage automation targets, and hands back a live, structured artifact of how your business actually runs.",
    spec: [
      ["Format",     "On-site or remote, 3 consecutive days"],
      ["Deliverable","Structured workflow artifact (not a deck)"],
      ["Outcome",    "Ranked automation targets with ROI model"],
      ["Prerequisite", "None — this is always the starting point"],
    ],
  },
  {
    mono: "E",
    sigil: "ezra",
    name: "Ezra",
    role: "the knowledge employee",
    tag: "EMP · 002",
    type: "Always on",
    bio: "Lives in Slack, Teams, or your inbox. Connects through MCP and native integrations. Stores everything in a structured, version-controlled knowledge base. Ask her anything; give her work; she doesn't take PTO.",
    spec: [
      ["Lives in",   "Slack · Microsoft Teams · Email"],
      ["Connects",   "MCP · native · direct API"],
      ["Handles",    "Drafts · summaries · escalations · deal screens · reports"],
      ["Memory",     "Version-controlled on GitHub — auditable, forever"],
    ],
  },
  {
    mono: "M",
    sigil: "mia",
    name: "Mia",
    role: "the caller",
    tag: "EMP · 003",
    type: "24 / 7 voice",
    bio: "Inbound and outbound voice agent, deployed on the same instance as Ezra and reading from the same knowledge base. Answers every call 24/7. Books jobs, qualifies leads, runs follow-ups, dispatches the right resource.",
    spec: [
      ["Coverage",   "100% of inbound · 24/7 · EN/ES"],
      ["Grounded in","Your SOPs, pricing, service area, playbook"],
      ["Handles",    "Bookings · qualifications · follow-ups · dispatch"],
      ["Escalates",  "Only what the playbook doesn't cover"],
    ],
  },
];

function BioCard({ t, expanded, onToggle }) {
  return (
    <article
      className={`bio${expanded ? " expanded" : ""}`}
      onClick={onToggle}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onToggle(); } }}
    >
      <div className="bio-head">
        <div className="monogram">
          {t.sigil === "watchdog" && <SigilWatchdog />}
          {t.sigil === "ezra" && <SigilEzra />}
          {t.sigil === "mia" && <SigilMia />}
        </div>
        <div className="bio-meta">
          <div>{t.tag}</div>
          <div>{t.type}</div>
        </div>
      </div>
      <div className="bio-name">{t.name}</div>
      <div className="bio-role">— {t.role}</div>
      <p className="bio-body">{t.bio}</p>

      <div className="bio-detail">
        <div className="bio-spec">
          {t.spec.map(([k, v]) => (
            <React.Fragment key={k}>
              <div className="k">{k}</div>
              <div className="v">{v}</div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="bio-expand">
        <span className="bio-plus">+</span>
        <span>{expanded ? "Hide spec" : "View spec"}</span>
      </div>
    </article>
  );
}

function TeamBios() {
  const [open, setOpen] = useTeamState(null);
  return (
    <section id="team">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow-num">§ 02 / MEET THE TEAM</span>
          </div>
          <div>
            <h2>Three teammates.<br/><span className="text-accent" style={{fontStyle:"italic"}}>One instance.</span></h2>
            <p style={{marginTop:20, maxWidth:560, fontSize:15, color:"var(--ink-muted)", lineHeight:1.6}}>
              Watchdog runs the audit. Ezra and Mia share a knowledge base and deploy from it. You hire the team — not a feature list.
            </p>
          </div>
        </div>

        <div className="team-grid">
          {TEAM.map((t, i) => (
            <BioCard key={t.name} t={t} expanded={open === i} onToggle={() => setOpen(open === i ? null : i)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.TeamBios = TeamBios;