/* about — company story + HRC-F framework in depth (bilingual) */

function AboutPage() {
  const { t } = useLang();
  const vals = [
    { k: "h", icon: "shield", letter: "H" },
    { k: "r", icon: "check", letter: "R" },
    { k: "c", icon: "clock", letter: "C" },
    { k: "f", icon: "chat", letter: "F" },
  ];
  return (
    <main style={{ paddingTop: 72 }}>
      <section style={{ position: "relative", padding: "100px 0 84px", overflow: "hidden", background: "linear-gradient(160deg,#2f2114,#1c130a)", color: "#fff" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(70% 60% at 80% 0%,rgba(216,184,120,.2),transparent 60%)" }}></div>
        <div className="wrap" style={{ position: "relative", maxWidth: 860, textAlign: "center", margin: "0 auto" }}>
          <span className="eyebrow center" style={{ color: "var(--gold-l)" }}>{t("promise.eyebrow")}</span>
          <h1 className="display" style={{ color: "#fff", fontSize: "clamp(40px,6vw,80px)", marginTop: 20 }}>“{t("promise.title")}”</h1>
          <p className="lead" style={{ color: "rgba(255,255,255,.72)", marginTop: 22, maxWidth: 640, marginInline: "auto" }}>{t("about.heroSub")}</p>
          <div style={{ marginTop: 26, display: "inline-flex", gap: 10, alignItems: "center", color: "var(--gold-l)", fontSize: 13 }}>
            <Icon name="shield" size={16} /> {t("iata")}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead center eyebrow={t("about.fw")} title={t("about.fwTitle")} sub={t("about.fwSub")} />
          <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginTop: 56 }}>
            {vals.map(v => (
              <div key={v.k} className="card hover-lift" style={{ padding: 28, position: "relative", overflow: "hidden" }}>
                <div style={{ position: "absolute", top: -10, insetInlineEnd: 6, fontFamily: "var(--serif)", fontSize: 120, fontWeight: 700, color: "var(--paper-2)", lineHeight: 1, pointerEvents: "none" }}>{v.letter}</div>
                <div style={{ position: "relative" }}>
                  <div style={{ width: 54, height: 54, borderRadius: 15, background: "var(--emerald-wash)", color: "var(--emerald)", display: "grid", placeItems: "center" }}><Icon name={v.icon} size={25} /></div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 27, fontWeight: 600, marginTop: 18 }}>{t("hrcf." + v.k)}</h3>
                  <p className="muted" style={{ fontSize: 14.5, marginTop: 8 }}>{t("hrcf." + v.k + ".d")}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm" style={{ background: "var(--paper-2)" }}>
        <div className="wrap split" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
          <Placeholder slot="about_team" label={t("img.about")} h={360} r="var(--r-xl)" tone="sand" />
          <div>
            <span className="eyebrow">{t("about.est")}</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>{t("about.storyTitle")}</h2>
            <p className="lead" style={{ marginTop: 16 }}>{t("about.story")}</p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 30 }}>
              {[["$5M+", t("m.revenue")], ["95%", t("m.sat")], ["250+", t("m.projects")]].map(([v, l]) => (
                <div key={l}><div style={{ fontFamily: "var(--serif)", fontSize: 40, fontWeight: 600, color: "var(--emerald)" }}>{v}</div><div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{l}</div></div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage });