// About Us page

function AboutApp() {
  const [tweaks, setTweak] = useTweaks(/*EDITMODE-BEGIN*/{ "themeColor": "navy" }/*EDITMODE-END*/);
  useLucideIcons([tweaks]);
  useTweakBodyClasses(tweaks);

  return (
    <>
      <SiteNav active="about" />

      <header className="page-header">
        <div className="container" style={{ textAlign: "center" }}>
          <div className="about-hero-image">
            <img src={(window.CURRENT_LANG || "en") === "en" ? "assets/about-hero.jpg" : "assets/about-hero-de.jpg"} alt="PMO Simplified — practical, experienced, focused on results" />
          </div>
          <span className="eyebrow">{t("about.eyebrow")}</span>
          <h1 style={{ fontSize: "35px" }}>{t("about.title")}</h1>
          <p style={{ maxWidth: "720px", margin: "0 auto" }}>
            {t("about.intro")}
          </p>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <div className="about about--solo">
            <div className="about-text">
              <span className="eyebrow">{t("about.practiceEyebrow")}</span>
              <h2 style={{ fontSize: "35px", color: "rgb(10, 10, 10)" }}>{t("about.practiceTitle")}</h2>
              <p>{t("about.practiceBody")}</p>
              <div className="about-stats">
                <div>
                  <div className="about-stat-num">20+</div>
                  <div className="about-stat-label">{t("about.stat1Label")}</div>
                </div>
                <div>
                  <div className="about-stat-num">12</div>
                  <div className="about-stat-label">{t("about.stat2Label")}</div>
                </div>
                <div>
                  <div className="about-stat-num">19</div>
                  <div className="about-stat-label">{t("about.stat3Label")}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section--tight" style={{ background: "var(--color-surface-alt)" }}>
        <div className="container">
          <div className="channel-banner">
            <span className="channel-banner-icon"><i data-lucide="compass" style={{ width: 28, height: 28 }}></i></span>
            <div>
              <h3>{t("about.ctaTitle")}</h3>
              <p>{t("about.ctaBody")}</p>
            </div>
            <a href="services.html#contact" className="btn btn--lg btn--primary">
              {t("about.ctaButton")} <i data-lucide="arrow-right"></i>
            </a>
          </div>
        </div>
      </section>

      <SiteFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio label="Primary color"
          value={tweaks.themeColor}
          onChange={v => setTweak("themeColor", v)}
          options={[
            { value: "navy",     label: "Navy" },
            { value: "graphite", label: "Graphite" },
            { value: "emerald",  label: "Emerald" },
            { value: "gold",     label: "Gold" },
          ]} />
      </TweaksPanel>
    </>
  );
}

window.AboutApp = AboutApp;