// ABOUT page
function AboutApp() {
  const [lang, setLang] = useLang();
  const t = mergeT(lang);
  const ap = t.about_page;
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} active="about" />
      <PageHero
        crumbs={[{ label: ap.crumb }]}
        eyebrow={ap.eyebrow}
        titlePre={ap.title_pre}
        titleAccent={ap.title_accent}
        lead={ap.lead}
      />

      {/* Story split */}
      <section className="section">
        <div className="container">
          <div className="split-grid">
            <img
              src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=900&q=80&auto=format&fit=crop"
              alt="Prospec & Design team on a job site"
            />
            <div>
              <div className="eyebrow">{ap.story_eyebrow}</div>
              <h2 style={{ marginTop: 16 }}>{ap.story_title}</h2>
              <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.75, marginTop: 24 }}>{ap.story_p1}</p>
              <p style={{ color: "var(--ink-2)", fontSize: 17, lineHeight: 1.75, marginTop: 18 }}>{ap.story_p2}</p>
              <div className="about-bullets" style={{ marginTop: 32 }}>
                {ap.stats.map((s, i) => (
                  <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <div style={{ fontSize: 36, fontWeight: 800, color: "var(--green)", lineHeight: 1, letterSpacing: "-0.02em" }}>{s.num}</div>
                    <div style={{ fontSize: 12, fontWeight: 700, color: "var(--ink-2)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{s.lbl}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission band */}
      <section className="section section-dark">
        <div className="container" style={{ textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>{ap.mission_eyebrow}</div>
          <h2 style={{ marginTop: 18 }}>{ap.mission_title}</h2>
          <p style={{ color: "rgba(255,255,255,0.72)", fontSize: 18, marginTop: 24, lineHeight: 1.7 }}>{ap.mission_p}</p>
        </div>
      </section>

      {/* Team */}
      <section className="section section-soft">
        <div className="container">
          <div className="section-head">
            <div className="section-head-stack">
              <div className="eyebrow">{ap.team_eyebrow}</div>
              <h2>{ap.team_title}</h2>
            </div>
            <p>{ap.team_sub}</p>
          </div>
          <div className="team-grid">
            {ap.team.map((m, i) => (
              <div className="team-card" key={i}>
                <img
                  src={[
                    "uploads/team-jaraujo.jpg",
                    "uploads/team-jackeline.jpg",
                    "uploads/team-wellyton.jpg",
                  ][i]}
                  alt={m.name}
                />
                <div className="body">
                  <h4>{m.name}</h4>
                  <div className="role">{m.role}</div>
                  <p>{m.bio}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Certifications */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
            <div className="eyebrow" style={{ justifyContent: "center" }}>{ap.certs_eyebrow}</div>
            <h2 style={{ marginTop: 18 }}>{ap.certs_title}</h2>
          </div>
          <div className="certs-row">
            {ap.certs.map((c, i) => (
              <div className="cert-card" key={i}>
                <div className="ic"><Icon.Award size={26} /></div>
                <h5>{c.title}</h5>
                <p>{c.sub}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABanner t={t} />
      <FooterMP lang={lang} t={t} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<AboutApp />);
