// Attorneys page with expand/overlay bios
function AttorneyCard({ a, onOpen }) {
  return (
    <div className="attorney-card" onClick={() => onOpen(a)}>
      <div className="attorney-portrait">
        {a.photo
          ? <img src={a.photo} alt={a.name} />
          : <div className="initials">{a.initials}</div>
        }
      </div>
      <div className="role">{a.role}</div>
      <div className="name">{a.name}</div>
      <div className="bar">{a.short}</div>
      <div className="footline">
        <span style={{color: "var(--mute)", fontSize: 12}}>{a.email}</span>
        <span className="view">View bio <ArrowIcon /></span>
      </div>
    </div>
  );
}

function BioOverlay({ a, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [onClose]);

  return (
    <div className="overlay" onClick={onClose}>
      <div className="overlay-card" onClick={(e) => e.stopPropagation()}>
        <button className="overlay-close" onClick={onClose} aria-label="Close">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
        </button>
        <div className="overlay-body">
          <div className="crumb">
            <span>Attorneys</span>
            <span>/</span>
            <span>{a.role}</span>
          </div>
          <h2>{a.name}</h2>
          <div className="title-row">
            <span className="role">{a.role}</span>
            <a href={`mailto:${a.email}`} className="email">{a.email}</a>
          </div>

          <div className="overlay-portrait">
            {a.photo
              ? <img src={a.photo} alt={a.name} />
              : <div className="initials">{a.initials}</div>
            }
          </div>

          <div className="bio-grid">
            <div className="k">Practice Areas</div>
            <div className="v">
              <div className="areas">{a.areas.map((x,i) => <span className="chip" key={i}>{x}</span>)}</div>
            </div>
          </div>

          <div className="bio-grid">
            <div className="k">Bar Admissions</div>
            <div className="v"><ul>{a.bar.map((x,i) => <li key={i}>· {x}</li>)}</ul></div>
          </div>

          <div className="bio-grid">
            <div className="k">Education</div>
            <div className="v"><ul>{a.edu.map((x,i) => <li key={i}>· {x}</li>)}</ul></div>
          </div>

          <div className="bio-grid">
            <div className="k">Background</div>
            <div className="v prose">{a.bio.map((p,i) => <p key={i} className={i === 0 ? "bg" : ""}>{p}</p>)}</div>
          </div>

          {a.badge && (
            <div className="bio-grid">
              <div className="k">Recognition</div>
              <div className="v">
                <a href="https://www.martindale.com/las-cruces/new-mexico/blaine-t-mynatt-2630173-a/" target="_blank" rel="noopener noreferrer">
                  <img src="images/av-preeminent-2022.png" alt="Martindale-Hubbell AV Preeminent" className="badge-img" />
                </a>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Attorneys() {
  const D = window.MS_DATA;
  const [open, setOpen] = React.useState(null);
  const [filter, setFilter] = React.useState("all");

  const list = D.attorneys.filter((a) => filter === "all" ? true : a.level === filter);
  const count = { all: D.attorneys.length, partner: D.attorneys.filter(a => a.level === "partner").length, associate: D.attorneys.filter(a => a.level === "associate").length };

  return (
    <main data-screen-label="Attorneys page">
      <section className="page-head container">
        <span className="eyebrow"><span className="rule"></span>The Firm · Attorneys</span>
        <h1>A bench of <em>trial and</em><br/>appellate lawyers.</h1>
        <p className="lead">Our attorneys handle matters at every stage — motion practice, mediation, bench and jury trials, and appeals — before New Mexico state district courts, the U.S. District Court for the District of New Mexico, and the 5th, 9th, and 10th Circuits.</p>
      </section>

      <div className="container">
        <div className="attorney-filters">
          <button className={`filter-btn ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>All ({count.all})</button>
          <button className={`filter-btn ${filter === "partner" ? "active" : ""}`} onClick={() => setFilter("partner")}>Partners ({count.partner})</button>
          <button className={`filter-btn ${filter === "associate" ? "active" : ""}`} onClick={() => setFilter("associate")}>Associates ({count.associate})</button>
          <span className="filter-count">Showing {list.length} of {D.attorneys.length}</span>
        </div>
      </div>

      <div className="container">
        <div className="attorneys-grid">
          {list.map((a) => <AttorneyCard key={a.id} a={a} onOpen={setOpen} />)}
        </div>
      </div>

      {open && <BioOverlay a={open} onClose={() => setOpen(null)} />}
    </main>
  );
}

window.Attorneys = Attorneys;