// pages-about.jsx

function AboutPage({ go }) {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <main className="page shell" data-screen-label="03 About">
      <section className="about-statement about-statement--tight">
        <div className="body">
          <p>Esme Grace is a Los Angeles based <em>production and finance</em> company dedicated to developing and supporting prestige film, television, and emerging media with global reach. Built to streamline the filmmaking process and champion distinct creative voices, the company blends deep industry experience and achievement with the strategic insight of leaders across <em>technology, culture, and venture innovation.</em></p>
          <p>With partnerships in <em>Australia</em> and the <em>United Kingdom</em>, Esme Grace produces and finances projects with strong artistic identity, international resonance, and commercial potential — work that reflects the evolving global audience and the stories shaping our cultural moment.</p>
        </div>
      </section>

      <section className="team">
        {/* Team heading — hidden for now, restore by uncommenting
        <div className="team-head">
          <h2>The <em>team.</em></h2>
        </div>
        */}

        <div className="team-accordion">
          {window.TEAM.filter((m) => m.name === "Laura Rister" || m.name === "Tom McLeod").map((m, i) => {
            const open = openIdx === i;
            return (
              <TeamRow key={m.name} member={m} open={open}
                       onToggle={() => setOpenIdx(open ? null : i)} />
            );
          })}
        </div>
      </section>
    </main>
  );
}

function TeamRow({ member: m, open, onToggle }) {
  const ACCORDION_ENABLED = true; // portraits render as placeholders until headshot files are added

  if (!ACCORDION_ENABLED) {
    return (
      <article className="team-row">
        <div className="team-row-trigger team-row-trigger--static">
          <div className="trigger-text">
            <div className="role">{m.role}</div>
            <h3 className="name">{m.name}</h3>
          </div>
        </div>
      </article>
    );
  }

  const innerRef = React.useRef(null);
  const [maxH, setMaxH] = React.useState(0);

  React.useEffect(() => {
    if (!innerRef.current) return;
    if (open) {
      // measure
      setMaxH(innerRef.current.scrollHeight);
    } else {
      setMaxH(0);
    }
  }, [open]);

  // recompute on window resize while open
  React.useEffect(() => {
    if (!open) return;
    const onResize = () => {
      if (innerRef.current) setMaxH(innerRef.current.scrollHeight);
    };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [open]);

  return (
    <article className={"team-row" + (open ? " is-open" : "")}>
      <button type="button" className="team-row-trigger" onClick={onToggle} aria-expanded={open}>
        <div className="trigger-text">
          <div className="role">{m.role}</div>
          <h3 className="name">{m.name}</h3>
        </div>
        <span className="trigger-icon" aria-hidden="true">
          <span className="bar bar-h"></span>
          <span className="bar bar-v"></span>
        </span>
      </button>

      <div className="team-row-body" style={{ maxHeight: maxH + "px" }} aria-hidden={!open}>
        <div className="team-row-body-inner" ref={innerRef}>
          <div className="team-member team-member--nested">
            <div className="left">
              <div className="portrait">
                <div className="stripes"></div>
                <div className="placeholder"><span>{`PORTRAIT · ${m.name.toUpperCase()}`}</span></div>
                {m.headshot && <img className="portrait-img" src={m.headshot} alt={m.name} width="760" height="950" loading="lazy" decoding="async" onError={(e) => { e.target.style.display = "none"; }} />}
              </div>
            </div>
            <div>
              {m.short && (
                <>
                  <p className="team-member-short">
                    {m.short}
                  </p>
                  <hr className="eg-rule" />
                </>
              )}
              <div className="bio">
                {m.bio.map((para, k) => <p key={k}>{para}</p>)}
                {m.credits.length > 0 && (
                  <>
                    <h4>{m.creditsLabel}</h4>
                    <div className="credits">
                      {m.credits.map((c, k) => (
                        <div key={k}>— {c}</div>
                      ))}
                    </div>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { AboutPage });