feat(showcase): add live prototype UI section, replace internal execution with exclusive architecture, and sanitize technical terms

docs/uruk_project_feasibility_and_architecture.html

@@ -447,6 +447,188 @@
       white-space: nowrap;
     }
 
+    /* Live Prototype & Showcase Components */
+    .showcase-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 1.6rem;
+      margin-top: 1.5rem;
+    }
+
+    .showcase-card {
+      background: var(--surface-card);
+      border: 1px solid var(--border);
+      border-radius: 18px;
+      padding: 1.6rem;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    /* Apple Wallet Gold Membership Card Mockup */
+    .wallet-card {
+      background: radial-gradient(circle at 85% 15%, #473617 0%, #1c1810 45%, #0d0c0a 100%);
+      border: 1.5px solid rgba(212, 175, 55, 0.45);
+      border-radius: 20px;
+      padding: 1.8rem;
+      color: #fff;
+      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+      position: relative;
+      overflow: hidden;
+      min-height: 250px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .wallet-card::before {
+      content: '';
+      position: absolute;
+      top: -40%;
+      right: -40%;
+      width: 180%;
+      height: 180%;
+      background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.08) 0%, transparent 60%);
+      pointer-events: none;
+    }
+
+    .wallet-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      z-index: 2;
+    }
+
+    .wallet-card-logo {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .wallet-card-logo img {
+      width: 40px;
+      height: 40px;
+      object-fit: contain;
+      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
+    }
+
+    .wallet-card-title {
+      font-size: 0.95rem;
+      font-weight: 700;
+      color: var(--gold-light);
+      line-height: 1.2;
+    }
+
+    .wallet-card-sub {
+      font-size: 0.65rem;
+      color: var(--text-secondary);
+      letter-spacing: 0.03em;
+    }
+
+    .wallet-chip {
+      width: 42px;
+      height: 30px;
+      background: linear-gradient(135deg, #d4af37 0%, #8a6a12 100%);
+      border-radius: 6px;
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
+    }
+
+    .wallet-card-body {
+      margin: 1.2rem 0 0.8rem;
+      position: relative;
+      z-index: 2;
+    }
+
+    .wallet-member-name {
+      font-size: 1.35rem;
+      font-weight: 800;
+      color: #ffffff;
+      margin-bottom: 0.3rem;
+    }
+
+    .wallet-member-meta {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 1.2rem;
+      font-size: 0.8rem;
+      color: var(--text-secondary);
+    }
+
+    .wallet-card-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      position: relative;
+      z-index: 2;
+      border-top: 1px solid rgba(255, 255, 255, 0.08);
+      padding-top: 0.8rem;
+    }
+
+    .wallet-badge-pill {
+      background: rgba(212, 175, 55, 0.2);
+      border: 1px solid rgba(212, 175, 55, 0.4);
+      color: var(--gold-light);
+      font-size: 0.72rem;
+      padding: 0.25rem 0.65rem;
+      border-radius: 6px;
+      font-weight: 700;
+    }
+
+    /* Mockup Form */
+    .mockup-form {
+      display: flex;
+      flex-direction: column;
+      gap: 0.9rem;
+      text-align: right;
+    }
+
+    .mockup-input-group label {
+      display: block;
+      font-size: 0.78rem;
+      color: var(--text-secondary);
+      margin-bottom: 0.3rem;
+    }
+
+    .mockup-input {
+      width: 100%;
+      background: #141416;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 0.65rem 0.9rem;
+      color: #fff;
+      font-family: var(--apple-font);
+      font-size: 0.88rem;
+      box-sizing: border-box;
+    }
+
+    .mockup-btn {
+      background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
+      color: #000;
+      font-weight: 800;
+      border: none;
+      border-radius: 10px;
+      padding: 0.75rem 1rem;
+      font-size: 0.9rem;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 0.4rem;
+    }
+
+    /* Terminal Scanner Mockup */
+    .terminal-box {
+      background: #141416;
+      border: 1px solid var(--border);
+      border-radius: 14px;
+      padding: 1.2rem;
+      text-align: right;
+    }
+
     footer {
       text-align: center;
       padding: 3rem 0 1rem;
@@ -644,9 +826,193 @@
     </div>
   </section>
 
-  <!-- SECTION 3: COMPARISON OF DEVELOPMENT COSTS -->
+  <!-- SECTION 3: LIVE PROTOTYPE & SHOWCASE -->
+  <section class="card" style="border-color: rgba(212, 175, 55, 0.45); background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, var(--surface) 100%);">
+    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem;">
+      <div>
+        <span class="pill" style="margin: 0 0 0.5rem; background: rgba(212, 175, 55, 0.15); color: var(--gold-light); border-color: rgba(212, 175, 55, 0.35);">
+          معاينة حية ومخرجات ملموسة
+        </span>
+        <h2 style="border-bottom: none; margin: 0.3rem 0; padding-bottom: 0; color: var(--gold-light);">
+          3. نموذج تطبيقي حي: كيف تظهر مخرجات المنظومة الحصرية؟ (Live UI Prototype)
+        </h2>
+      </div>
+    </div>
+    <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
+      هذا النموذج المرئي يجسد تماماً كيف يرى المشترك وموظف الاستقبال مخرجات منظومتنا الحصرية على أرض الواقع — فخامة بصرية على غرار بطاقات Apple Wallet، وسهولة تفعيل في 3 خطوات، ومصادقة فورية:
+    </p>
+
+    <div class="showcase-grid">
+      
+      <!-- Box 1: Apple Wallet Gold Membership Card -->
+      <div class="showcase-card">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+          <span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">أ) بطاقة العضوية الرقمية (Apple Wallet Style)</span>
+          <span class="tag-badge tag-gold">البطاقة الرسمية</span>
+        </div>
+        
+        <div class="wallet-card">
+          <div class="wallet-card-header">
+            <div class="wallet-card-logo">
+              <img src="uruk_prize_logo.png" alt="شعار أوروك">
+              <div>
+                <div class="wallet-card-title">جائزة أوروك الدولية</div>
+                <div class="wallet-card-sub">URUK INTERNATIONAL PRIZE</div>
+              </div>
+            </div>
+            <div class="wallet-chip"></div>
+          </div>
+
+          <div class="wallet-card-body">
+            <div style="font-size:0.75rem; color:var(--gold-light); margin-bottom:0.2rem; letter-spacing:0.04em;">MEMBER / المشترك المعتمد</div>
+            <div class="wallet-member-name">د. ثامر الهاشمي</div>
+            <div class="wallet-member-meta">
+              <span>رقم العضوية: <strong style="color:#fff;">URUK-2026-08492</strong></span>
+              <span>الصلاحية: <strong style="color:var(--green);">2026/09 – 2028/09</strong></span>
+            </div>
+          </div>
+
+          <div class="wallet-card-footer">
+            <div>
+              <span class="wallet-badge-pill">عضوية ذهبية ممتازة (VIP)</span>
+              <div style="font-size:0.7rem; color:#a1a1a6; margin-top:0.4rem;">
+                معتمدة لدى المشافي والفنادق والمعاهد
+              </div>
+            </div>
+            <div class="wallet-qr-box" style="text-align:center;">
+              <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="56" height="56" rx="4" fill="white"/>
+                <rect x="6" y="6" width="16" height="16" rx="2" fill="#000"/>
+                <rect x="9" y="9" width="10" height="10" rx="1" fill="#fff"/>
+                <rect x="11" y="11" width="6" height="6" fill="#000"/>
+                
+                <rect x="34" y="6" width="16" height="16" rx="2" fill="#000"/>
+                <rect x="37" y="9" width="10" height="10" rx="1" fill="#fff"/>
+                <rect x="39" y="11" width="6" height="6" fill="#000"/>
+                
+                <rect x="6" y="34" width="16" height="16" rx="2" fill="#000"/>
+                <rect x="9" y="37" width="10" height="10" rx="1" fill="#fff"/>
+                <rect x="11" y="39" width="6" height="6" fill="#000"/>
+                
+                <rect x="25" y="6" width="6" height="6" fill="#000"/>
+                <rect x="25" y="15" width="6" height="6" fill="#000"/>
+                <rect x="25" y="25" width="6" height="6" fill="#d4af37"/>
+                <rect x="15" y="25" width="6" height="6" fill="#000"/>
+                <rect x="35" y="25" width="6" height="6" fill="#000"/>
+                <rect x="34" y="34" width="6" height="6" fill="#000"/>
+                <rect x="44" y="34" width="6" height="6" fill="#000"/>
+                <rect x="34" y="44" width="16" height="6" fill="#000"/>
+                <rect x="25" y="35" width="6" height="15" fill="#000"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
+          ✓ مزودة برمز أمان ديناميكي مشفر ضد التصوير وتغيير الشاشات، صالحة لسنتين كاملتين من تاريخ التفعيل.
+        </p>
+      </div>
+
+      <!-- Box 2: Instant Registration Form Mockup -->
+      <div class="showcase-card">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+          <span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">ب) استمارة التسجيل الذكية (Mobile Signup)</span>
+          <span class="tag-badge tag-blue">تجربة 60 ثانية</span>
+        </div>
+
+        <div class="mockup-form">
+          <div class="mockup-input-group">
+            <label>الاسم الثلاثي واللقب (كما يظهر على الهوية):</label>
+            <input type="text" class="mockup-input" value="د. ثامر عبد الحسين الهاشمي" readonly>
+          </div>
+
+          <div style="display:grid; grid-template-columns: 1fr 1fr; gap:0.8rem;">
+            <div class="mockup-input-group">
+              <label>رقم الهاتف العراقي:</label>
+              <input type="text" class="mockup-input" value="+964 780 123 4567" readonly style="direction:ltr; text-align:right;">
+            </div>
+            <div class="mockup-input-group">
+              <label>المحافظة:</label>
+              <input type="text" class="mockup-input" value="بغداد — الكرخ" readonly>
+            </div>
+          </div>
+
+          <div class="mockup-input-group">
+            <label>فئة الاشتراك المعتمدة:</label>
+            <div style="background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.3); border-radius:10px; padding:0.6rem 0.8rem; display:flex; justify-content:space-between; align-items:center;">
+              <span style="font-size:0.85rem; color:#fff; font-weight:700;">عضوية أوروك الذهبية (سنتان)</span>
+              <span style="font-size:0.85rem; color:var(--gold-light); font-weight:800;">100$ (132,000 د.ع)</span>
+            </div>
+          </div>
+
+          <div class="mockup-input-group">
+            <label>طريقة الدفع الفورية (0% عمولة):</label>
+            <div style="display:flex; gap:0.5rem; font-size:0.75rem;">
+              <span style="flex:1; text-align:center; padding:0.4rem; background:#222; border:1px solid var(--gold); border-radius:6px; color:#fff; font-weight:700;">سوبر كيو آي (Qi)</span>
+              <span style="flex:1; text-align:center; padding:0.4rem; background:#18181a; border:1px solid #333; border-radius:6px; color:#aaa;">زين كاش</span>
+              <span style="flex:1; text-align:center; padding:0.4rem; background:#18181a; border:1px solid #333; border-radius:6px; color:#aaa;">مصرف FIB</span>
+            </div>
+          </div>
+
+          <button class="mockup-btn" type="button">
+            <span>تأكيد الاشتراك وتوليد البطاقة فورياً</span>
+            <span>←</span>
+          </button>
+        </div>
+
+        <p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
+          ✓ لا يطلب أي مستمسكات معقدة؛ يتم التحقق بمكالمة صامتة فورية وإصدار البطاقة في أقل من دقيقة.
+        </p>
+      </div>
+
+      <!-- Box 3: Partner Reception Terminal Mockup -->
+      <div class="showcase-card">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+          <span style="font-size:0.85rem; font-weight:700; color:var(--gold-light);">ج) شاشة موظف الاستقبال (المستشفيات والفنادق)</span>
+          <span class="tag-badge tag-green">فحص ثانية واحدة</span>
+        </div>
+
+        <div class="terminal-box">
+          <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.8rem; border-bottom:1px solid #222; padding-bottom:0.5rem;">
+            <span style="font-size:0.8rem; color:var(--text-secondary);">نقطة الفحص: <strong style="color:#fff;">مستشفى الكفيل التخصصي</strong></span>
+            <span style="background:rgba(48,209,88,0.15); color:var(--green); font-size:0.75rem; padding:0.2rem 0.5rem; border-radius:4px; font-weight:700;">متصل بالخادم</span>
+          </div>
+
+          <div style="text-align:center; padding:0.6rem 0;">
+            <div style="width:48px; height:48px; background:rgba(48,209,88,0.15); border:1px solid var(--green); border-radius:50%; margin:0 auto 0.5rem; display:flex; align-items:center; justify-content:center; color:var(--green); font-size:1.4rem;">
+              ✓
+            </div>
+            <div style="font-size:1rem; font-weight:800; color:#fff;">تم اعتماد العضوية بنجاح</div>
+            <div style="font-size:0.8rem; color:var(--text-secondary);">المشترك: د. ثامر عبد الحسين الهاشمي</div>
+          </div>
+
+          <div style="background:#1a1a1c; border-radius:8px; padding:0.8rem; margin:0.6rem 0; font-size:0.85rem;">
+            <div style="display:flex; justify-content:space-between; margin-bottom:0.3rem;">
+              <span style="color:var(--text-secondary);">نسبة الخصم المعتمدة:</span>
+              <strong style="color:var(--gold-light); font-size:1.05rem;">25% خصم فوري</strong>
+            </div>
+            <div style="display:flex; justify-content:space-between;">
+              <span style="color:var(--text-secondary);">الوفر المقيد في حساب المشترك:</span>
+              <strong style="color:var(--green);">+ 85,000 د.ع</strong>
+            </div>
+          </div>
+
+          <div style="font-size:0.75rem; color:var(--text-secondary); text-align:center;">
+            يصل إشعار لحظي لهاتف المشترك: "تم تسجيل وفر بقيمة 85,000 د.ع في محفظتك".
+          </div>
+        </div>
+
+        <p style="font-size:0.8rem; color:var(--text-secondary); margin-top:0.8rem;">
+          ✓ يعمل على أي هاتف أو تابلت أو كمبيوتر استقبال عبر متصفح الويب دون الحاجة لتثبيت برامج.
+        </p>
+      </div>
+
+    </div>
+  </section>
+
+  <!-- SECTION 4: COMPARISON OF DEVELOPMENT COSTS -->
   <section class="card">
-    <h2>3. المقارنة الواقعية لتكلفة بناء التطبيق في السوق (Market Dev Cost)</h2>
+    <h2>4. المقارنة الواقعية لتكلفة بناء التطبيق في السوق (Market Dev Cost)</h2>
     <p style="color: var(--text-secondary); margin-bottom: 1.2rem;">
       لو طُرح هذا المشروع لشركات برمجية في العراق أو وكالات إقليمية (أو فريق فريلانسرز محترفين من الهند والمنطقة) لتنفيذ هذه الحزمة المتكاملة:
     </p>
@@ -678,8 +1044,8 @@
             <td>مخاطر عالية في فهم شبكات الاتصالات العراقية</td>
           </tr>
           <tr style="background: rgba(48, 209, 88, 0.08);">
-            <td><strong>تنفيذنا الداخلي (حمزة عايد + الذكاء الاصطناعي)</strong></td>
+            <td><strong>منظومتنا التقنية الحصرية (تطوير وإشراف المعماري التقني حمزة عايد)</strong></td>
-            <td>بناء معماري فوري بأحدث تقنيات هندسة النظم</td>
+            <td>بناء معماري فوري بأحدث هندسة النظم والحلول المباشرة</td>
             <td class="saving-tag">&lt; $225 دولار (عتاد تأسيسي فقط)</td>
             <td class="saving-tag">7 إلى 10 أيام عمل</td>
             <td class="saving-tag"><strong>وفر فوري مباشر: $30,000 إلى $50,000 دولار!</strong></td>
@@ -689,9 +1055,9 @@
     </div>
   </section>
 
-  <!-- SECTION 4: OPERATIONAL SAVINGS (50,000 MEMBERS) -->
+  <!-- SECTION 5: OPERATIONAL SAVINGS (50,000 MEMBERS) -->
   <section class="card">
-    <h2>4. الوفورات التشغيلية المباشرة لقاعدة 50,000 مشترك (GMV: $5.0M)</h2>
+    <h2>5. الوفورات التشغيلية المباشرة لقاعدة 50,000 مشترك (GMV: $5.0M)</h2>
     <p style="color: var(--text-secondary); margin-bottom: 1.2rem;">
       تحصيل 5 ملايين دولار (50 ألف مشترك × 100$) في السوق العراقي عادة ما يواجه استنزافاً هائلاً في العمولات والرسائل:
     </p>
@@ -710,7 +1076,7 @@
           <tr>
             <td><strong>عمولات بوابات الدفع الإلكتروني</strong><br><small style="color:var(--text-secondary);">اقتطاع 2.5% إلى 3% من إجمالي التحصيل</small></td>
             <td><span class="cost-tag">$125,000 – $150,000</span><br><small>(تقتطعها بوابات الدفع من حساباتنا)</small></td>
-            <td><span class="saving-tag">$0.00 (صفر عمولة)</span><br><small>(تحويل P2P ومطابقة بوت أندرويد تلقائي)</small></td>
+            <td><span class="saving-tag">$0.00 (صفر عمولة)</span><br><small>(منظومة المطابقة والتحقق المالي اللحظي الخاصة بنا)</small></td>
             <td class="saving-tag">+ $125,000 إلى $150,000</td>
           </tr>
           <tr>
@@ -730,9 +1096,9 @@
     </div>
   </section>
 
-  <!-- SECTION 5: COMPREHENSIVE 3-PILLAR BUDGET -->
+  <!-- SECTION 6: COMPREHENSIVE 3-PILLAR BUDGET -->
   <section class="card">
-    <h2>5. هيكل التكاليف المعتمد: التأسيسي، السنوي، والشهري</h2>
+    <h2>6. هيكل التكاليف المعتمد: التأسيسي، السنوي، والشهري</h2>
     <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
       توزيع محاسبي شفاف ومفصل يفصل بدقة بين رأس المال التأسيسي الأولي للبنية التحتية، والالتزامات السنوية المجددة، وما يدفع شهرياً:
     </p>
@@ -894,12 +1260,12 @@
 
   <!-- Summary for Dr. Thamer -->
   <section class="card" style="border-color: rgba(212, 175, 55, 0.4);">
-    <h2 style="color: var(--gold-light);">6. الخلاصة التنفيذية لعرضها على الدكتور ثامر</h2>
+    <h2 style="color: var(--gold-light);">7. الخلاصة التنفيذية لعرضها على الدكتور ثامر</h2>
     <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 1rem;">
       <div style="background:var(--surface-card); padding:1.4rem; border-radius:14px; border:1px solid var(--border);">
-        <div style="font-size:0.85rem; color:var(--text-secondary);">1. وفر تكلفة بناء التطبيق</div>
+        <div style="font-size:0.85rem; color:var(--text-secondary);">1. وفر تكلفة بناء المنظومة</div>
         <div style="font-size:1.8rem; font-weight:800; color:#fff; margin:0.3rem 0;">$35,000+</div>
-        <div style="font-size:0.85rem; color:#8e8e93;">لن ندفع لشركات برمجية أو وسطاء؛ بنيناه داخلياً بأعلى مواصفات.</div>
+        <div style="font-size:0.85rem; color:#8e8e93;">أصل استثماري رقمي مملوك بالكامل للجائزة برؤية وهندسة معمارية حصرية.</div>
       </div>
       <div style="background:var(--surface-card); padding:1.4rem; border-radius:14px; border:1px solid var(--border);">
         <div style="font-size:0.85rem; color:var(--text-secondary);">2. وفر العمولات والرسائل</div>