anwar-pi-website/web/src/app/(frontend)/page.tsx

import { getViewer } from '@/lib/viewer'
import Topnav from '@/components/topnav'
import Footer from '@/components/footer'
import Link from 'next/link'
import { getPayload } from 'payload'
import configPromise from '@payload-config'
import { TOPICS, topicsFor, INTEREST_MAP } from '@/lib/topics'
import { formatNumber, guidesLabel, minutesLabel, MEMBERSHIP_PRICE } from '@/lib/format'
import { freeEarlyAccess } from '@/lib/launch'

export const dynamic = 'force-dynamic'

/* Editorial picks for «ابدأ من هنا». */
const START_HERE = ['first-arabic-agent', 'choosing-your-model', 'prototype-to-production', 'simple-arabic-rag', 'safe-agent-guardrails', 'agent-loop-stop-condition']

type Doc = { id: number; title: string; slug: string; dek?: string | null; access: 'free' | 'vip'; category: string; level?: string | null; readingMinutes: number; cover?: { url?: string | null } | number | null }

export default async function HomePage() {
  const viewer = await getViewer()
  const payload = await getPayload({ config: configPromise })
  const { docs: raw } = await payload.find({
    collection: 'posts',
    where: { status: { equals: 'published' } },
    depth: 1,
    limit: 200,
    sort: '-publishedAt',
    select: { title: true, slug: true, dek: true, access: true, category: true, level: true, readingMinutes: true, cover: true },
  })
  const docs = raw as unknown as Doc[]
  const freeCount = docs.filter(d => d.access === 'free').length

  // Hero personalization: matching the viewer's interest floats to the top,
  // level match ranks higher, ties keep the -publishedAt order. Anonymous
  // viewers get the plain newest-first list.
  const interestTopic = viewer?.interest ? INTEREST_MAP[viewer.interest] : undefined
  const score = (d: Doc) => {
    if (!interestTopic || !topicsFor(d).includes(interestTopic)) return 0
    return d.level === viewer?.level ? 2 : 1
  }
  const hero = docs
    .map((d, i) => ({ d, i, s: score(d) }))
    .sort((a, b) => b.s - a.s || a.i - b.i)
    .slice(0, 4)
    .map(({ d }) => d)
  const counts = Object.fromEntries(TOPICS.map(t => [t.key, docs.filter(d => topicsFor(d).includes(t.key)).length]))
  const startHere = START_HERE.map(slug => docs.find(d => d.slug === slug)).filter((d): d is Doc => Boolean(d))

  return (
    <div id="site" className="site-page v2 v2-home">
      {/* Organization structured data (home page only; WebSite LD lives in layout). */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            '@context': 'https://schema.org',
            '@type': 'Organization',
            name: 'أنور بآي',
            url: process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai',
            logo: `${process.env.NEXT_PUBLIC_SITE_URL ?? 'https://anwarpi.ai'}/brand/icon-256.png`,
          }),
        }}
      />
      <Topnav viewer={viewer} />
      <main id="content">
        <section className="home-hero">
          <div className="wrap home-hero-grid">
            <div className="home-hero-copy">
              <p className="kicker">مكتبة عربية للذكاء الاصطناعي العملي</p>
              <h1>افهم الذكاء الاصطناعي، ثم ابنِ به.</h1>
              <p className="lede">أدلة عربية عملية عن الوكلاء والنماذج والأتمتة، يكتبها مهندسو بنية تحتية لمن يريد أن يشغّل شيئاً حقيقياً.</p>
              <div className="actions">
                <a className="btn btn-primary" href="/articles?access=free">ابدأ بدليل مجاني</a>
                <Link className="btn btn-quiet" href="/articles">تصفح المكتبة</Link>
              </div>
            </div>
            {hero.length > 0 && (
              <aside className="hero-panel" aria-labelledby="new-title">
                <h2 id="new-title">أحدث الأدلة</h2>
                <ul role="list">
                  {hero.map(d => {
                    const coverUrl = typeof d.cover === 'object' ? d.cover?.url ?? null : null
                    return (
                      <li key={d.id}>
                        <Link href={`/posts/${d.slug}`}>
                          {coverUrl && <img className="hero-panel-thumb" src={coverUrl} alt="" width={72} height={48} loading="lazy" />}
                          <span className="hero-panel-title">{d.title}</span>
                          <span className="meta-row"><span>{d.category}</span><span>{minutesLabel(d.readingMinutes)}</span><span className={d.access === 'vip' ? 'is-vip' : undefined}>{d.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></span>
                        </Link>
                      </li>
                    )
                  })}
                </ul>
                <Link className="text-link" href="/articles">كل الأدلة</Link>
              </aside>
            )}
          </div>
        </section>

        <section className="home-paths" id="topics" aria-labelledby="paths-title">
          <div className="wrap">
            <header className="section-head">
              <h2 id="paths-title">اختر مساراً حسب ما تريد بناءه</h2>
              <p>كل دليل ينتمي إلى مسار، وأدلة المبتدئين تظهر أيضاً في الأساسيات.</p>
            </header>
            <ol className="paths" role="list">
              {TOPICS.map(topic => (
                <li key={topic.key}>
                  <Link href={`/topics/${topic.key}`} className="path">
                    <span className="path-name">{topic.label}</span>
                    <span className="path-hint">{topic.hint}</span>
                    <span className="path-count">{guidesLabel(counts[topic.key])}</span>
                  </Link>
                </li>
              ))}
            </ol>
          </div>
        </section>

        {startHere.length > 0 && (
          <section className="home-start" aria-labelledby="start-title">
            <div className="wrap">
              <header className="section-head">
                <h2 id="start-title">ابدأ من هنا</h2>
                <Link className="text-link" href="/articles">كل الأدلة ({formatNumber(docs.length)})</Link>
              </header>
              <ul className="card-grid" role="list">
                {startHere.map(post => {
                  const coverUrl = typeof post.cover === 'object' ? post.cover?.url ?? null : null
                  return (
                    <li key={post.id}>
                      <article className="guide">
                        {coverUrl && <img className="guide-card-art" src={coverUrl} alt="" width={640} height={320} loading="lazy" />}
                        <p className="meta-row"><span className="cat">{post.category}</span><span>{minutesLabel(post.readingMinutes)}</span><span className={post.access === 'vip' ? 'is-vip' : undefined}>{post.access === 'free' ? 'مجاني' : 'للأعضاء'}</span></p>
                        <h3><Link href={`/posts/${post.slug}`}>{post.title}</Link></h3>
                        <p className="guide-dek">{post.dek}</p>
                        <span className="guide-link" aria-hidden="true">اقرأ الدليل</span>
                      </article>
                    </li>
                  )
                })}
              </ul>
            </div>
          </section>
        )}

        <section className="home-membership" id="membership" aria-labelledby="membership-title">
          <div className="wrap membership-panel">
            <div>
              <h2 id="membership-title">العضوية تفتح الأدلة المتقدمة وملفات العمل.</h2>
              <p>الأدلة المجانية كاملة دائماً. العضوية تضيف الأدلة المعمّقة، القوالب الجاهزة للتنزيل، والنقاش مع الفريق.</p>
            </div>
            <div className="membership-offer">
              {freeEarlyAccess() ? (
                <>
                  <p className="price price-early">وصول مبكر مجاني</p>
                  <p className="early-line">يمكنك قراءة المحتوى المنشور خلال الوصول المبكر دون بطاقة دفع.</p>
                </>
              ) : (
                <p className="price"><bdi dir="ltr">{MEMBERSHIP_PRICE}</bdi> <span>شهرياً، وتلغي متى شئت</span></p>
              )}
              <ul role="list">
                <li>{guidesLabel(docs.length - freeCount)} للأعضاء، وتُضاف أدلة جديدة باستمرار</li>
                <li>قوالب وقوائم فحص قابلة للتنزيل</li>
                <li>التعليق والنقاش على كل دليل</li>
              </ul>
              <Link className="btn btn-primary" href="/subscription">اطّلع على العضوية</Link>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  )
}