// MISLAK — About (من نحن) — simple document layout (matches privacy page)
function AboutPage() {
  const [active, setActive] = React.useState("story");

  const SECTIONS = [
    {
      id: "story",
      title: window.L("قصتنا", "Our Story"),
      paras: [
        window.L("بدأت مسلاك من مشكلة واجهتها الكثير من الشركات: الحصول على نظام اتصالات احترافي لم يكن سهلاً.", "Mislak started from a problem many companies faced: getting a professional communications system was never easy."),
        window.L("إجراءات طويلة، تكاليف مرتفعة، وحلول معقدة تجعل الشركات تقضي وقتاً وجهداً كبيراً فقط لإدارة أرقامها واتصالاتها.", "Long procedures, high costs, and complex solutions made companies spend significant time and effort just to manage their numbers and communications."),
        window.L("لذلك بنينا مسلاك — منصة سحابية توفر للشركات طريقة أبسط للحصول على اتصالات احترافية وإدارتها من مكان واحد.", "So we built Mislak — a cloud platform that gives companies a simpler way to get professional communications and manage them all from one place."),
        window.L("ومع أدوات ذكية مدعومة بالذكاء الاصطناعي، تساعد مسلاك الفرق على تنظيم المكالمات، تحسين سرعة الاستجابة، وفهم تفاعلات العملاء بشكل أفضل.", "And with smart AI-powered tools, Mislak helps teams organize calls, improve response speed, and better understand customer interactions."),
      ],
    },
    {
      id: "mission",
      title: window.L("مهمتنا", "Our Mission"),
      paras: [
        window.L("جعل اتصالات الأعمال المتقدمة متاحة لأي شركة، بدون تعقيد أو تكاليف مبالغ فيها.", "To make advanced business communications available to any company, without complexity or excessive costs."),
        window.L("نمنح الشركات البنية والأدوات التي تحتاجها للتواصل مع عملائها بكفاءة، مهما كان حجمها.", "We give companies the infrastructure and tools they need to communicate with their customers efficiently, whatever their size."),
      ],
    },
    {
      id: "vision",
      title: window.L("رؤيتنا", "Our Vision"),
      paras: [
        window.L("أن تصبح إدارة اتصالات الشركات عملية بسيطة وسريعة مثل أي خدمة رقمية أخرى.", "For managing business communications to become as simple and fast as any other digital service."),
        window.L("نريد إزالة الحواجز التي تمنع الشركات من الوصول إلى حلول اتصال حديثة، وبناء تجربة اتصال أكثر ذكاءً وسلاسة.", "We want to remove the barriers that keep companies from reaching modern communication solutions, and build a smarter, smoother communication experience."),
      ],
    },
    {
      id: "values",
      title: window.L("قيمنا", "Our Values"),
      items: [
        { h: window.L("البساطة", "Simplicity"), p: window.L("نحوّل العمليات المعقدة إلى تجربة سهلة يمكن لأي فريق استخدامها.", "We turn complex processes into an easy experience any team can use.") },
        { h: window.L("الابتكار العملي", "Practical Innovation"), p: window.L("نستخدم التقنية والذكاء الاصطناعي لحل مشاكل حقيقية تواجه الشركات يومياً.", "We use technology and AI to solve real problems companies face every day.") },
        { h: window.L("الاعتمادية", "Reliability"), p: window.L("الاتصالات جزء أساسي من العمل، لذلك نبني حلولاً يمكن للشركات الاعتماد عليها.", "Communication is a core part of business, so we build solutions companies can rely on.") },
        { h: window.L("التركيز على العميل", "Customer Focus"), p: window.L("نطور مسلاك حول احتياجات الشركات وتحدياتها الحقيقية.", "We build Mislak around companies' real needs and challenges.") },
      ],
    },
  ];

  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="container">
          <div className="crumbs">
            <a href="#/">{window.L("الرئيسية", "Home")}</a>
            <span className="crumb-sep">{window.ARR()}</span>
            <span>{window.L("من نحن", "About")}</span>
          </div>
          <h1 className="page-h1">{window.L("من نحن.", "About us.")}</h1>
          <p className="page-sub">{window.L("مسلاك منصة سعودية للاتصالات الذكية، نجمع الرقم الموحّد ووكلاء الذكاء الاصطناعي والتقارير اللحظية في مكان واحد — لتتفرّغ الشركات لما تتقنه، ونتولّى نحن هندسة تواصلها.", "Mislak is a Saudi smart-communications platform that brings the unified number, AI agents, and real-time reports together in one place — so companies can focus on what they do best while we engineer their communications.")}</p>
        </div>
      </section>

      <section style={{ paddingTop: 16, paddingBottom: 96 }}>
        <div className="container">
          <div className="legal-board">
            <aside className="legal-toc">
              <div className="legal-toc-label">{window.L("المحتويات", "Contents")}</div>
              <ol>
                {SECTIONS.map((s) => (
                  <li key={s.id}>
                    <a href="#/about" className={active === s.id ? "active" : ""}
                       onClick={(e) => {
                         e.preventDefault();
                         setActive(s.id);
                         const el = document.getElementById(s.id);
                         if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 84, behavior: "smooth" });
                       }}>
                      {s.title}
                    </a>
                  </li>
                ))}
              </ol>
            </aside>

            <div className="legal-doc">
              {SECTIONS.map((s, i) => (
                <div key={s.id} id={s.id} className="legal-section">
                  <div className="legal-section-h">
                    <span className="mono">{String(i + 1).padStart(2, "0")}</span>
                    <h2>{s.title}</h2>
                  </div>
                  {s.paras && s.paras.map((p, j) => <p key={j}>{p}</p>)}
                  {s.items && s.items.map((it, j) => (
                    <div key={j} className="about-value">
                      <h4>{it.h}</h4>
                      <p>{it.p}</p>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <PageCTA h={window.L("جاهز لتجربة الاتصال الذكي مع مسلاك؟", "Ready to experience smart communication with Mislak?")} btn={window.L("احجز عرضاً تجريبياً", "Book a demo")} />
    </React.Fragment>
  );
}

Object.assign(window, { AboutPage });