/* ─── Mobile dashboard preview ───────────────────────────────────────────────
   Tweak "Device: Mobile" renders this instead of the desktop AppShell.
   Reuses DASH_SERIES / Sparkline / slice7 / sum / pct from dashboard-v2.jsx
   (shared Babel scope). Desktop components untouched. */

const MOBILE_TABS = [
  { id:'dashboard',  label:'Home',      icon:'dashboard' },
  { id:'products',   label:'Products',  icon:'product' },
  { id:'promotions', label:'Promos',    icon:'promotion' },
  { id:'campaigns',  label:'Campaigns', icon:'campaign' },
  { id:'more',       label:'Claims',    icon:'inbox' },
];

function MobileMetric({ label, value, delta, series, color }) {
  const up = delta >= 0;
  return (
    <div className="bg-white rounded-2xl border border-line shadow-soft p-4">
      <p className="text-[10.5px] font-bold uppercase tracking-[0.08em] text-ink-muted">{label}</p>
      <p className="mt-1.5 text-[22px] font-extrabold tracking-tight text-ink leading-none">{typeof value==='number'?value.toLocaleString():value}</p>
      <div className="mt-2 flex items-center justify-between gap-2">
        <span className={"text-[10.5px] font-bold "+(up?"text-green-600":"text-rose-600")}>{up?'↑':'↓'} {Math.abs(delta)}%</span>
        <svg width="56" height="20" className="block">{(() => { const max=Math.max(...series,1); const pts=series.map((v,i)=>`${(i/(series.length-1))*56},${20-(v/max)*16-2}`).join(' '); return <polyline points={pts} fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" opacity=".9"/>; })()}</svg>
      </div>
    </div>
  );
}

function MobileDashboard({ onGo }) {
  const [period, setPeriod] = React.useState('7 days');
  const n = DASH_PERIODS[period];
  const metric = (key) => {
    const cur = sum(slice7(DASH_SERIES[key], n));
    const prev = sum(DASH_SERIES[key].slice(-(n*2), -n)) || 1;
    return { v:cur, d:pct(cur, prev) };
  };
  const avgArr = slice7(DASH_SERIES.rating, Math.max(n,3));
  const avgRating = avgArr.reduce((a,b)=>a+b,0)/avgArr.length;
  const visits = sum(slice7(DASH_SERIES.visits,Math.max(n,7))), reviews = sum(slice7(DASH_SERIES.reviews,Math.max(n,7))), delivered = sum(slice7(DASH_SERIES.delivered,Math.max(n,7)));
  const funnel = [
    { label:'Claim page visits', v:visits, color:'#0E9AD6' },
    { label:'Reviews submitted', v:reviews, color:'#6C57E0' },
    { label:'Promos delivered',  v:delivered, color:'#27B079' },
  ];
  return (
    <div className="px-4 pb-5 space-y-4">
      {/* period switch */}
      <div className="grid grid-cols-3 bg-surface-input rounded-xl p-1 sticky top-[64px] z-10">
        {Object.keys(DASH_PERIODS).map(p => (
          <button key={p} onClick={()=>setPeriod(p)}
            className={"py-2 rounded-lg text-[12px] font-bold transition-colors "+(period===p?"bg-white text-ink shadow-sm":"text-ink-muted")}>{p}</button>
        ))}
      </div>
      {/* plan banner */}
      <div className="rounded-2xl bg-white border border-line shadow-soft px-4 py-3 flex items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-[12.5px] font-bold text-ink">Free plan · <span className="text-ink-muted font-medium">1/30 reviews</span></p>
          <div className="mt-1.5 w-32 h-1.5 rounded-full bg-surface-input overflow-hidden">
            <div className="h-full rounded-full" style={{width:'3.3%',background:'linear-gradient(90deg,var(--accent),var(--accent-dark))'}}></div>
          </div>
        </div>
        <button onClick={()=>window.__openPricing && window.__openPricing()} className="text-[12px] font-bold acc-text whitespace-nowrap">Upgrade →</button>
      </div>
      {/* 2×2 metrics */}
      <div className="grid grid-cols-2 gap-3">
        <MobileMetric label="Reviews" value={metric('reviews').v} delta={metric('reviews').d} series={slice7(DASH_SERIES.reviews,14)} color="#0E9AD6"/>
        <MobileMetric label="Avg rating" value={avgRating.toFixed(1)+' ★'} delta={2} series={slice7(DASH_SERIES.rating,14)} color="#F59E0B"/>
        <MobileMetric label="Delivered" value={metric('delivered').v} delta={metric('delivered').d} series={slice7(DASH_SERIES.delivered,14)} color="#27B079"/>
        <MobileMetric label="Customers" value={Math.round(metric('reviews').v*0.9)} delta={metric('reviews').d} series={slice7(DASH_SERIES.reviews,14).map(v=>Math.max(1,v-1))} color="#6C57E0"/>
      </div>
      {/* chart */}
      <div className="bg-white rounded-2xl border border-line shadow-soft p-4">
        <div className="flex items-baseline justify-between">
          <h3 className="text-[13.5px] font-bold text-ink">Reviews over time</h3>
          <span className="text-[11px] text-ink-muted">Last {Math.max(n,7)}d</span>
        </div>
        {(() => { const data = slice7(DASH_SERIES.reviews, Math.max(n,7)); const w=320,h=110,max=Math.max(...data)+2;
          const x=i=>(i/(data.length-1))*w, y=v=>h-(v/max)*(h-16)-4;
          const line=data.map((v,i)=>`${x(i)},${y(v)}`).join(' ');
          return (
            <svg viewBox={`0 0 ${w} ${h}`} className="w-full mt-3" preserveAspectRatio="none" style={{height:110}}>
              {[0.33,0.66].map(f=><line key={f} x1="0" x2={w} y1={h*f} y2={h*f} stroke="#ECE9E3" strokeWidth="1"/>)}
              <polygon points={`0,${h} ${line} ${w},${h}`} fill="url(#mGrad)" opacity=".3"/>
              <polyline points={line} fill="none" stroke="#0E9AD6" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              <defs><linearGradient id="mGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="#0E9AD6"/><stop offset="100%" stopColor="#0E9AD6" stopOpacity="0"/></linearGradient></defs>
            </svg>
          ); })()}
      </div>
      {/* funnel */}
      <div className="bg-white rounded-2xl border border-line shadow-soft p-4">
        <h3 className="text-[13.5px] font-bold text-ink">Claim funnel</h3>
        <div className="mt-3 space-y-2.5">
          {funnel.map((r,i)=>(
            <div key={r.label}>
              <div className="flex items-baseline justify-between text-[11.5px]">
                <span className="font-semibold text-ink">{r.label}</span>
                <span className="font-extrabold text-ink">{r.v.toLocaleString()}{i>0 && <span className="font-medium text-ink-soft"> · {Math.round(r.v/funnel[i-1].v*100)}%</span>}</span>
              </div>
              <div className="mt-1 h-2 rounded-full bg-surface-input overflow-hidden">
                <div className="h-full rounded-full" style={{width:(r.v/funnel[0].v*100)+'%', background:r.color}}></div>
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* activity */}
      <div className="bg-white rounded-2xl border border-line shadow-soft overflow-hidden">
        <div className="px-4 py-3 flex items-center justify-between">
          <h3 className="text-[13.5px] font-bold text-ink">Recent activity</h3>
          <button onClick={()=>onGo && onGo('claims')} className="text-[11.5px] font-bold acc-text">View all</button>
        </div>
        <div className="divide-y divide-gray-100">
          {DASH_ACTIVITY.slice(0,4).map((a,i)=>(
            <div key={i} className="px-4 py-2.5 flex items-center gap-3">
              <span className="w-8 h-8 rounded-full text-white text-[11px] font-bold flex items-center justify-center shrink-0"
                    style={{background:`linear-gradient(135deg, hsl(${(i*67+30)%360},60%,60%), hsl(${(i*67+70)%360},55%,45%))`}}>{a.name[0]}</span>
              <div className="min-w-0 flex-1">
                <p className="text-[12px] text-ink truncate"><span className="font-bold">{a.name}</span> · {a.product}</p>
                <p className="text-[10.5px] text-ink-soft">{a.time}</p>
              </div>
              <span className="text-[11px] font-bold text-ink whitespace-nowrap">{a.stars}.0 <span style={{color:'#F59E0B'}}>★</span></span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ── Mobile Promotions ──────────────────────────────────────────────── */
function MobilePromotions({ createTick }) {
  const [items, setItems] = React.useState(PROMOS_V2);
  const [query, setQuery] = React.useState('');
  const [type, setType]   = React.useState('All');
  const [sheet, setSheet] = React.useState(null);   // {mode:'edit',i} | {mode:'add'}
  const [form, setForm]   = React.useState({});
  React.useEffect(() => { if (createTick) openAdd(); }, [createTick]);
  const openAdd  = () => { setForm({ name:'', type:'Warranty' }); setSheet({mode:'add'}); };
  const openEdit = (i) => { setForm({ ...items[i] }); setSheet({mode:'edit', i}); };
  const iconFor = (tp) => ({'Warranty':'shield','Extended Warranty':'shield-ext','Cashback':'cash','Coupon code':'coupon','Gift Card':'gift','Digital Download':'cloud','Product Information':'info','Product Giveaway':'box'}[tp] || 'shield');
  const save = () => {
    if (sheet.mode === 'add') setItems([{ name:form.name.trim(), type:form.type, icon:iconFor(form.type), camps:0, status:true, created:'19 Jul 2026', delivered:0 }, ...items]);
    else setItems(items.map((p,ix)=>ix===sheet.i ? {...p, name:form.name.trim(), type:form.type, icon:iconFor(form.type)} : p));
    window.rbToast && window.rbToast(sheet.mode==='add' ? 'Promotion created 🎉' : 'Promotion updated');
    setSheet(null);
  };
  const types = ['All', ...Array.from(new Set(items.map(p=>p.type)))];
  const rows = items
    .filter(p => p.name.toLowerCase().includes(query.toLowerCase()))
    .filter(p => type === 'All' ? true : p.type === type);
  const active = items.filter(p=>p.status).length;
  const unused = items.filter(p=>p.camps===0).length;
  if (sheet) return (
    <MobileSubScreen backLabel="Promotions" title={sheet.mode==='add' ? 'New promotion' : 'Edit promotion'} onBack={()=>setSheet(null)}
      canSave={(form.name||'').trim().length>0} saveLabel={sheet.mode==='add' ? 'Create promotion' : 'Save changes'} onSave={save}>
      <MobileField label="Promotion name" value={form.name||''} onChange={e=>setForm({...form,name:e.target.value})} placeholder="e.g. Spain Warranty"/>
      <div>
        <p className="text-[11px] font-bold uppercase tracking-wide text-ink-muted mb-1.5">Type</p>
        <div className="flex flex-wrap gap-1.5">
          {['Warranty','Extended Warranty','Cashback','Coupon code','Gift Card','Digital Download','Product Information','Product Giveaway'].map(tp=>(
            <button key={tp} onClick={()=>setForm({...form,type:tp})}
              className={"px-2.5 py-1.5 rounded-full text-[11px] font-bold border transition-colors "+(form.type===tp?"bg-ink text-white border-ink":"bg-white text-ink-muted border-line")}>{tp}</button>
          ))}
        </div>
      </div>
      <p className="text-[11px] text-ink-soft">Card design (copy, theme, animation) is edited in the desktop promotion studio.</p>
    </MobileSubScreen>
  );
  return (
    <div className="px-4 pb-5 space-y-4">
      {/* summary chips */}
      <div className="grid grid-cols-3 gap-2">
        {[['All', items.length],['Active', active],['Unused', unused]].map(([lb,v])=>(
          <div key={lb} className="bg-white rounded-xl border border-line shadow-soft px-3 py-2.5 text-center">
            <p className="text-[18px] font-extrabold text-ink leading-none">{v}</p>
            <p className="text-[10px] font-bold uppercase tracking-wide text-ink-muted mt-1">{lb}</p>
          </div>
        ))}
      </div>
      {/* search */}
      <div className="relative">
        <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-soft" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search promotions"
          className="w-full bg-white border border-line rounded-xl pl-9 pr-3 py-2.5 text-[13px] placeholder:text-ink-soft outline-none focus:border-brand-200 acc-ring"/>
      </div>
      {/* type chips — horizontal scroll */}
      <div className="flex gap-2 overflow-x-auto no-scrollbar -mx-4 px-4 pb-0.5">
        {types.map(tp => {
          const on = type === tp;
          return (
            <button key={tp} onClick={()=>setType(tp)}
              className={"shrink-0 px-3 py-1.5 rounded-full text-[11.5px] font-bold border transition-colors whitespace-nowrap "+(on?"bg-ink text-white border-ink":"bg-white text-ink-muted border-line")}>
              {tp}
            </button>
          );
        })}
      </div>
      {/* promo cards */}
      {rows.length === 0 ? (
        <div className="bg-white rounded-2xl border border-line shadow-soft py-12 text-center">
          <p className="text-[13.5px] font-bold text-ink">No promotions match</p>
          <button onClick={()=>{setQuery('');setType('All');}} className="mt-2 text-[12px] font-bold acc-text">Clear filters</button>
        </div>
      ) : (
        <div className="space-y-2.5">
          {rows.map(p => (
            <div key={p.name} className="bg-white rounded-2xl border border-line shadow-soft p-3.5">
              <div className="flex items-center gap-3">
                <span className="w-9 h-9 rounded-xl bg-surface-input flex items-center justify-center shrink-0"><PromoIcon kind={p.icon}/></span>
                <div className="min-w-0 flex-1">
                  <p className="font-bold text-[13px] text-ink leading-snug truncate">{p.name}</p>
                  <p className="mt-0.5"><TypeBadge type={p.type}/></p>
                </div>
                <StatusToggle checked={p.status}/>
              </div>
              <div className="mt-3 pt-2.5 border-t border-line/70 flex items-center justify-between gap-2 text-[11px]">
                <span className="text-ink-muted whitespace-nowrap truncate">{p.camps > 0
                  ? <><b className="text-ink">{p.camps}</b> campaign{p.camps>1?'s':''} · <b className="text-ink">{p.delivered}</b> delivered</>
                  : <span className="text-amber-600 font-bold">Not used yet</span>}</span>
                <button onClick={()=>openEdit(items.indexOf(p))} className="font-bold acc-text whitespace-nowrap shrink-0">Edit →</button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ── Mobile Products ─────────────────────────────────────────────────── */
function MobileProducts({ createTick }) {
  const [items, setItems]   = React.useState(PRODUCTS_V2);
  const [query, setQuery]   = React.useState('');
  const [filter, setFilter] = React.useState('all');   // all | in | none
  const [sheet, setSheet]   = React.useState(null);
  const [form, setForm]     = React.useState({});
  React.useEffect(() => { if (createTick) { setForm({ name:'', mkt:['amazon'] }); setSheet({mode:'add'}); } }, [createTick]);
  const MKT_OPTIONS = ['amazon','shopify','google','etsy','ebay','temu','walmart','flipkart','myntra','nykaa'];
  const toggleMkt = (k) => setForm(f => ({...f, mkt: f.mkt.includes(k) ? f.mkt.filter(x=>x!==k) : [...f.mkt, k]}));
  const save = () => {
    if (sheet.mode === 'add') setItems([{ name:form.name.trim(), mkt:form.mkt, camp:0 }, ...items]);
    else setItems(items.map((p,ix)=>ix===sheet.i ? {...p, name:form.name.trim(), mkt:form.mkt} : p));
    window.rbToast && window.rbToast(sheet.mode==='add' ? 'Product published 🎉' : 'Product updated');
    setSheet(null);
  };
  const rows = items
    .filter(p => p.name.toLowerCase().includes(query.toLowerCase()))
    .filter(p => filter === 'all' ? true : filter === 'in' ? p.camp > 0 : p.camp === 0);
  const inCamp = items.filter(p=>p.camp>0).length;
  if (sheet) return (
    <MobileSubScreen backLabel="Products" title={sheet.mode==='add' ? 'Add product' : 'Edit product'} onBack={()=>setSheet(null)}
      canSave={(form.name||'').trim().length>0 && (form.mkt||[]).length>0} saveLabel={sheet.mode==='add' ? 'Publish product' : 'Save changes'} onSave={save}>
      <MobileField label="Product name" value={form.name||''} onChange={e=>setForm({...form,name:e.target.value})} placeholder="e.g. Brontix WiFi Router"/>
      <div>
        <p className="text-[11px] font-bold uppercase tracking-wide text-ink-muted mb-1.5">Marketplaces · {(form.mkt||[]).length} selected</p>
        <div className="flex flex-wrap gap-1.5">
          {MKT_OPTIONS.map(k => {
            const m = MKT_META[k] || {label:k};
            const on = (form.mkt||[]).includes(k);
            return (
              <button key={k} onClick={()=>toggleMkt(k)}
                className={"px-2.5 py-1.5 rounded-full text-[11px] font-bold border transition-colors "+(on?"bg-ink text-white border-ink":"bg-white text-ink-muted border-line")}>{m.label}</button>
            );
          })}
        </div>
      </div>
      <p className="text-[11px] text-ink-soft">Marketplace URLs, images and review tags are set in the desktop editor.</p>
    </MobileSubScreen>
  );
  return (
    <div className="px-4 pb-5 space-y-4">
      {/* summary chips as filters */}
      <div className="grid grid-cols-3 gap-2">
        {[['all','All',items.length],['in','In campaign',inCamp],['none','No campaign',items.length-inCamp]].map(([id,lb,v])=>(
          <button key={id} onClick={()=>setFilter(id)}
            className={"rounded-xl border px-2 py-2.5 text-center transition-all "+(filter===id?"bg-white border-brand-200 ring-1 ring-brand-200 shadow-soft":"bg-white border-line shadow-soft")}>
            <p className="text-[18px] font-extrabold text-ink leading-none">{v}</p>
            <p className="text-[9.5px] font-bold uppercase tracking-wide text-ink-muted mt-1 whitespace-nowrap">{lb}</p>
          </button>
        ))}
      </div>
      {/* search */}
      <div className="relative">
        <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-soft" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search products"
          className="w-full bg-white border border-line rounded-xl pl-9 pr-3 py-2.5 text-[13px] placeholder:text-ink-soft outline-none focus:border-brand-200 acc-ring"/>
      </div>
      {/* product cards */}
      {rows.length === 0 ? (
        <div className="bg-white rounded-2xl border border-line shadow-soft py-12 text-center">
          <p className="text-[13.5px] font-bold text-ink">No products match</p>
          <button onClick={()=>{setQuery('');setFilter('all');}} className="mt-2 text-[12px] font-bold acc-text">Clear filters</button>
        </div>
      ) : (
        <div className="space-y-2.5">
          {rows.map(p => {
            const hue = (items.indexOf(p)*37)%360;
            return (
              <div key={p.name} className="bg-white rounded-2xl border border-line shadow-soft p-3.5">
                <div className="flex items-center gap-3">
                  <span className="w-11 h-11 rounded-xl shrink-0" style={{background:`linear-gradient(135deg, hsl(${hue},75%,72%), hsl(${(hue+40)%360},65%,50%))`}}></span>
                  <div className="min-w-0 flex-1">
                    <p className="font-bold text-[13px] text-ink leading-snug truncate">{p.name}</p>
                    <p className="text-[11px] text-ink-soft mt-0.5">{p.mkt.length} marketplace{p.mkt.length>1?'s':''}</p>
                  </div>
                  <CampBadge n={p.camp}/>
                </div>
                <div className="mt-2.5"><MktChips list={p.mkt} max={4}/></div>
                <div className="mt-3 pt-2.5 border-t border-line/70 flex items-center justify-between gap-2 text-[11px]">
                  {p.camp === 0
                    ? <span className="text-amber-600 font-bold whitespace-nowrap">Not in a campaign</span>
                    : <span className="text-ink-muted whitespace-nowrap">Collecting reviews</span>}
                  <button onClick={()=>{ setForm({ name:p.name, mkt:[...p.mkt] }); setSheet({mode:'edit', i:items.indexOf(p)}); }} className="font-bold acc-text whitespace-nowrap shrink-0">Edit →</button>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ── Mobile Campaigns ──────────────────────────────────────────────── */
function MobileCampaigns({ createTick }) {
  const [items, setItems]   = React.useState(CAMPS_V2);
  const [query, setQuery]   = React.useState('');
  const [filter, setFilter] = React.useState('all');   // all | active | inactive
  const [copied, setCopied] = React.useState(null);
  const [qr, setQr]         = React.useState(null);
  const [sheet, setSheet]   = React.useState(null);
  const [form, setForm]     = React.useState({});
  React.useEffect(() => { if (createTick) { setForm({ name:'', product:PRODUCTS_V2[0]?.name, promo:PROMOS_V2[0]?.name }); setSheet(true); } }, [createTick]);
  const save = () => {
    const promo = PROMOS_V2.find(p=>p.name===form.promo);
    setItems([{ name:form.name.trim(), promo:form.promo, icon:promo?.icon||'shield', claims:'rr', products:1, claimed:0, reviews:0, status:true }, ...items]);
    window.rbToast && window.rbToast('Campaign launched 🎉');
    setSheet(null);
  };
  const toggleStatus = (i) => setItems(items.map((c,ix)=>ix===i ? {...c, status:!c.status} : c));
  const rows = items
    .filter(c => c.name.toLowerCase().includes(query.toLowerCase()))
    .filter(c => filter === 'all' ? true : filter === 'active' ? c.status : !c.status);
  const active = items.filter(c=>c.status).length;
  const copy = (i) => { setCopied(i); window.rbToast && window.rbToast('Claim link copied'); setTimeout(()=>setCopied(null), 1400); };
  if (sheet) return (
    <MobileSubScreen backLabel="Campaigns" title="New campaign" onBack={()=>setSheet(null)} canSave={(form.name||'').trim().length>0} saveLabel="Launch campaign" onSave={save}>
      <MobileField label="Campaign name" value={form.name||''} onChange={e=>setForm({...form,name:e.target.value})} placeholder="e.g. Spain launch"/>
      <div>
        <p className="text-[11px] font-bold uppercase tracking-wide text-ink-muted mb-1.5">Product <span className="normal-case font-medium text-ink-soft">· step 1</span></p>
        <select value={form.product} onChange={e=>setForm({...form,product:e.target.value})}
          className="w-full bg-white border border-line rounded-xl px-3 py-2.5 text-[13px] text-ink outline-none focus:border-brand-200">
          {PRODUCTS_V2.map(p=><option key={p.name}>{p.name}</option>)}
        </select>
      </div>
      <div>
        <p className="text-[11px] font-bold uppercase tracking-wide text-ink-muted mb-1.5">Promotion <span className="normal-case font-medium text-ink-soft">· step 2</span></p>
        <select value={form.promo} onChange={e=>setForm({...form,promo:e.target.value})}
          className="w-full bg-white border border-line rounded-xl px-3 py-2.5 text-[13px] text-ink outline-none focus:border-brand-200">
          {PROMOS_V2.map(p=><option key={p.name}>{p.name}</option>)}
        </select>
      </div>
      <p className="text-[11px] text-ink-soft">Claim rules and QR design are configured in the desktop editor.</p>
    </MobileSubScreen>
  );
  return (
    <div className="px-4 pb-5 space-y-4">
      {/* summary chips as filters */}
      <div className="grid grid-cols-3 gap-2">
        {[['all','All',items.length],['active','Active',active],['inactive','Inactive',items.length-active]].map(([id,lb,v])=>(
          <button key={id} onClick={()=>setFilter(id)}
            className={"rounded-xl border px-2 py-2.5 text-center transition-all "+(filter===id?"bg-white border-brand-200 ring-1 ring-brand-200 shadow-soft":"bg-white border-line shadow-soft")}>
            <p className="text-[18px] font-extrabold text-ink leading-none">{v}</p>
            <p className="text-[9.5px] font-bold uppercase tracking-wide text-ink-muted mt-1 whitespace-nowrap">{lb}</p>
          </button>
        ))}
      </div>
      {/* search */}
      <div className="relative">
        <svg className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-soft" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
        <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search campaigns"
          className="w-full bg-white border border-line rounded-xl pl-9 pr-3 py-2.5 text-[13px] placeholder:text-ink-soft outline-none focus:border-brand-200 acc-ring"/>
      </div>
      {/* campaign cards */}
      {rows.length === 0 ? (
        <div className="bg-white rounded-2xl border border-line shadow-soft py-12 text-center">
          <p className="text-[13.5px] font-bold text-ink">No campaigns match</p>
          <button onClick={()=>{setQuery('');setFilter('all');}} className="mt-2 text-[12px] font-bold acc-text">Clear filters</button>
        </div>
      ) : (
        <div className="space-y-2.5">
          {rows.map(c => {
            const i = items.indexOf(c);
            const pctDone = c.claimed ? Math.round((c.reviews/c.claimed)*100) : 0;
            return (
              <div key={c.name} className="bg-white rounded-2xl border border-line shadow-soft p-3.5">
                <div className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-xl bg-surface-input flex items-center justify-center shrink-0"><PromoIcon kind={c.icon}/></span>
                  <div className="min-w-0 flex-1">
                    <p className="font-bold text-[13px] text-ink leading-snug truncate">{c.name}</p>
                    <p className="text-[11px] text-ink-muted truncate mt-0.5">{c.promo}</p>
                  </div>
                  <StatusToggle key={c.name+c.status} checked={c.status} onChange={()=>toggleStatus(i)}/>
                </div>
                {/* performance */}
                <div className="mt-3">
                  <div className="flex items-baseline justify-between text-[11px]">
                    <span className="font-bold text-ink">{c.reviews} <span className="font-medium text-ink-muted">reviews</span></span>
                    <span className="text-ink-soft">{c.claimed} claims · {c.products} product{c.products>1?'s':''}</span>
                  </div>
                  <div className="mt-1 h-1.5 rounded-full bg-surface-input overflow-hidden">
                    <div className="h-full rounded-full bg-gradient-to-r from-brand to-brand-light" style={{width:pctDone+'%'}}></div>
                  </div>
                </div>
                {/* share row */}
                <div className="mt-3 pt-2.5 border-t border-line/70 grid grid-cols-2 gap-2">
                  <button onClick={()=>copy(i)}
                    className={"h-9 rounded-lg flex items-center justify-center gap-1.5 text-[11.5px] font-bold transition-colors "+(copied===i?"bg-green-50 text-green-700":"bg-brand-50 text-brand")}>
                    <LinkIcon/>{copied===i?'Copied!':'Copy link'}
                  </button>
                  <button onClick={()=>setQr(i)}
                    className="h-9 rounded-lg bg-brand-50 text-brand flex items-center justify-center gap-1.5 text-[11.5px] font-bold">
                    <QrIcon/>QR code
                  </button>
                </div>
              </div>
            );
          })}
        </div>
      )}
      {qr !== null && <QrPopover name={items[qr].name} seed={qr+7} onClose={()=>setQr(null)}/>}
    </div>
  );
}

/* ── Mobile Claim Center ───────────────────────────────────────────── */
function MobileClaims() {
  const [deliveredIds, setDelivered] = React.useState(CLAIMS_V2.filter(c=>c.delivered).map(c=>c.id));
  const [filter, setFilter] = React.useState('pending');   // pending | delivered | all
  const [open, setOpen]     = React.useState(null);
  const withState = CLAIMS_V2.map(c => ({...c, delivered: deliveredIds.includes(c.id)}));
  const rows = withState.filter(c => filter==='all' ? true : filter==='pending' ? !c.delivered : c.delivered);
  const pending = withState.filter(c=>!c.delivered).length;
  const deliver = (id) => { setDelivered(d => [...d, id]); window.rbToast && window.rbToast('Promotion delivered 🎉'); };
  return (
    <div className="px-4 pb-5 space-y-4">
      <div className="grid grid-cols-3 gap-2">
        {[['pending','Pending',pending],['delivered','Delivered',withState.length-pending],['all','All',withState.length]].map(([id,lb,v])=>(
          <button key={id} onClick={()=>setFilter(id)}
            className={"rounded-xl border px-2 py-2.5 text-center transition-all "+(filter===id?"bg-white border-brand-200 ring-1 ring-brand-200 shadow-soft":"bg-white border-line shadow-soft")}>
            <p className="text-[18px] font-extrabold text-ink leading-none">{v}</p>
            <p className="text-[9.5px] font-bold uppercase tracking-wide text-ink-muted mt-1 whitespace-nowrap">{lb}</p>
          </button>
        ))}
      </div>
      {rows.length === 0 ? (
        <div className="bg-white rounded-2xl border border-line shadow-soft py-12 text-center">
          <p className="text-[13.5px] font-bold text-ink">{filter==='pending' ? 'All caught up!' : 'Nothing here'}</p>
          {filter==='pending' && <p className="text-[11.5px] text-ink-muted mt-1">Every claimed promotion has been delivered.</p>}
        </div>
      ) : (
        <div className="space-y-2.5">
          {rows.map(c => (
            <div key={c.id} className="bg-white rounded-2xl border border-line shadow-soft p-3.5">
              <button onClick={()=>setOpen(open===c.id?null:c.id)} className="w-full text-left">
                <div className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-full text-white text-[12px] font-bold flex items-center justify-center shrink-0"
                        style={{background:`linear-gradient(135deg, hsl(${(c.id*53+40)%360},55%,58%), hsl(${(c.id*53+90)%360},50%,44%))`}}>{c.customer[0]}</span>
                  <div className="min-w-0 flex-1">
                    <p className="text-[12.5px] font-bold text-ink truncate">{c.customer}</p>
                    <p className="text-[10.5px] text-ink-soft truncate mt-0.5">{c.date} · {c.campaign} · order {c.order}</p>
                  </div>
                  <span className="text-[11px] font-bold text-ink whitespace-nowrap shrink-0">{c.stars}.0 <span style={{color:'#F59E0B'}}>★</span></span>
                  <svg className={"text-ink-soft shrink-0 transition-transform "+(open===c.id?"rotate-180":"")} width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
              </button>
              {open===c.id && (
                <div className="mt-3 pt-3 border-t border-line/70 space-y-2.5">
                  <p className="text-[12px] text-ink leading-relaxed">"{c.review}"</p>
                  <div className="flex items-center justify-between text-[11px]">
                    <span className="flex items-center gap-1.5 font-semibold text-ink-muted"><PromoIcon kind={c.promoIcon}/>{c.promo}</span>
                    <span className="flex items-center gap-1.5"><MarketplaceLogos list={[c.mkt]}/><CountryChip c={c.country}/>{c.hasShot && <span className="text-brand font-bold">📎</span>}</span>
                  </div>
                </div>
              )}
              <div className="mt-3 pt-2.5 border-t border-line/70 flex items-center justify-between gap-2">
                <span className="flex items-center gap-1.5 text-[11px] font-semibold text-ink-muted truncate"><PromoIcon kind={c.promoIcon}/><span className="truncate">{c.promo}</span></span>
                {c.delivered
                  ? <DeliveryPill delivered={true}/>
                  : <button onClick={()=>deliver(c.id)}
                      className="h-8 rounded-lg px-3.5 text-[11.5px] font-bold text-white whitespace-nowrap shrink-0"
                      style={{background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>Deliver</button>}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

/* ── Mobile Settings ──────────────────────────────────────────────── */
function MSettingsRow({ icon, label, sub, right, onClick, danger }) {
  return (
    <button onClick={onClick} className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-surface-subtle transition-colors">
      <span className={"w-8 h-8 rounded-lg flex items-center justify-center shrink-0 "+(danger?"bg-rose-50 text-rose-600":"bg-surface-input text-ink-muted")}>{icon}</span>
      <span className="min-w-0 flex-1">
        <span className={"block text-[13px] font-bold "+(danger?"text-rose-600":"text-ink")}>{label}</span>
        {sub && <span className="block text-[11px] text-ink-muted mt-0.5 truncate">{sub}</span>}
      </span>
      {right || <svg className="text-ink-soft shrink-0" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M9 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>}
    </button>
  );
}

function MobileField({ label, type='text', value, onChange, placeholder }) {
  return (
    <label className="block">
      <span className="block text-[11px] font-bold uppercase tracking-wide text-ink-muted mb-1.5">{label}</span>
      <input type={type} value={value} onChange={onChange} placeholder={placeholder}
        className="w-full bg-white border border-line rounded-xl px-3.5 py-2.5 text-[13px] text-ink placeholder:text-ink-soft outline-none focus:border-brand-200 acc-ring"/>
    </label>
  );
}

function MobileSubScreen({ title, onBack, backLabel='Back', children, onSave, saveLabel='Save changes', canSave=true }) {
  return (
    <div className="px-4 pb-5 space-y-4">
      <button onClick={onBack} className="flex items-center gap-1.5 text-[12.5px] font-bold acc-text">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M15 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round"/></svg>{backLabel}
      </button>
      <p className="text-[16px] font-extrabold text-ink -mt-1">{title}</p>
      <div className="bg-white rounded-2xl border border-line shadow-soft p-4 space-y-3.5">{children}</div>
      <button disabled={!canSave} onClick={onSave}
        className={"w-full h-11 rounded-full text-[13px] font-bold text-white transition-opacity "+(canSave?"":"opacity-50")}
        style={{background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>{saveLabel}</button>
    </div>
  );
}

function MobileSettings() {
  const [screen, setScreen] = React.useState(null);   // null | account | brand | password
  const brand = (window.RB_BRANDS||[])[0];
  const [acc, setAcc] = React.useState({ name:'Demo User', email:'demo.user@reviewbuddie.com', phone:'+1 555 010 1234' });
  const [br, setBr]   = React.useState({ name:brand?.name||'', instagram:brand?.socials?.instagram||'', website:brand?.socials?.website||'', facebook:brand?.socials?.facebook||'' });
  const [pw, setPw]   = React.useState({ cur:'', next:'', confirm:'' });
  const saved = (msg) => { window.rbToast && window.rbToast(msg); setScreen(null); };
  const toast = (m) => window.rbToast && window.rbToast(m, false);
  const ic = {
    user:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>,
    brand:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2l7 4v6c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z"/></svg>,
    card:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></svg>,
    lock:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="11" width="16" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>,
    bell:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>,
    out:<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5M21 12H9"/></svg>,
  };
  if (screen === 'account') return (
    <MobileSubScreen backLabel="Settings" title="Account" onBack={()=>setScreen(null)} canSave={acc.name.trim().length>0 && /^\S+@\S+\.\S+$/.test(acc.email)} onSave={()=>saved('Account updated')}>
      <MobileField label="Full name" value={acc.name} onChange={e=>setAcc({...acc,name:e.target.value})}/>
      <MobileField label="Email" type="email" value={acc.email} onChange={e=>setAcc({...acc,email:e.target.value})}/>
      <MobileField label="Phone" value={acc.phone} onChange={e=>setAcc({...acc,phone:e.target.value})}/>
    </MobileSubScreen>
  );
  if (screen === 'brand') return (
    <MobileSubScreen backLabel="Settings" title="Brand Details" onBack={()=>setScreen(null)} canSave={br.name.trim().length>0}
      onSave={()=>{ if(brand){ brand.name=br.name; brand.socials={...brand.socials, instagram:br.instagram, website:br.website, facebook:br.facebook}; } saved('Brand updated'); }}>
      <MobileField label="Brand name" value={br.name} onChange={e=>setBr({...br,name:e.target.value})}/>
      <div className="pt-1 border-t border-line/70">
        <p className="text-[10.5px] font-bold uppercase tracking-wide text-ink-soft mb-2.5">Social links · optional</p>
        <div className="space-y-3">
          <MobileField label="Instagram" value={br.instagram} onChange={e=>setBr({...br,instagram:e.target.value})} placeholder="instagram.com/yourbrand"/>
          <MobileField label="Facebook" value={br.facebook} onChange={e=>setBr({...br,facebook:e.target.value})} placeholder="facebook.com/yourbrand"/>
          <MobileField label="Website" value={br.website} onChange={e=>setBr({...br,website:e.target.value})} placeholder="yourbrand.com"/>
        </div>
      </div>
    </MobileSubScreen>
  );
  if (screen === 'password') {
    const ok = pw.cur.length>0 && pw.next.length>=8 && pw.next===pw.confirm;
    return (
      <MobileSubScreen backLabel="Settings" title="Password" onBack={()=>setScreen(null)} canSave={ok} saveLabel="Update password" onSave={()=>{ setPw({cur:'',next:'',confirm:''}); saved('Password updated'); }}>
        <MobileField label="Current password" type="password" value={pw.cur} onChange={e=>setPw({...pw,cur:e.target.value})}/>
        <MobileField label="New password" type="password" value={pw.next} onChange={e=>setPw({...pw,next:e.target.value})}/>
        <MobileField label="Confirm new password" type="password" value={pw.confirm} onChange={e=>setPw({...pw,confirm:e.target.value})}/>
        <div className="space-y-1">
          {[['8+ characters', pw.next.length>=8],['Passwords match', pw.next.length>0 && pw.next===pw.confirm]].map(([lb,on])=>(
            <p key={lb} className={"text-[11px] flex items-center gap-1.5 "+(on?"text-green-600 font-bold":"text-ink-soft")}>
              <svg width="10" height="10" viewBox="0 0 14 14" fill="none"><path d="M2.5 7l3 3 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>{lb}
            </p>
          ))}
        </div>
      </MobileSubScreen>
    );
  }
  return (
    <div className="px-4 pb-5 space-y-4">
      {/* profile card */}
      <div className="bg-white rounded-2xl border border-line shadow-soft p-4 flex items-center gap-3.5">
        <span className="w-14 h-14 rounded-full text-white font-bold text-[20px] flex items-center justify-center shrink-0" style={{backgroundImage:'linear-gradient(135deg, var(--accent), var(--accent-dark))'}}>{(acc.name[0]||'H').toUpperCase()}</span>
        <div className="min-w-0 flex-1">
          <p className="text-[15px] font-extrabold text-ink">{acc.name}</p>
          <p className="text-[11.5px] text-ink-muted truncate">{acc.email}</p>
        </div>
        <button onClick={()=>setScreen('account')} className="text-[11.5px] font-bold acc-text shrink-0">Edit</button>
      </div>
      {/* plan card */}
      <div className="bg-white rounded-2xl border border-line shadow-soft p-4">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-[13px] font-bold text-ink">Free plan <span className="ml-1 inline-flex items-center gap-1 text-[9.5px] font-bold px-1.5 py-0.5 rounded-full bg-green-50 text-green-700 align-middle"><span className="w-1 h-1 rounded-full bg-green-500"></span>Active</span></p>
            <p className="text-[11px] text-ink-muted mt-0.5">8 of 10 reviews used · resets 1 Aug</p>
          </div>
          <button onClick={()=>window.__openPricing && window.__openPricing()}
            className="h-9 rounded-full px-4 text-[12px] font-bold text-white whitespace-nowrap shrink-0"
            style={{background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>Upgrade</button>
        </div>
        <div className="mt-2.5 h-1.5 rounded-full bg-surface-input overflow-hidden">
          <div className="h-full rounded-full" style={{width:'3.3%',background:'linear-gradient(90deg,var(--accent),var(--accent-dark))'}}></div>
        </div>
      </div>
      {/* account group */}
      <div className="bg-white rounded-2xl border border-line shadow-soft overflow-hidden divide-y divide-gray-100">
        <MSettingsRow icon={ic.user} label="Account" sub="Name, email & phone" onClick={()=>setScreen('account')}/>
        <MSettingsRow icon={ic.brand} label="Brand Details" sub={br.name ? br.name+' · logo & social links' : 'Add your brand'} onClick={()=>setScreen('brand')}/>
        <MSettingsRow icon={ic.card} label="Plans & Billing" sub="Payment method & invoices" onClick={()=>window.__openPricing && window.__openPricing()}/>
        <MSettingsRow icon={ic.lock} label="Password" sub="Security settings" onClick={()=>setScreen('password')}/>
      </div>
      {/* preferences group */}
      <div className="bg-white rounded-2xl border border-line shadow-soft overflow-hidden divide-y divide-gray-100">
        <MSettingsRow icon={ic.bell} label="Notifications" sub="New reviews & claims" right={<StatusToggle checked={true}/>} onClick={()=>{}}/>
      </div>
      {/* logout */}
      <div className="bg-white rounded-2xl border border-line shadow-soft overflow-hidden">
        <MSettingsRow danger icon={ic.out} label="Logout" onClick={()=>window.rbToast && window.rbToast('Logged out (demo)')} right={<span></span>}/>
      </div>
      <p className="text-center text-[10.5px] text-ink-soft">ReviewBuddie · v2.4.1</p>
    </div>
  );
}

/* ── Mobile Pricing (in-frame sheet) ──────────────────────────────────── */
function MobilePricing({ onClose }) {
  const [annual, setAnnual] = React.useState(true);
  const [vol, setVol] = React.useState(250);
  const recommended = PLANS_V2.find(p => p.reviews >= vol) || PLANS_V2[PLANS_V2.length-1];
  return (
    <div className="absolute inset-0 z-40 bg-surface-canvas overflow-y-auto no-scrollbar">
      {/* dark hero */}
      <div className="relative px-4 pt-4 pb-16 text-center" style={{background:'var(--sidebar-bg,#0E1A24)'}}>
        <button onClick={onClose} className="absolute top-3.5 right-3.5 w-9 h-9 rounded-full text-white/60 hover:text-white hover:bg-white/10 flex items-center justify-center z-10">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M6 6l12 12M18 6L6 18" strokeLinecap="round"/></svg>
        </button>
        <p className="text-[10px] font-bold uppercase tracking-[0.2em] mt-2" style={{color:'var(--accent-light,#8B79EC)'}}>Upgrade</p>
        <h2 className="text-[19px] font-extrabold tracking-tight text-white leading-snug mt-2">Powerful plans for every stage of your seller journey</h2>
        <div className="flex justify-center mt-4">
          <div className="inline-flex items-center gap-1 bg-white/10 rounded-full p-1">
            <button onClick={()=>setAnnual(false)} className={"px-3.5 py-1.5 rounded-full text-[12px] font-bold transition-colors "+(!annual?"bg-white text-ink":"text-white/60")}>Monthly</button>
            <button onClick={()=>setAnnual(true)} className={"px-3.5 py-1.5 rounded-full text-[12px] font-bold transition-colors "+(annual?"bg-white text-ink":"text-white/60")}>Annual <span className="acc-text">−25%</span></button>
          </div>
        </div>
        <div className="mt-4 text-left">
          <div className="flex items-baseline justify-between gap-3">
            <p className="text-[11.5px] font-semibold text-white/80">Reviews you collect monthly</p>
            <p className="text-[13px] font-extrabold text-white">{vol >= 1050 ? '1000+' : vol}</p>
          </div>
          <input type="range" min="25" max="1100" step="25" value={vol} onChange={e=>setVol(+e.target.value)} className="w-full mt-1.5 accent-[var(--accent)]"/>
        </div>
      </div>
      {/* stacked plans overlapping hero */}
      <div className="px-4 -mt-10 relative space-y-3 pb-5">
        {[recommended, ...PLANS_V2.filter(p=>p!==recommended)].map(p => (
          <PlanCardV2 key={p.name} p={p} annual={annual} highlight={p===recommended} badge={p===recommended ? 'Recommended for you' : null}/>
        ))}
        <div className="rounded-2xl border border-line bg-white px-4 py-3 flex items-center justify-between gap-2">
          <p className="text-[11.5px] text-ink-muted"><b className="text-ink">Free plan</b> — 30 reviews/mo</p>
          <span className="inline-flex items-center gap-1 text-[10px] font-bold px-2 py-0.5 rounded-full bg-green-50 text-green-700 whitespace-nowrap"><span className="w-1 h-1 rounded-full bg-green-500"></span>Current</span>
        </div>
        <div className="pt-1">
          <p className="text-[10px] font-bold uppercase tracking-[0.12em] text-ink-soft text-center mb-2">Every subscription includes</p>
          <div className="flex flex-wrap justify-center gap-x-4 gap-y-1.5">
            {SHARED_FEATURES.map(f => (
              <span key={f} className="inline-flex items-center gap-1 text-[11px] text-ink-muted">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" className="text-brand"><path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/></svg>{f}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MobileApp() {
  const [tab, setTab] = React.useState('dashboard');
  const [pricing, setPricing] = React.useState(false);
  const [createTicks, setCreateTicks] = React.useState({});
  const fabCreate = () => setCreateTicks(t => ({...t, [tab]: (t[tab]||0)+1}));
  React.useEffect(() => {
    const prev = window.__openPricing;
    window.__openPricing = () => setPricing(true);
    return () => { window.__openPricing = prev; };
  }, []);
  const go = (id) => {
    if (id === 'more') return setTab('claims');
    setTab(id);
  };
  const title = {promotions:'Promotions', products:'Products', campaigns:'Campaigns', claims:'Claim Center', settings:'Settings'}[tab] || 'Welcome back, Demo User';
  return (
    <div className="min-h-screen flex items-start justify-center py-8 px-4" style={{background:'#0B141C'}}>
      <div className="w-[390px] max-w-full bg-surface-canvas rounded-[36px] overflow-hidden shadow-2xl ring-8 ring-black/60 relative" style={{height:780}}>
        <div className="h-full overflow-y-auto no-scrollbar pb-20">
          {/* header */}
          <div className="sticky top-0 z-20 bg-surface-canvas/90 backdrop-blur-md px-4 pt-4 pb-3 border-b border-line">
            <div className="flex items-center justify-between">
              <span className="inline-flex"><Logo size={24}/></span>
              <div className="flex items-center gap-2">
                <button className="relative w-9 h-9 rounded-full bg-white border border-line flex items-center justify-center text-ink-muted">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
                  <span className="absolute top-1.5 right-2 w-1.5 h-1.5 rounded-full bg-rose-500"></span>
                </button>
                <span onClick={()=>setTab('settings')} role="button" className={"w-9 h-9 rounded-full text-white font-bold text-[13px] flex items-center justify-center cursor-pointer transition-shadow "+(tab==='settings'?"ring-2 ring-offset-2 ring-[var(--accent)]":"")} style={{backgroundImage:'linear-gradient(135deg, var(--accent), var(--accent-dark))'}}>H</span>
              </div>
            </div>
            <p className="mt-2.5 text-[16px] font-extrabold tracking-tight text-ink">{title}</p>
          </div>
          <div className="pt-3">
            {tab === 'promotions' ? <MobilePromotions createTick={createTicks.promotions}/> : tab === 'products' ? <MobileProducts createTick={createTicks.products}/> : tab === 'campaigns' ? <MobileCampaigns createTick={createTicks.campaigns}/> : tab === 'claims' ? <MobileClaims/> : tab === 'settings' ? <MobileSettings/> : <MobileDashboard onGo={setTab}/>}
          </div>
        </div>
        {/* FAB — new promotion */}
        {pricing && <MobilePricing onClose={()=>setPricing(false)}/>}
        {!pricing && (tab === 'promotions' || tab === 'products' || tab === 'campaigns') && (
          <button onClick={fabCreate}
            className="absolute bottom-20 right-4 w-13 h-13 rounded-full text-white shadow-pop flex items-center justify-center"
            style={{width:52,height:52,background:'linear-gradient(135deg,var(--accent),var(--accent-dark))'}}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M12 5v14M5 12h14" strokeLinecap="round"/></svg>
          </button>
        )}
        {/* bottom tab bar */}
        <div className="absolute bottom-0 inset-x-0 bg-white/95 backdrop-blur-md border-t border-line grid grid-cols-5 pb-3 pt-1.5">
          {MOBILE_TABS.map(t => {
            const on = tab === t.id || (t.id==='more' && tab==='claims');
            return (
              <button key={t.id} onClick={()=>go(t.id)} className="flex flex-col items-center gap-0.5 py-1">
                <span className={on ? "acc-text" : "text-ink-soft"}>{NavIcons[t.icon]}</span>
                <span className={"text-[9.5px] font-bold "+(on?"acc-text":"text-ink-soft")}>{t.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.MobileApp = MobileApp;