<?php
require_once dirname(__DIR__).'/config.php';
$u = current_user();
if (!$u) { header('Location: ' . url('?login=1')); exit; }
$uid  = (int)$u['id'];
$plan = $u['plan_key'] ?? 'free';
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <title>المسار المهني — سودانا</title>
  <style>
    :root{--g:#0ea5e9;--dark:#073328;--bg:#f0fdf4;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#e2e8f0;--safe-bottom:env(safe-area-inset-bottom,0px)}
    *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
    body{font-family:'Cairo','Noto Sans Arabic',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:calc(70px + var(--safe-bottom))}
    .hdr{background:var(--dark);height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:sticky;top:0;z-index:100}
    .logo{color:#fff;font-weight:900;font-size:1rem}.back{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none}
    .hero{background:linear-gradient(135deg,var(--dark),#0a2a1a);padding:28px 16px 0;position:relative}
    .hero::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:20px;background:var(--bg);border-radius:20px 20px 0 0}
    .hero-emoji{font-size:2.5rem;margin-bottom:8px}
    .hero-title{color:#fff;font-size:1.3rem;font-weight:900;margin-bottom:6px}
    .hero-desc{color:rgba(255,255,255,.65);font-size:.82rem;line-height:1.65;max-width:440px;margin-bottom:16px}
    .chat-wrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;margin-bottom:4px}
    .chat-msgs{height:180px;overflow-y:scroll;-webkit-overflow-scrolling:touch;padding:12px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
    .cmsg-bot{background:rgba(255,255,255,.1);border-radius:11px 11px 11px 3px;padding:9px 12px;font-size:.82rem;line-height:1.65;color:rgba(255,255,255,.92);max-width:88%;animation:mi .3s ease}
    .cmsg-user{background:rgba(0,217,126,.2);border-radius:11px 11px 3px 11px;padding:9px 12px;font-size:.82rem;line-height:1.65;color:#fff;max-width:88%;margin-right:auto;margin-left:0;animation:mi .3s ease}
    .ctyping{display:flex;gap:5px;align-items:center;padding:9px 12px;background:rgba(255,255,255,.08);border-radius:11px 11px 11px 3px;width:fit-content}
    .ctyping span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);animation:td 1.2s infinite;display:inline-block}
    .ctyping span:nth-child(2){animation-delay:.2s}.ctyping span:nth-child(3){animation-delay:.4s}
    @keyframes td{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
    @keyframes mi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
    .cchoices{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
    .cchoice{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.2);border-radius:18px;padding:5px 12px;font-size:.75rem;color:rgba(255,255,255,.9);font-family:inherit;cursor:pointer;transition:.2s;touch-action:manipulation}
    .cchoice:active{background:rgba(0,217,126,.2)}
    .cinput-row{display:flex;gap:8px;padding:9px 11px;border-top:1px solid rgba(255,255,255,.08)}
    .cinput{flex:1;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:9px 12px;color:#fff;font-family:inherit;font-size:16px;outline:none}
    .cinput::placeholder{color:rgba(255,255,255,.4)}.cinput:focus{border-color:rgba(0,217,126,.4)}
    .csend{background:var(--g);border:none;border-radius:9px;width:38px;height:38px;color:#000;cursor:pointer;font-size:1rem;flex-shrink:0}
    .container{max-width:720px;margin:0 auto;padding:16px}
    .section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
    .sec-title{font-size:.9rem;font-weight:800;color:var(--dark);margin-bottom:12px;display:flex;align-items:center;gap:6px}
    .feature{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
    .feature:last-child{border:none}
    .f-icon{font-size:1.4rem;flex-shrink:0;width:32px;text-align:center}
    .f-title{font-weight:700;font-size:.85rem;margin-bottom:2px}
    .f-desc{font-size:.75rem;color:var(--muted);line-height:1.5}
    .cta-btn{background:linear-gradient(135deg,var(--g),#059669);color:#fff;border:none;border-radius:12px;padding:13px;width:100%;font-family:inherit;font-weight:800;font-size:.92rem;cursor:pointer}
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;padding:8px 0 calc(8px + var(--safe-bottom));z-index:100}
    .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-size:.62rem;padding:4px 0}
    .nav-item.active{color:var(--g)}.nav-icon{font-size:1.2rem}
    @media(max-width:480px){.hero-title{font-size:1.1rem}}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">💼 المسار المهني</div>
  <a href="/app/dashboard.php" class="back">← الرئيسية</a>
</header>
<div class="hero">
  <div class="hero-emoji">💼</div>
  <div class="hero-title">المسار المهني</div>
  <div class="hero-desc">طور مسيرتك المهنية — وظائف، تدريب، وفرص</div>
  <div class="chat-wrap">
    <div class="chat-msgs" id="chat-msgs"></div>
    <div class="cinput-row">
      <input type="text" class="cinput" id="chat-q" placeholder="اسألني عن career..." autocomplete="off" onkeydown="if(event.key==='Enter')send()">
      <button class="csend" onclick="send()">↑</button>
    </div>
  </div>
</div>
<div class="container">
  <div class="section">
    <div class="sec-title">✨ ما نقدمه</div>
    <div class="feature"><span class="f-icon">📄</span><div><div class="f-title">كتابة CV</div><div class="f-desc">CV احترافي بالعربي والإنجليزي</div></div></div>
<div class="feature"><span class="f-icon">💼</span><div><div class="f-title">فرص العمل</div><div class="f-desc">وظائف في السودان وخارجه</div></div></div>
<div class="feature"><span class="f-icon">🎓</span><div><div class="f-title">التدريب والتطوير</div><div class="f-desc">كورسات وشهادات مهنية</div></div></div>
<div class="feature"><span class="f-icon">🤝</span><div><div class="f-title">التواصل المهني</div><div class="f-desc">اربط مع خبراء في مجالك</div></div></div>
  </div>
  <button class="cta-btn" onclick="startFlow()">ابدأ الآن — مجاناً</button>
</div>
<nav class="bottom-nav">
  <a href="/app/dashboard.php" class="nav-item"><span class="nav-icon">🏠</span><span>الرئيسية</span></a>
  <a href="/app/services.php"  class="nav-item"><span class="nav-icon">⚡</span><span>الخدمات</span></a>
  <a href="/app/suggestions.php" class="nav-item"><span class="nav-icon">💡</span><span>اقتراح</span></a>
  <a href="/app/notifications.php" class="nav-item"><span class="nav-icon">🔔</span><span>إشعارات</span></a>
  <a href="/app/profile.php"   class="nav-item"><span class="nav-icon">👤</span><span>حسابي</span></a>
</nav>
<script>
function addMsg(text, isUser=false) {
  const c=document.getElementById('chat-msgs');
  const d=document.createElement('div');
  d.className=isUser?'cmsg-user':'cmsg-bot';
  d.innerHTML=text.replace(/\n/g,'<br>');
  c.appendChild(d); c.scrollTop=c.scrollHeight; return d;
}
function addTyping(){const c=document.getElementById('chat-msgs');const d=document.createElement('div');d.className='ctyping';d.innerHTML='<span></span><span></span><span></span>';c.appendChild(d);c.scrollTop=c.scrollHeight;return d;}
function addChoices(choices,cb){const c=document.getElementById('chat-msgs');const row=document.createElement('div');row.className='cchoices';choices.forEach(ch=>{const btn=document.createElement('button');btn.className='cchoice';btn.textContent=ch.label;btn.onclick=()=>{row.remove();addMsg(ch.label,true);setTimeout(()=>cb(ch.value),300);};row.appendChild(btn);});c.appendChild(row);c.scrollTop=c.scrollHeight;}
function sleep(ms){return new Promise(r=>setTimeout(r,ms));}
async function typeMsg(text,delay=700){const t=addTyping();await sleep(delay);t.remove();addMsg(text);}

window.addEventListener('DOMContentLoaded',async()=>{
  await typeMsg('أهلاً 🙂\nمساعدك المهني. شنو هدفك الوظيفي؟\n\nشنو تحتاج اليوم؟',700);
  addChoices([{label:'اسألني سؤالاً',value:'ask'},{label:'احجز مزوداً',value:'book'},{label:'استعرض الخدمات',value:'browse'}],async(v)=>{
    if(v==='book')window.location.href='/app/flow.php?service=career';
    else if(v==='browse')document.querySelector('.section').scrollIntoView({behavior:'smooth'});
    else{addMsg('اكتب سؤالك وأنا هنا 🙂');document.getElementById('chat-q').focus();}
  });
});

async function send(){
  const inp=document.getElementById('chat-q');
  const q=inp.value.trim(); if(!q)return;
  inp.value=''; addMsg(q,true);
  const t=addTyping();
  try{
    const r=await fetch('/api/visitor_ask.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({question:q,lang:'ar'})});
    const d=await r.json(); t.remove();
    addMsg((d.answer||'تعذّر الرد').replace(/\n/g,'<br>').replace(/\*\*(.*?)\*\*/g,'<strong>$1</strong>'));
  }catch(e){t.remove();addMsg('تعذّر الاتصال. جرب مرة أخرى.');}
}

function startFlow(){window.location.href='/app/flow.php?service=career';}
</script>
</body>
</html>