import Link from "next/link";

const ids = [
  "intro",
  "data-we-collect",
  "how-we-use",
  "auction-specific",
  "sharing",
  "retention",
  "security",
  "your-rights",
  "cookies",
  "international",
  "minors",
  "contact",
  "changes",
];

export default function PO() {
  return (
    <aside className="space-y-3 top-24 lg:sticky h-max">
      <div className="bg-white border rounded-2xl p-5">
        <div className="text-[color:var(--g1)] font-extrabold mb-2">
          محتويات الصفحة
        </div>
        <ul className="space-y-1 text-sm">
          {ids.map((id) => (
            <li key={id}>
              <Link
                className="text-[color:var(--g1)] hover:underline"
                href={`#${id}`}
              >
                {titleMap[id] ?? id}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </aside>
  );
}

const titleMap: Record<string, string> = {
  intro: "مقدمة",
  "data-we-collect": "البيانات التي نجمعها",
  "how-we-use": "كيف نستخدم بياناتك",
  "auction-specific": "بيانات خاصة بالمزادات",
  sharing: "مشاركة البيانات",
  retention: "الاحتفاظ بالبيانات",
  security: "الحفاظ على الأمان",
  "your-rights": "حقوقك",
  cookies: "الكوكيز والتتبع",
  international: "النقل الدولي",
  minors: "خصوصية القُصّر",
  contact: "اتصل بنا",
  changes: "تحديث هذه السياسة",
};