// Team detail page.
const DyTeam = () => {
  const C = window.dyContent;
  const [lang, setLang] = window.useDyLang ? window.useDyLang() : React.useState("en");
  const tt = (en, sk) => (lang === "sk" ? sk : en);
  const pk = (v) => window.dyPick(v, lang);

  return (
    <>
      <DyHeader current="team" lang={lang} setLang={setLang} />

      <section className="team-page-head" data-screen-label="01 Team head">
        <div className="shell-wide">
          <div className="eyebrow">{tt("The team", "Tím")}</div>
          <h1 style={{
            fontSize: "clamp(48px, 6vw, 88px)",
            lineHeight: 1,
            letterSpacing: "-0.025em",
            fontWeight: 300,
            margin: "0 0 24px",
            maxWidth: "18ch",
            textWrap: "balance",
          }}>
            {tt("Five partners. ", "Päť partnerov. ")}
            <em style={{ color: "var(--c-accent-deep)", fontStyle: "italic" }}>{tt("That is the firm.", "To je celá firma.")}</em>
          </h1>
          <p className="lead">
            {tt(
              "We are not building a pyramid. The team is five senior partners with a combined 133 years of business experience. The person you meet at the pitch is the person who runs your file.",
              "Nestaviame pyramídu. Tím tvorí päť senior partnerov so 133 rokmi kombinovaných obchodných skúseností. Človek, ktorého spoznáte pri pitchi, je ten, kto vedie váš projekt."
            )}
          </p>
        </div>
      </section>

      <section className="team-rows" data-screen-label="02 Partner rows">
        <div className="shell-wide">
          {C.partners.filter(p => !p.hidden).map(p => (
            <div className="team-row" id={p.id} key={p.id}>
              <div className="portrait">
                {p.img
                  ? <img src={p.img} alt={p.nm} />
                  : <>
                      <span className="gloss"></span>
                      <span className="glyph">{p.i}</span>
                    </>}
              </div>
              <div className="info">
                <h3>{p.nm}</h3>
                <div className="role">{pk(p.role)}</div>
                <p className="bio">{pk(p.bio)}</p>
                <div className="specs">
                  <div>
                    <span className="k">{tt("Focus", "Zameranie")}</span>
                    <span className="v">{pk(p.focus)}</span>
                  </div>
                  <div>
                    <span className="k">{tt("Experience", "Skúsenosti")}</span>
                    <span className="v">{pk(p.experience)}</span>
                  </div>
                  <div>
                    <span className="k">{tt("Sectors", "Sektory")}</span>
                    <span className="v">{pk(p.sectors)}</span>
                  </div>
                  <div>
                    <span className="k">{tt("Languages", "Jazyky")}</span>
                    <span className="v">SK · EN · DE</span>
                  </div>
                </div>
                <div className="contact-line">
                  <span>{tt("Direct", "Priamo")}: <a href={`mailto:${p.email}`}>{p.email}</a></span>
                  <span><a href="#">LinkedIn ↗</a></span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <DyFooter lang={lang} />
    </>
  );
};

window.DyTeam = DyTeam;