// Authority — Rafael Santos Cesar. Editorial split: portrait + credentials.
const Authority = () => {
  const credentials = t("authority.credentials");
  const photoTag = t("authority.photoTag");
  const photoPath = t("authority.photoPath");
  const isPlaceholder = photoPath === "seal-only-black.png";
  return (
    <section id="sobre" className="scl-section scl-section--paper">
      <div className="scl-container scl-authority">
        <div className="scl-authority__portrait">
          <div className="scl-authority__portrait-frame">
            <img
              src={"/assets/" + photoPath}
              alt=""
              className={"scl-authority__portrait-img" + (isPlaceholder ? " is-placeholder" : "")}
            />
             { photoTag &&<span className="scl-placeholder-tag">{photoTag}</span>}
          </div>
          {/* <div className="scl-authority__card">
            <div className="scl-h6" style={{ fontSize: 14 }}>{t("authority.cardHead")}</div>
            <div style={{ marginTop: 8, display: "flex", gap: 8, alignItems: "center" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--scl-gold)" }} />
              <span className="scl-small">{t("authority.cardLanguages")}</span>
            </div>
            <div style={{ marginTop: 6, display: "flex", gap: 8, alignItems: "center" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--scl-gold)" }} />
              <span className="scl-small">{t("authority.cardUrgent")}</span>
            </div>
          </div> */}
        </div>

        <div className="scl-authority__content">
          <div className="scl-eyebrow"><span className="scl-rule" /> {t("authority.eyebrow")}</div>
          <h2 className="scl-h2 scl-authority__name">{t("authority.name")}</h2>
          <div className="scl-authority__role">
            {t("authority.role")}
          </div>
          <p className="scl-lead scl-authority__bio">
            {t("authority.bio")}
          </p>
        </div>

        {/* Spans the full width of the grid below — both the photo column and the text column —
            instead of being confined to either one. */}
        <ul className="scl-creds scl-creds--2col">
          {credentials.map((c, i) => (
            <li key={i} className="scl-creds__item">
              <span className="scl-creds__num">{"  ".padStart(2, "0")}</span>
              <div>
                <div className="scl-creds__year">{c.year}</div>
                <div className="scl-creds__label">{c.label}</div>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

window.Authority = Authority;