<div class="space-y-8 max-w-md mx-auto py-4">
  <div class="space-y-2">
    <h1 class="text-3xl font-bold tracking-tight text-foreground">Mobile App Shell (layout-mapp)</h1>
    <p class="text-sm text-muted-foreground leading-relaxed">
      Full mobile application shell with fixed bottom tab bar, native pull-to-refresh container, and bottom sheet drawer.
    </p>
  </div>

  <!-- Mobile Shell Frame -->
  <div class="border-[6px] border-slate-800 rounded-[2.5rem] p-2 bg-slate-900 shadow-2xl max-w-sm mx-auto overflow-hidden">
    <div class="rounded-[2rem] bg-background border border-border h-[520px] flex flex-col overflow-hidden relative">
      <!-- Status Notch -->
      <div class="h-4 bg-muted/40 flex items-center justify-center">
        <div class="w-16 h-2.5 bg-border rounded-full"></div>
      </div>

      <!-- App Header -->
      <div class="px-4 py-2.5 bg-background border-b border-border flex items-center justify-between">
        <h2 class="font-bold text-sm text-foreground">ERP Mobile</h2>
        <div class="flex items-center gap-1.5">
          <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
          <span class="text-[10px] text-muted-foreground font-mono">Live</span>
        </div>
      </div>

      <!-- Scroll Body -->
      <div class="flex-1 p-4 overflow-y-auto space-y-3">
        <div class="p-4 rounded-xl bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/20 space-y-1">
          <div class="text-[11px] text-primary font-semibold uppercase tracking-wider">Warehouse Mode</div>
          <div class="text-sm font-bold text-foreground">Ready for Barcode Scanning</div>
        </div>

        <div class="grid grid-cols-2 gap-2">
          <button class="p-3 rounded-xl bg-muted/50 border border-border text-left hover:bg-muted transition-colors">
            <div class="text-base mb-1">📦</div>
            <div class="text-xs font-semibold text-foreground">Inventory</div>
            <div class="text-[10px] text-muted-foreground">420 items</div>
          </button>
          <button class="p-3 rounded-xl bg-muted/50 border border-border text-left hover:bg-muted transition-colors">
            <div class="text-base mb-1">🚚</div>
            <div class="text-xs font-semibold text-foreground">Shipments</div>
            <div class="text-[10px] text-muted-foreground">18 active</div>
          </button>
        </div>
      </div>

      <!-- Bottom Tab Bar -->
      <div class="px-6 py-2 bg-muted/80 border-t border-border flex items-center justify-between backdrop-blur">
        <button class="flex flex-col items-center gap-0.5 text-primary">
          <span class="text-xs">🏠</span>
          <span class="text-[9px] font-semibold">Home</span>
        </button>
        <button class="flex flex-col items-center gap-0.5 text-muted-foreground hover:text-foreground">
          <span class="text-xs">📊</span>
          <span class="text-[9px]">Analytics</span>
        </button>
        <button class="flex flex-col items-center gap-0.5 text-muted-foreground hover:text-foreground">
          <span class="text-xs">⚙️</span>
          <span class="text-[9px]">Settings</span>
        </button>
      </div>
    </div>
  </div>
</div>