// About / company page
const About = ({ t, lang }) => {
  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="eyebrow">{t.about.eyebrow}</div>
          <h1 className="t-h1">{t.about.h1}</h1>
          <p className="sub">{t.about.lead}</p>
        </div>
      </div>

      {/* Stats band — Beta-honest */}
      <section style={{ borderBottom: "1px solid var(--hairline)" }}>
        <div className="container">
          <div className="hero-stats" style={{ marginTop: 0, border: 0 }}>
            {[
              { v: "2026", l: lang === "ar" ? "تأسست" : "Founded" },
              { v: "6",    l: lang === "ar" ? "وكلاء ذكاء قيد التطوير" : "AI agents in development" },
              { v: "16",   l: lang === "ar" ? "دراسة عقارية متكاملة" : "Integrated studies" },
              { v: "50%",  l: lang === "ar" ? "أقل من سعر السوق" : "Below market pricing" },
            ].map((s, i) => (
              <div className="hero-stat" key={i}>
                <div className="val t-num">{s.v}</div>
                <span className="lbl">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pillars */}
      <section className="section" style={{ paddingTop: 80, paddingBottom: 32 }}>
        <div className="container">
          <div className="section-eyebrow">{t.about.pillar_h}</div>
          <h2 className="t-h1 section-h2">{lang === "ar" ? "أربعة مبادئ" : "Four principles."}</h2>
          <div className="pillars-grid">
            {t.about.pillars.map((p, i) => (
              <div className="pillar" key={i}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold-700)", marginBottom: 8 }}>0{i + 1}</div>
                <h3 className="t">{p.t}</h3>
                <p className="d">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team — humans */}
      <section className="section" style={{ paddingTop: 64 }}>
        <div className="container">
          <div className="section-eyebrow">{t.about.team_h}</div>
          <h2 className="t-h1 section-h2">{lang === "ar" ? "الفريق القيادي." : "Leadership team."}</h2>
          <div className="team-grid">
            {t.about.team.map((m, i) => (
              <div className="member" key={i}>
                <div className="member-img">
                  <span className="ph">PORTRAIT.{i + 1}</span>
                </div>
                <div>
                  <div className="n">{m.n}</div>
                  <div className="r">{m.r}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* AI agents */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-eyebrow">{t.about.agents_h}</div>
          <h2 className="t-h1 section-h2">{lang === "ar" ? "أربعة وكلاء. تقرير واحد." : "Four agents. One report."}</h2>
          <p style={{ color: "var(--ink-500)", marginTop: 16, maxWidth: 640 }}>{t.about.agents_sub}</p>
          <div className="agents-grid">
            {t.about.agents.map((a, i) => (
              <div className="agent-card" key={i}>
                <div className="agent-mark">
                  <Logo size={56}/>
                  <span className="agent-pulse"/>
                </div>
                <div>
                  <div className="agent-n">{a.n}</div>
                  <div className="agent-r">{a.r}</div>
                  <div className="agent-meta">
                    <span className="agent-version">v2.4</span>
                    <span className="agent-status"><span className="dot"/> {lang === "ar" ? "نشط" : "Active"}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Roadmap toward licensed valuation */}
      <section className="section" style={{ paddingTop: 32, paddingBottom: 32 }}>
        <div className="container">
          <div className="section-eyebrow">{t.about.roadmap_eyebrow}</div>
          <h2 className="t-h1 section-h2">{t.about.roadmap_h}</h2>
          <p style={{ color: "var(--ink-500)", marginTop: 16, maxWidth: 680, fontSize: 16, lineHeight: 1.6 }}>{t.about.roadmap_sub}</p>

          <div className="roadmap">
            {t.about.roadmap_items.map((it, i) => (
              <div key={i} className={"rm-item rm-" + it.status}>
                <div className="rm-q">{it.q}</div>
                <div className="rm-dot">
                  {it.status === "done" && <Icon name="check" size={12} stroke={2.5}/>}
                  {it.status === "active" && <span className="rm-dot-pulse"/>}
                </div>
                <div className="rm-body">
                  <div className="rm-t">{it.t}</div>
                  <div className="rm-d">{it.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quote band */}
      <section className="cta-band" style={{ marginTop: 48 }}>
        <div className="container">
          <div style={{ maxWidth: 760 }}>
            <div className="hero-eyebrow" style={{ color: "var(--gold-400)" }}>{lang === "ar" ? "كلمة المؤسس" : "Founder's note"}</div>
            <p style={{ fontFamily: "var(--font-serif)", fontSize: 32, lineHeight: 1.4, color: "var(--paper)", margin: "16px 0 0" }}>
              {lang === "ar"
                ? "“ادّخرت عائلتي عشرين عامًا لشراء قطعة في الياسمين. خسرنا 40% من قيمتها لأن أحدًا لم يخبرنا عن خطة الميترو. دؤوب لن تترك ذلك يحدث مجددًا.”"
                : "\u201CMy family saved twenty years for a plot in Yasmin. We lost 40% because no one told us about the metro plan. Daoob exists so that never happens again.\u201D"}
            </p>
            <div style={{ marginTop: 24, color: "var(--gold-400)", fontSize: 14 }}>
              {lang === "ar" ? "— فيصل العتيبي، شريك مؤسس" : "— Faisal Al-Otaibi, co-founder"}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { About });