<?php
require_once dirname(__DIR__).'/config.php';
$u = current_user();
if (!$u) { header('Location: ' . url('?login=1')); exit; }
?><!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:#ec4899;--g2:#be185d;--dark:#1a0a14;--bg:#fdf2f8;--card:#fff;--text:#1e293b;--muted:#64748b;--border:#fce7f3;--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);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;display:flex;align-items:center;gap:6px}
    .back{color:rgba(255,255,255,.6);font-size:.82rem;text-decoration:none}
    .hero{background:linear-gradient(135deg,var(--dark),#3d0a24);padding:28px 16px;text-align:center;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 h1{color:#fff;font-size:1.3rem;font-weight:900;margin-bottom:6px}
    .hero p{color:rgba(255,255,255,.65);font-size:.83rem;line-height:1.65;max-width:400px;margin:0 auto 16px}
    .hero-btn{background:var(--g);color:#fff;border:none;border-radius:12px;padding:11px 24px;font-family:inherit;font-weight:800;font-size:.88rem;cursor:pointer;touch-action:manipulation}
    .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}
    .cats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
    .cat-chip{background:#fce7f3;border:1px solid #fbcfe8;border-radius:20px;padding:6px 14px;font-size:.75rem;font-weight:700;color:var(--g2);cursor:pointer;touch-action:manipulation}
    .cat-chip.active{background:var(--g);color:#fff;border-color:var(--g)}
    .products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .product-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:.15s}
    .product-card:active{transform:scale(.98)}
    .product-img{background:linear-gradient(135deg,#fce7f3,#fbcfe8);height:110px;display:flex;align-items:center;justify-content:center;font-size:2.5rem}
    .product-info{padding:10px}
    .product-name{font-weight:700;font-size:.82rem;margin-bottom:2px}
    .product-seller{font-size:.7rem;color:var(--muted)}
    .product-price{font-size:.85rem;font-weight:800;color:var(--g2);margin-top:4px}
    .product-btn{background:var(--g);color:#fff;border:none;border-radius:8px;padding:7px;width:100%;font-family:inherit;font-size:.75rem;font-weight:700;cursor:pointer;margin-top:6px}
    .join-card{background:linear-gradient(135deg,var(--dark),#3d0a24);border-radius:14px;padding:18px;color:#fff;text-align:center}
    .join-card h3{font-size:1rem;font-weight:800;margin-bottom:8px}
    .join-card p{font-size:.78rem;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:14px}
    .join-btn{background:var(--g);color:#fff;border:none;border-radius:10px;padding:11px 24px;font-family:inherit;font-weight:800;font-size:.85rem;cursor:pointer}
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e2e8f0;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:#64748b;font-size:.62rem;padding:4px 0}
    .nav-item.active{color:var(--g)}
    .nav-icon{font-size:1.2rem}
    .empty{text-align:center;padding:32px 16px;color:var(--muted)}
    .empty-icon{font-size:3rem;margin-bottom:10px}
  </style>
</head>
<body>
<header class="hdr">
  <div class="logo">🌸 بسطتي</div>
  <a href="/app/dashboard.php" class="back">← الرئيسية</a>
</header>
<div class="hero">
  <h1>🌸 بسطتي — سوقك من بيتك</h1>
  <p>بيعي منتجاتك لآلاف الزبائن في السودان — طعام، ملابس، تجميل، وحرف يدوية</p>
  <button class="hero-btn" onclick="window.location.href='/app/provider-register.php?domain=food'">ابدئي البيع الآن 🚀</button>
</div>
<div class="container">

  <div class="section">
    <div class="sec-title">🛍️ تصفح المنتجات</div>
    <div class="cats-row" id="cats-row">
      <div class="cat-chip active" onclick="filterCat('all',this)">الكل</div>
      <div class="cat-chip" onclick="filterCat('food',this)">🍲 طعام</div>
      <div class="cat-chip" onclick="filterCat('clothes',this)">👗 ملابس</div>
      <div class="cat-chip" onclick="filterCat('beauty',this)">💄 تجميل</div>
      <div class="cat-chip" onclick="filterCat('craft',this)">🧶 حرف</div>
    </div>
    <div class="products-grid" id="products-grid" style="margin-top:12px">
      <!-- يُملأ من JS -->
    </div>
  </div>

  <div class="join-card">
    <h3>معك منتج تبيعينه؟</h3>
    <p>سجِّلي كمزودة وأنشئي بسطتك الرقمية في 5 دقائق.<br>الزبائن يبحثون عن منتجاتك الآن.</p>
    <button class="join-btn" onclick="window.location.href='/app/provider-register.php?domain=food'">سجِّلي بسطتك — مجاناً</button>
  </div>
</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/bazaar.php"    class="nav-item active"><span class="nav-icon">🌸</span><span>بسطتي</span></a>
  <a href="/app/market.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>
const DEMO_PRODUCTS=[
  {name:'كسرة وملاح سوداني',seller:'أم عبدالله - الخرطوم',price:'150 SDG',cat:'food',emoji:'🍲'},
  {name:'توب سوداني مطرز',seller:'خياطة فاطمة',price:'2,500 SDG',cat:'clothes',emoji:'👗'},
  {name:'عطر الدلكة بالصندل',seller:'صانعة عطور نادية',price:'800 SDG',cat:'beauty',emoji:'✨'},
  {name:'سلة خوص مزخرفة',seller:'حرفيات الخرطوم',price:'350 SDG',cat:'craft',emoji:'🧺'},
  {name:'بسبوسة وحلويات',seller:'مطبخ أم أمل',price:'500 SDG/كيلو',cat:'food',emoji:'🍰'},
  {name:'جلباب رجالي أبيض',seller:'خياط أبو محمد',price:'3,500 SDG',cat:'clothes',emoji:'👘'},
];

function filterCat(cat,btn){
  document.querySelectorAll('.cat-chip').forEach(b=>b.classList.remove('active'));
  btn.classList.add('active');
  const filtered=cat==='all'?DEMO_PRODUCTS:DEMO_PRODUCTS.filter(p=>p.cat===cat);
  renderProducts(filtered);
}

function renderProducts(products){
  const grid=document.getElementById('products-grid');
  if(!products.length){
    grid.innerHTML='<div class="empty" style="grid-column:1/-1"><div class="empty-icon">🛍️</div><p>لا منتجات في هذه الفئة بعد</p></div>';
    return;
  }
  grid.innerHTML=products.map(p=>`
    <div class="product-card">
      <div class="product-img">${p.emoji}</div>
      <div class="product-info">
        <div class="product-name">${p.name}</div>
        <div class="product-seller">${p.seller}</div>
        <div class="product-price">${p.price}</div>
        <button class="product-btn" onclick="orderProduct('${p.name}')">اطلب الآن</button>
      </div>
    </div>`).join('');
}

function orderProduct(name){
  window.location.href='/api/visitor_ask.php?q='+encodeURIComponent('أريد طلب: '+name);
}

renderProducts(DEMO_PRODUCTS);
</script>
<script src="/assets/pricing-loader.js" defer></script>
</body>
</html>