<?php
// Shared header for /app/ screens
if (!defined('S_INCLUDED')) { define('S_INCLUDED', true); }
$lang = $_SESSION['lang'] ?? 'ar';
$dir  = $lang === 'ar' ? 'rtl' : 'ltr';
$SITE = rtrim(defined('SITE_URL') ? SITE_URL : (getenv('SITE_URL') ?: 'https://sudanna.ai/s26'), '/');
?>
<!DOCTYPE html>
<html lang="<?= $lang ?>" dir="<?= $dir ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><?= htmlspecialchars($pageTitle ?? 'سودانا') ?> — سودانا</title>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
<style>
:root{--g1:#073328;--g2:#0B4D3B;--g3:#1a7255;--gold:#D4AF37;--amber:#E8A020;
--sand:#FAF6EF;--sand2:#F0E8DC;--border:#E2D8CC;--text:#1C1A16;--text2:#5A5550;--text3:#9A9590;
--success:#16A34A;--warning:#D97706;--danger:#DC2626;--info:#2563EB;
--r:14px;--r2:10px;--sh:0 4px 24px rgba(7,51,40,.10)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Cairo',sans-serif;background:var(--sand);color:var(--text);min-height:100vh}
.app-nav{background:var(--g1);color:#fff;padding:0 20px;display:flex;align-items:center;height:52px;gap:12px;position:sticky;top:0;z-index:100}
.app-nav .logo{font-weight:900;font-size:1.1rem;color:var(--gold);text-decoration:none}
.app-nav .nav-back{color:rgba(255,255,255,.7);font-size:.82rem;text-decoration:none;display:flex;align-items:center;gap:4px}
.app-nav .nav-back:hover{color:#fff}
.app-nav .nav-right{margin-right:auto;display:flex;align-items:center;gap:10px}
.page-wrap{max-width:900px;margin:0 auto;padding:24px 16px}
.page-title{font-size:1.4rem;font-weight:900;color:var(--g1);margin-bottom:4px}
.page-subtitle{font-size:.88rem;color:var(--text2);margin-bottom:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--sh)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}.g3.m2{grid-template-columns:repeat(2,1fr)}}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600}
.badge-paid{background:#D1FAE5;color:#065F46}
.badge-pending{background:#FEF3C7;color:#92400E}
.badge-danger{background:#FEE2E2;color:#991B1B}
.badge-info{background:#DBEAFE;color:#1E40AF}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:var(--r2);font-weight:700;font-size:.88rem;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-primary{background:var(--g1);color:#fff}
.btn-primary:hover{background:var(--g2)}
.btn-gold{background:var(--gold);color:var(--g1)}
.btn-gold:hover{background:var(--amber)}
.btn-outline{background:transparent;border:1.5px solid var(--g2);color:var(--g2)}
.btn-outline:hover{background:var(--g2);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:6px 14px;font-size:.8rem}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px;cursor:pointer;transition:all .2s;text-decoration:none;display:block;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;right:0;width:4px;height:100%;background:var(--g3)}
.service-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(7,51,40,.12);border-color:var(--g3)}
.service-card .sc-icon{font-size:1.8rem;margin-bottom:8px}
.service-card .sc-title{font-weight:700;font-size:.95rem;color:var(--g1);margin-bottom:4px}
.service-card .sc-price{font-size:.82rem;color:var(--text2)}
.service-card .sc-sla{font-size:.75rem;color:var(--text3)}
.provider-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:16px;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:all .2s}
.provider-card:hover{border-color:var(--g3);background:#fafffe}
.provider-card .avatar{width:48px;height:48px;border-radius:50%;background:var(--g3);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.1rem;flex-shrink:0}
.provider-card .pv-name{font-weight:700;font-size:.92rem}
.provider-card .pv-spec{font-size:.78rem;color:var(--text2)}
.provider-card .pv-price{font-size:.82rem;font-weight:700;color:var(--g2)}
.provider-card .pv-avail{font-size:.72rem}
.provider-card .pv-avail.on{color:var(--success)}
.provider-card .pv-avail.off{color:var(--text3)}
.trust-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.trust-badge{display:inline-flex;align-items:center;gap:5px;background:var(--sand);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:.73rem;color:var(--text2);font-weight:600;cursor:default;position:relative}
.trust-badge[title]:hover::after{content:attr(title);position:absolute;bottom:110%;right:50%;transform:translateX(50%);background:var(--g1);color:#fff;padding:4px 8px;border-radius:6px;font-size:.7rem;white-space:nowrap;z-index:10}
.empty-state{text-align:center;padding:48px 20px;color:var(--text2)}
.empty-state .ei{font-size:2.5rem;margin-bottom:12px}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200%;animation:sh 1.5s infinite;border-radius:6px}
@keyframes sh{0%{background-position:200%}100%{background-position:-200%}}
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(-50%) translateY(100px);background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 20px;box-shadow:var(--sh);font-size:.88rem;font-weight:600;display:flex;align-items:center;gap:8px;z-index:999;transition:transform .3s}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.s{border-color:#6EE7B7;color:#065F46}
#toast.e{border-color:#FCA5A5;color:#991B1B}

/* ── GLOBAL RESPONSIVE (all /app/ screens) ──────────────────── */
@media(max-width:600px){
  .page-wrap{padding:16px 12px}
  .provider-card{flex-direction:column;gap:8px}
  .option-btn{font-size:.85rem;padding:10px 12px}
  .app-nav{padding:0 12px}
  .card{padding:14px 12px}
  .page-title{font-size:1.2rem}
  .quick-grid{grid-template-columns:1fr}
}
/* ── SKELETON LOADING ─────────────────────────────────────────── */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel,.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e6e6e6 50%,#f0f0f0 75%);
  background-size:200%;animation:shimmer 1.5s infinite;border-radius:6px;display:block}
/* ── CARD DEPTH ────────────────────────────────────────────────── */
.provider-card{box-shadow:0 2px 12px rgba(7,51,40,.07);transition:transform .2s,box-shadow .2s}
.provider-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(7,51,40,.14)}
.option-btn{transition:all .15s}
/* ── BUTTON RIPPLE ─────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 10%,transparent 70%);transform:scale(0);opacity:0;transition:.4s;border-radius:inherit}
.btn:active::after{transform:scale(2.5);opacity:1;transition:none}
</style>
</head>
<body>
<nav class="app-nav">
  <a href="<?= $SITE ?>/" class="logo">🇸🇩 سودانا</a>
  <?php if(isset($backUrl)): ?><a href="<?= $backUrl ?>" class="nav-back">← <?= $backLabel ?? 'رجوع' ?></a><?php endif; ?>
  <div class="nav-right">
    <a href="<?= $SITE ?>/wallet.php" class="nav-back">💳</a>
    <a href="<?= $SITE ?>/app/notifications.php" class="nav-back">🔔</a>
  </div>
</nav>
<div id="toast"><span id="ti"></span><span id="tm"></span></div>
<script>
const SITE_URL='<?= $SITE ?>';
const LANG='<?= $lang ?>';
function toast(m,t='s'){const el=document.getElementById('toast');el.className=t;document.getElementById('ti').textContent=t==='s'?'✅':'❌';document.getElementById('tm').textContent=m;el.classList.add('show');setTimeout(()=>el.classList.remove('show'),3500);}
</script>

<nav style="position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;display:flex;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));z-index:100">
  <a href="/app/hub.php" style="flex:1;text-align:center;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit"><span style="font-size:1.1rem;display:block">&#127968;</span>الهب</a>
  <a href="/app/pay.php" style="flex:1;text-align:center;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit"><span style="font-size:1.1rem;display:block">&#128179;</span>Pay</a>
  <a href="/app/profile.php" style="flex:1;text-align:center;text-decoration:none;color:#64748b;font-size:.6rem;font-family:inherit"><span style="font-size:1.1rem;display:block">&#128100;</span>حسابي</a>
</nav>