import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import { getViewer } from '@/lib/viewer'

export const dynamic = 'force-dynamic'
export const metadata = { title: 'عن الفريق' }

export default async function AboutPage() {
  const viewer = await getViewer()
  return (
    <div id="site" className="site-page v2 v2-about">
      <Topnav viewer={viewer} />
      <main id="content">
        <section className="about-hero" aria-labelledby="about-title">
          <div className="wrap about-hero-grid">
            <div>
              <h1 id="about-title">نكتب عن تجاربنا، ونشارك ما جرّبناه عمليًا</h1>
              <p className="lede">أنور بآي منصة يقودها أنور عنبتاوي مع أحمد محمد. نحوّل خبرة سنوات في البنية التحتية والذكاء الاصطناعي التطبيقي إلى أدلة عربية يمكن تنفيذها في عملك.</p>
            </div>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img className="about-mark" src="/brand/mark-light.svg" alt="" width={436} height={382} />
          </div>
        </section>

        <section className="about-team" aria-labelledby="team-title">
          <div className="wrap">
            <h2 id="team-title">الفريق</h2>
            <div className="people">
              <article className="person">
                <p className="person-role">المؤسس، 20 عاماً في البنية التحتية</p>
                <h3>أنور عنبتاوي</h3>
                <p>يقود رؤية المنصة بخبرة عقدين في البنية التحتية لتقنية المعلومات. يهتم بتشغيل النماذج الكبيرة محلياً، واستكشاف النماذج المفتوحة، وبناء بيئات تجعل التجربة التقنية قابلة للتشغيل الحقيقي.</p>
                <ul className="tags" aria-label="مجالات اهتمام أنور" role="list">
                  <li>البنية التحتية</li><li>النماذج المفتوحة</li><li>التشغيل المحلي</li><li>الأنظمة الموثوقة</li>
                </ul>
                <a className="text-link" href="https://www.linkedin.com/in/anwaranabtawi/" target="_blank" rel="noopener noreferrer">أنور على LinkedIn</a>
              </article>
              <article className="person">
                <p className="person-role">الذكاء الاصطناعي التطبيقي وتكامل الأعمال</p>
                <h3>أحمد محمد</h3>
                <p>يركز على ضبط النماذج، وأطر الوكلاء وتنسيقها، وأنظمة <bdi dir="ltr">RAG</bdi>. يهمه أن يصبح الذكاء الاصطناعي جزءاً فعّالاً من طريقة إنجاز العمل، لا تجربة منفصلة عنه.</p>
                <ul className="tags" aria-label="مجالات اهتمام أحمد" role="list">
                  <li>ضبط النماذج</li><li>أطر الوكلاء</li><li>تنسيق الوكلاء</li><li><bdi dir="ltr">RAG</bdi></li>
                </ul>
                <a className="text-link" href="https://www.linkedin.com/in/ahmed-mohamed-423583151/" target="_blank" rel="noopener noreferrer">أحمد على LinkedIn</a>
              </article>
            </div>
          </div>
        </section>

        <section className="about-principles" aria-labelledby="principles-title">
          <div className="wrap principles-grid">
            <h2 id="principles-title">كيف نكتب كل دليل</h2>
            <dl className="principles">
              <div><dt>التطبيق قبل الاستعراض</dt><dd>نقيس قيمة التقنية بقدرتها على حل مشكلة واضحة أو تحسين خطوة حقيقية في العمل.</dd></div>
              <div><dt>نشرح ما تحت الغطاء</dt><dd>نفضّل الأدوات المفتوحة والتشغيل الذي يمنحك فهماً وتحكماً أكبر في بياناتك ومواردك.</dd></div>
              <div><dt>حدود قبل الإطلاق</dt><dd>الوكيل أو النموذج لا يكتمل دون مراقبة وحدود واضحة تمنع الفشل الصامت.</dd></div>
            </dl>
          </div>
        </section>

        <section className="about-contact">
          <div className="wrap contact-strip">
            <p>عندك سؤال عن دليل أو فكرة تريد تطبيقها؟</p>
            <a className="btn btn-quiet" href="mailto:hello@anwarpy.ai" dir="ltr">hello@anwarpy.ai</a>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}