Details + Reader

سطحان لكل ملف: التفاصيل (سطح تسويقي) عند /:lang/founder-files/{slug}، والقارئ (سطح القراءة طويل-الصيغة) عند /:lang/founder-files/{slug}/read. التفاصيل بها غلاف hero، نقاط التعلّم، كتلة الراعي، "ما ستحصل عليه"، CTA التحميل → modal الموافقة → التقاط العميل. القارئ هو تجربة القراءة الفعلية مع TOC + شريط التقدّم + جسم مُقسَّم.

أقسام صفحة التفاصيل

1. A · Breadcrumb (Home → Founder Files → {العنوان})
2. B · Hero (الغلاف 3:4 يساراً + العنوان H1 + tagline best-for + صفّ meta يميناً)
3. C · كتلة Best For (3-5 نقاط: "Pre-seed B2B founders" / "Writing first investor deck" / "Looking for term-sheet clarity")
4. D · صفّ راعٍ مصغّر (فقط عند الرعاية — انظر §9.5)
5. E · نقاط التعلّم (5-8 نقاط: "كيف تُحَدِّد حجم السوق في أقل من 48 ساعة" / "لماذا معظم term sheets تَكسر على liquidation prefs")
6. F · ما ستحصل عليه (الأصول القابلة-للتحميل: PDF، قالب، checklist)
7. G · byline المؤلِّف (<app-founder-card variant="inline"> لكل مؤلِّف)
8. H · CTA التحميل → modal الموافقة → التقاط العميل → إرسال بريد
9. I · CTA القراءة online (يُوَجِّه لـ /read sub-surface)
10. J · الملفات ذات الصلة (نفس الفئة، شريط 3-كروت)
11. K · الإشارات المتّصلة (الفعاليات / الفرص التي يُشير إليها الملف)
12. L · Footer

H · تدفّق التحميل (مُسَوَّر-بالموافقة)

الخطوة 1 — نقرة Download

يَفتح <app-founder-file-download-modal> مع سياق الملف (الغلاف + العنوان + الراعي عند الانطباق).

الخطوة 2 — حقول modal

البريد (مطلوب، مُتحقَّق منه)، الاسم (مطلوب)، الدور (مطلوب، منسدلة: founder/operator/investor/student/other)، الدولة (مطلوبة، منسدلة)، المرحلة (اختيارية)، consentPlatform (مطلوب true)، consentPartners (اختياري). Submit مُعطَّل حتى صلاحية الحقول المطلوبة + تأشير consentPlatform.

الخطوة 3 — Submit

POST /api/founder-files/{id}/leads. الـ Body: { email، name، role، country، stage?، consentPlatform، consentPartners، source: 'details' | 'reader' }. الخادم: يَكتب لـ FounderFileLead، يَزيد FounderFile.DownloadCount، يُدرج وظيفة بريد. consentPartners=true → يُدرج أيضاً webhook لـ sponsor-CRM.

الخطوة 4 — التأكيد

modal يَنقلب لحالة نجاح: "Check your email — {filename}.pdf is on its way." + CTA "Read online now" يُوَجِّه لـ /read.

أقسام صفحة القارئ (/:lang/founder-files/{slug}/read)

• A · شريط تقدّم القراءة (sticky أعلى، 3px ارتفاع)
• B · Header (CTA العودة للتفاصيل + العنوان + byline المؤلِّف)
• C · جدول المحتويات (sticky على سطح المكتب، drawer على موبايل، مُتولَّد من كتل <h2> في الجسم)
• D · الجسم (HTML مُعَقَّم، يَدعم h2-h4، p، ul/ol، blockquote، figure، a، em، strong، code، callouts عبر data-callout مُخَصَّص)
• E · أصول قابلة-للتحميل inline (PDF/template/checklist كأزرار تحميل داخل-الجسم)
• F · قسم المؤلِّف في النهاية (bio كامل + LinkedIn)
• G · الملفات ذات الصلة + الإشارات المتّصلة (مثل التفاصيل J + K)