import { ArticleCard } from "@/components/article/article-card";
import { DEMO_ARTICLES } from "@/lib/demo-data";

export default function HomePage() {
  const [featured, ...rest] = DEMO_ARTICLES;
  const secondary = rest.slice(0, 4);
  const latest = DEMO_ARTICLES;

  return (
    <div className="mx-auto max-w-7xl px-4 py-8">
      <div className="mb-6 rounded-card border border-dashed border-ink-200 bg-ink-50 p-3 text-xs text-ink-400 dark:border-ink-800 dark:bg-ink-800/40">
        وضع التطوير: تُعرض بيانات تجريبية فقط. سيتم استبدالها بأخبار حقيقية بعد ربط محرك الجلب (المرحلة ٦).
      </div>

      <section className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div className="lg:col-span-2">
          {featured && <ArticleCard article={featured} size="large" />}
        </div>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-1">
          {secondary.map((a) => (
            <ArticleCard key={a.slug} article={a} />
          ))}
        </div>
      </section>

      <section className="mt-12">
        <h2 className="font-display mb-4 border-b-2 border-brand pb-2 text-xl font-bold w-fit">أحدث الأخبار</h2>
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {latest.map((a) => (
            <ArticleCard key={a.slug} article={a} />
          ))}
        </div>
      </section>
    </div>
  );
}